1. Monitor your website’s Cumulative Layout Shift (CLS)
The Cumulative Layout Shift (CLS) is the metric that measures the instability of content within a website. That is to say the elements that can move in a web page, affecting the reading of an article for example. This indicator is one of the Core Web Vitals determined by Google, having a real impact on the user experience. While images aren’t the primary factor affecting this metric, they may be contributing. This is particularly the case when a web browser does not know the dimensions of the image before loading the content of a web page and does not leave enough space for this image, as explained by Alan Kent, Developer Advocate at Google.
Advice: it is essential to evaluate the loading of a website and to make changes to improve it. Note that there are also many tools that can measure the performance of your website.
2. Properly size your images
For faster and more efficient loading of images, it is essential to choose the right width and height of these. “Larger files take longer to download, especially on smartphones where the network connection can be slower, but also due to their less powerful processors”, says Alan Kent. If the web browser itself crops the image, the download time ends up being longer than necessary. It is thus possible to detect images whose size is incorrect in the section Opportunities, within the report provided by PageSpeed Insights.
The advice: bet on reactive images that will adapt to the medium used to access the website. There is thus an HTML attribute allowing to list different formats and dimensions of images so that the web browser can choose what is the most suitable.
3. Use the best aspect ratio
It is worth thinking about the best format to use for your images, especially between PNG, JPEG or WebP formats. “File format affects file size. Care should be taken however as formats such as JPEG and WebP can shrink files using lossy compression algorithms, i.e. a reduction in image quality in exchange for the reduction in file size », explains Alan Kent. The Google expert points out, however, that the deterioration in image quality is not necessarily perceptible to visitors to a site, and that the gain in loading speed can be substantial.
Tip: check if your website can benefit from using a different image format in the section Opportunities > Deliver images in next-gen formats of a report rendered on PageSpeed Insights.
4. Compress images
Another trick is to use the correct quality factor for images to encode them efficiently, while maintaining the desired image quality. It is possible to identify if optimizations are feasible in the section Opportunities > Efficiently encode images of a PageSpeed Insights report.
Tip: In order to find the quality factor that’s right for you, it’s recommended that you use your image conversion tool of choice and use different quality values on multiple images, then compare the before and the after. Google also recommends the Squoosh.app site as an easy way to compare images with and without compression.
5. Tell the Browser Caching Hints
To ensure images load faster on a website, a web browser can be told how long it can safely cache images. When an image is sent from a website, it is possible to include an HTTP header with caching hints such as the recommended amount of time for a web browser to cache an image. To find out if response headers have been set correctly on a website, Google recommends looking at the section Opportunities > Use effective cache rules on static items in a PageSpeed Insights report. This indicates whether any images are eligible for caching improvements.
Tip: Make sure you have platform or web server settings that you can change to adjust cache lifetime. If you don’t change images frequently, you can set a long cache lifetime.
6. Be sure to create sequences of image downloads
Google also recommends properly sequencing the order in which assets, including images, are downloaded. This can improve the performance of a web page. It is therefore advisable to opt for the following download order:
- Hero Header, the main banner of your website,
- Images located before the waterline,
- Images located just below the fold line.
In the section Opportunities > Defer loading off-screen images of a PageSpeed Insights report, you have the ability to identify images that might be loading after other images.
For more details on Google’s advice, check out the full video: