Lighthouse: Defer offscreen images
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.
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.