Defer Offscreen Images

A long product listing page or article with a dozen images doesn't need to load all of them the instant the page opens: most of them are below the fold and won't be seen until the visitor scrolls. This audit checks whether you're loading them anyway.

What it means

Lighthouse identifies images that are outside the initial viewport at page load and flags them if they're being fetched eagerly rather than deferred. It reports the estimated bytes and milliseconds that could be saved on the initial load by delaying those requests.

Why it matters

Every offscreen image loading eagerly is competing for the same limited number of parallel network connections and the same bandwidth as the resources the visitor actually needs right now, most importantly whatever your Largest Contentful Paint element is. Deferring offscreen images doesn't just save total bytes eventually, it frees up the network earlier for what matters for the first paint.

How to fix it

Modern browsers support native lazy loading with a single attribute, no library required:

<img src="/gallery-item-3.jpg" loading="lazy" alt="Gallery item">

The browser automatically starts fetching a lazy-loaded image once it's within a rough distance of the viewport, so it's typically already loaded by the time the visitor scrolls to it.

• The one mistake to explicitly avoid: never lazy-load your LCP image. Adding loading="lazy" to the hero image or main product photo tells the browser to delay exactly the resource this whole audit list is trying to get onto the screen faster, which actively makes LCP worse, not better. Make sure that same LCP image is also properly sized and, where possible, served in a next-gen format, since all three fixes target the same element.
• For background images set via CSS (which loading="lazy" doesn't cover), use an IntersectionObserver to swap in the real image URL only once the element approaches the viewport.
• Most gallery, carousel and infinite-scroll components from popular libraries already support lazy loading; check the component's props before hand-rolling an observer.

How to verify

Re-test the page and confirm the offscreen-images audit shows no remaining savings, then manually verify in DevTools' Network tab (filtered to "Img") that below-the-fold images only start requesting as you scroll toward them, and that the LCP image is still requested immediately, not lazily.