Lazy image loading
In case you need to postpone image loading. For example, you have a page that has a list of 10+ images, let's say you describe the details of your recent travel in a blog. When your reader wants to read the article, 10+ images definitely will affect a page loading time.
You can write a logic by yourself, using Intersection Observer API, as well as using ready-made solutions.
But Chrome 75+ has native support for loading attribute:
<img src="travel.jpg" loading="lazy" alt="Paris castle" />
That means, loading="lazy" will defer image loading until it become visible on the screen.
Blog post from Lighthouse team
Performance audit in the CI process
The Lighthouse team has introduced a tool that can audit every commit for performance, accessibility issues. Try their online auditing tool if you haven't yet.
Puppeteer
A tool can automate many things you do manually, for example:
- generate screenshots of websites, saving a page as PDF;
- automate UI testing by providing API to make mouse clicks, form submissions, dealing with inputs, etc.;
- crawl SPAs;
- test Chrome extensions;
Pre-loading links
Quicklink pre-loads links in a browser idle time when a link becomes reachable for the user. The tool also verifies whether a user has a slow connection, if so - it will not pre-load a link.
Packages
city-roads
It visualizes all city roads in a particular city, uses OpenStreetMap, renders hand-written like city paths. Source
OpenLayers
One more package to render maps, easy to customize. Source
Top comments (0)