Recommendations

Lighthouse
Metrics
Audits
PageSpeed (Legacy)
YSlow (Legacy)

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.

Without lazy loading/deferring images, your visitor waits for all the images on your page to load.

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.

Lazy-loading offscreen images speeds up above-the-fold interaction and improves your visitors' page experience.

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.

Expanded view of the Defer offscreen images audit
Clicking the audit reveals the off-screen images that can be deferred 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.

Summary

 **