Offscreen Images.

Performance Asset Optimization

Images below the fold should lazy-load — don't waste bandwidth on hidden content

What does this check test?

This check identifies images that are located below the fold (outside the initial viewport) but are loaded eagerly during page load. These offscreen images consume bandwidth and compete for network resources with critical above-the-fold content, delaying LCP and other key metrics. Native browser lazy loading (`loading="lazy"`) defers the download of offscreen images until the user scrolls near them, saving bandwidth and prioritizing critical resources. Lighthouse estimates potential savings by identifying images that are not visible in the initial viewport.

Why does it matter?

Loading all images eagerly — including those the user may never scroll to see — wastes bandwidth and delays the loading of critical above-the-fold content. On a typical long-scrolling page, 50-80% of images may be below the fold. Lazy loading these images can save hundreds of kilobytes to several megabytes of initial page weight, directly improving LCP and FCP. On mobile networks, this bandwidth savings translates to seconds of faster load time. Lazy loading also reduces server bandwidth costs and CDN egress charges.

Who is affected?

Long-scrolling pages with many images are the primary beneficiaries: e-commerce product listing pages, image galleries, social media feeds, news article indexes, and blog post listings. Any page with more than 3-4 images should lazy-load those that are not visible in the initial viewport. Infinite scroll implementations must use lazy loading to prevent downloading hundreds of images at once.

Where does this apply?

Images below the fold in the initial viewport are candidates for lazy loading. Use Chrome DevTools to identify which images are visible without scrolling — anything outside the initial viewport should be lazy-loaded. Be careful NOT to lazy-load the LCP image (usually the hero image or main product photo) — this would delay the most important metric. DevTools Coverage panel can show which images were visible during initial load versus loaded later.

How to fix it

Add `loading="lazy"` to all below-the-fold images, but NOT to the LCP image. Above-the-fold LCP image — load eagerly:

html

<img src="/hero.webp" alt="Hero" fetchpriority="high" width="1200" height="600" />

Below-the-fold images — lazy-load:

html

<img src="/product.webp" alt="Product" loading="lazy" decoding="async"
     width="400" height="300" />

Always include `width` and `height` attributes on lazy-loaded images to prevent layout shifts when they load. For CSS background images, use `Intersection Observer` to load them only when the element enters the viewport. For frameworks: Next.js `<Image>` component has lazy loading enabled by default. For carousels and image galleries, only load the initially visible slide and lazy-load the rest.

References

AppVet checks Offscreen Images automatically

Run a free performance scan and get a full report with actionable fixes, including a Fix with AI prompt you can paste into any coding tool.

Run Audit

← All checks