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) For WordPress users
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, a performance plugin that automatically applies 80% of web performance best practices and offers additional powerful features including LazyLoad. Among its automated features, WP Rocket enables Critical Image Optimization, which detects, prioritizes, and auto-optimizes the above-the-fold images by auto-excluding them from LazyLoad.
Read our detailed WordPress optimization guide using WP Rocket.