Lighthouse: Defer offscreen images
Overview
Deferring offscreen images (or lazy-loading) refers to the practice of delaying the loading of images that aren't in your visitors' viewport until they are needed.
Generally, when the browser loads a page, it downloads all the images requested, including ones that aren't immediately visible to your visitors (i.e., you will need to scroll down the page to view these images).
Effectively, the browser spends time loading images that aren't needed during initial page load, which may impact your visitors' page experience.
Lazy-loading offscreen images is considered an industry best-practice as it ensures that the browser only downloads the images that are actually needed for display in the viewport.
How does your site score on this audit?
How does deferring offscreen images affect page performance?
Images are often the largest resources on your page and require more time to download compared to text-based resources.
Loading offscreen images may affect user experience by downloading data that isn't immediately required.
Lazy-loading offscreen images ensures that they only load when they are needed, as in appearing into view when your visitor scrolls down the page.
This helps conserve essential bandwidth, particularly on mobile devices, resulting in a fast-loading page as perceived by your visitors.
Key Performance metrics such as Time to Interactive (TTI) and Speed Index (SI) may be improved by implementing a lazy-loading strategy.
How does GTmetrix trigger this audit?
GTmetrix identifies all the offscreen or hidden images that load below-the-fold.
Clicking the audit reveals the off-screen images that can be lazy-loaded to improve your page performance.
GTmetrix also estimates the potential file size savings for each image file.
How to defer offscreen images?
There are a few strategies to defer offscreen images, such as:
1) Using Native Lazy-loading
Browsers like Chrome (versions 76 and higher) and Firefox (versions 75 and higher), among others, support native lazy-loading for inline <img> elements i.e., images embedded in your HTML.
Native lazy-loading is executed by specifying the loading="lazy" attribute inside an <img> element. Learn more about native lazy-loading here.
This is the easiest way to implement lazy-loading for your website. Note that images declared in CSS cannot be lazy-loaded using this technique.
2) Using JavaScript
There are a number of ways to implement lazy-loading using JavaScript.
Read this article to learn more about the different ways you can use JavaScript to implement lazy-loading, both, for images embedded in your HTML, as well as, background images declared in your CSS.
3) Using CMS Plugins (For WordPress and other CMS)
There are many WordPress (and other CMS) plugins that can help you implement lazy loading on below-the-fold images.
One such plugin is WP Rocket - remember to exclude above-the-fold images, otherwise your LCP may be delayed.
Read our detailed WordPress optimization guide using WP Rocket.