How to Lazy-Load Off-Screen Images
Defer images below the fold so they don't compete with the initial render.
Images that are not lazy-loaded are all fetched during the initial page load, even the ones far below the fold, competing for bandwidth with the content people can actually see. Add loading="lazy" to off-screen images. Leave the largest above-the-fold image eager, because lazy-loading it delays the very element Largest Contentful Paint measures.
Why It Matters
Loading every image up front — including ones far below the fold — wastes bandwidth and delays the content users actually see first. Native lazy-loading defers off-screen images until the user scrolls near them.
How to Fix
Add loading="lazy"
Never lazy-load the hero
Code Fix
html<img src="gallery-12.jpg" width="800" height="600" alt="..."><img src="gallery-12.jpg" width="800" height="600" alt="..." loading="lazy" decoding="async">Platform-Specific Instructions
WordPress adds loading="lazy" automatically since 5.5; ensure a "Skip lazy load" rule covers your hero image.
next/image lazy-loads by default; pass priority to the hero to opt out.
Fixed that one.
Now find the rest.
A free audit ranks every issue on your site by the score points it costs — and links each one straight to its guide.
Run a free audit