Image source: Pixabay
Images are a big deal for ecommerce sites. People want a good look at what they’re buying online so they have to be reasonable quality. Your page might have hundreds of images however - products, buttons, banners and other page assets - so also you need to make sure your website remains fast and efficient. Customers will abandon slow loading pages.
In Google's Ecommerce Essentials on YouTube, Developer Advocate Alan Kent tackles 6 common errors ecommerce sites can make with static images, and gives optimization tips for fixing them.
1. Eliminate Cumulative Layout Shift (CLS)
CLS is something we should all be familiar with, as it’s one of Google’s Core Web Vitals. It’s when different content elements on a page visibly move around on the screen. Images used incorrectly can contribute to this.
Most browsers start displaying the top of the page before the whole page has been downloaded. Image references are added to a queue of resources to download.
The problem comes when the browser doesn’t know the dimensions of the image before rendering the page content. Layout shift happens if the browser discovers it didn’t leave enough space for the image.
Use Google's PageSpeed Insights tool to identify problems on your site with CLS. (It's worth noting that CLS can also be caused by other elements such as JavaScript.)
For images, the way to eliminate CLS issues is to include image dimensions in the html markup. The Pag Speed Insights report will show you which images are missing this information.
2. Size your images correctly
Larger files take longer to download and process, so it’s important to pick the right width and height for your images.
The Opportunities section in the PageSpeed Insights report identifies images which have larger than needed dimensions on the page.
You can use responsive image techniques to make sure your images work well on all devices, but a simpler solution might be to use a Content Delivery Network (CDN) which will resize the images and convert them to more efficient formats for you.
3. Use the best image file format
It’s worth thinking about which format is the best for your images, for example PNG, JPEG or WebP. The format affects the file size, but certain formats such as JPEG or WebP can result in a loss of quality when the file size is reduced.
Think about where you need pixel perfect images and for these, use formats which may be less efficient but don’t affect the quality.
You probably don't need pixel perfect images everywhere however, and there can be substantial gains in speed with some sacrifice in quality.
The PageSpeed Insights report section called “Serve Images in next gen formats” will give you a list of images on a page which are candidates to be converted to a more efficient file format.
Not all image formats will work on all web browsers, so Alan Kent recommends caniuse.com to check which browsers support which image file formats.
You can also use a CDN which means that instead of picking a single format, your website will return the most efficient format the browser says it supports.
4. Compress images appropriately
Use the right quality factor for your images to encode them efficiently while retaining the desired quality levels. The PageSpeed Insights report will show you candidate images for compression optimization as well as the potential file size savings. The report does not perform a visual check on your compressed images but is based on commonly used compression factors.
Test some images with different quality values using an image conversion tool to find a value you’re happy with. A common value for WebP is 75. There are many image conversion tools available and most people will have one they use regularly. Some, for example Sqoosh, show you the before and after for comparison.
Remember, you may need different quality values for different images, depending on their use. For example, a zoomable product image would need a high quality value so potential buyers get a good view of the detail.
5. Cache images in the browser
When you return an image from your site you can include a HTTP response with guidance on how long the browser can safely cache images. Caching used correctly can result in significantly faster load times.
Use the PageSpeed Insights report to check if the caching guidance has been set appropriately on your site and to see a list of images that may benefit from caching improvements.
To fix issues, check if you have platform or web server settings that you can change to adjust the cache lifetime. If you don’t change images often or if you give images a new URL, you can set a very long cache lifetime.
Using a CDN can also make downloads faster as the images are stored in multiple locations worldwide, so are more local to where users are connecting from.
6. Sequence image downloads correctly
Lastly, a more advanced tip. Page performance can be significantly improved if you correctly sequence the order in which resources, including images, are downloaded.
As downloading images one at a time can be slow, browsers using HTTP1 typically download several images in parallel over independent network connections.
Using HTTP2, most browsers multiplex downloads over a single network connection, which is usually quicker and stops larger files blocking smaller files being downloaded.
However, both approaches suffer from a network bandwidth bottleneck.
In general, this is the order in which you want images to be downloaded:
- Hero image(s) above the fold
- Other images above the fold
- Images just below the fold (ready for when the user starts scrolling)
- Lazy load the rest (images unlikely to be displayed soon)
The PageSpeed Insights report shows you which images are not loading efficiently. It identifies images that could be loaded after other images in the “Defer offscreen images” section.
Lazy loading, where images are not downloaded until the user scrolls to that section of the page, is often used to improve the order of image loading.
However, performance degradation can occur if lazy loading is used for images above the fold so watch out for this. Lighthouse latest versions will highlight if an image is lazily loaded that will impact Largest Contentful Paint (another of the Core Web Vitals).
Further options are opened up if both browser and website support HTTP2. The website can start pushing images to the browser that it knows will be needed, without waiting for the browser to request them.
HPPT2 also allows for multiple images to be downloaded more efficiently in parallel over a single network connection.
Watch the full YouTube video here:
