Defer offscreen images (lazy-load below the fold)

What’s actually happening

Lighthouse lists images that sit outside the first viewport — footer logos, gallery thumbnails, content far down a long page — and shows the bytes you'd save by not loading them upfront. By default the browser fetches every <img> as soon as it parses the HTML, so a footer image can compete with your hero image for the connection. On mobile that contention delays the largest visible element and pushes LCP later than it needs to be.

Common causes

• Below-the-fold <img> tags with no loading attribute, so the browser fetches them at the same priority as critical content
• A long page (blog post, product grid, gallery) where most images never enter the viewport on a typical visit
• A lazy-loading script that was removed during a redesign, or a plugin whose lazy-load setting got switched off
• Background images set in CSS, which native lazy-loading doesn't cover and which load as soon as their rule applies
• CMS or page-builder output that hardcodes eager loading on every image

How to fix it

1. Add loading="lazy" to offscreen imagesPut `loading="lazy"` on every <img> that starts below the fold. It's native in all current browsers, needs no JavaScript, and defers the fetch until the image nears the viewport. Pair it with explicit width and height so the layout doesn't shift when the image arrives.
2. Never lazy-load the LCP imageLeave your hero or first in-view image as `loading="eager"` (the default) and, if anything, add `fetchpriority="high"`. Lazy-loading the largest above-the-fold image delays it and makes LCP worse — that's a separate Lighthouse warning in its own right.
3. Handle CSS background images yourselfNative lazy-loading only applies to <img> and <iframe>. For decorative CSS backgrounds far down the page, use an IntersectionObserver to add the background class when the element scrolls close, or convert the image to a real <img> so the attribute works.
4. Check your CMS or build outputIn WordPress confirm core lazy-loading isn't disabled by a theme or conflicting plugin. In a static build, set lazy loading on content images by default in your image component, with an opt-out for the hero.
5. Re-measure on a throttled mobile profileRe-run Lighthouse under Slow 4G after the change. The offscreen savings should drop toward zero and LCP should hold or improve. If LCP got worse, you almost certainly lazy-loaded something that was actually in view.