How to lazy-load offscreen images
Images below the fold do not need to load before the page is usable. One attribute defers them, but never lazy-load the hero.
Step by step, with screenshots: How to lazy load images (and iframes) without hurting LCP →
Check your own site
Runs these 2 checks and the other 191, free, in about 45 seconds.
Or run only this check with the free Image size checker.
What it is
Lazy loading means delaying the download of images and iframes that are outside the visible screen until the visitor scrolls near them. Browsers support it natively: adding loading="lazy" to an <img> or <iframe> is all it takes, with no JavaScript library.
On a long page most images sit below the fold, and loading them all up front competes for bandwidth with the images people see first. Lazy loading saves that data and speeds up the first screen. The one rule: never lazy-load the hero or any image in the first screen, because that delays Largest Contentful Paint. getReport flags offscreen images that load eagerly and shows how many bytes lazy loading would save.
What a passing site looks like
- Offscreen images are lazy-loadedwarning · −4 ptseffort S
- Images far below the fold wait until they are neededinfo onlyeffort S
1. Offscreen image loading
Why it matters. Images far below the fold compete for bandwidth with the ones visitors see first. Lazy loading defers them until they scroll into view.
- Add loading="lazy" to images below the fold, but never to the hero/LCP image.
- WordPress adds it by default since 5.5; check your theme or slider has not removed it.
2. Offscreen images loading early
Why it matters. Images far down the page compete for bandwidth with the ones visitors see first. The browser can wait until they are scrolled near if you let it.
- Add loading="lazy" to the images listed, but never to the hero or LCP image at the top.
- WordPress adds it by default since 5.5; check your theme, slider or page builder has not removed it.
Questions people ask
Does WordPress lazy load images automatically?
Yes. Since version 5.5, WordPress adds loading="lazy" to images in content, and since 5.9 it tries to skip the first image so the hero is not delayed. Themes and page builders that output their own image markup may not follow those rules, so check that images in the first screen load eagerly and those further down carry the lazy attribute.
What does loading="lazy" do?
It tells the browser it may wait to download an image or iframe until it is close to the viewport. Chrome starts loading lazy images about 1,250 px before they scroll into view on fast connections and 2,500 px on slow ones, so visitors rarely see a gap. Always give lazy images width and height attributes, so their space is reserved and nothing jumps when they arrive.
What is the difference between lazy loading and eager loading?
Eager loading, the default, downloads a resource as soon as the browser finds it in the page; lazy loading waits until it is needed. Use eager loading, optionally with fetchpriority="high", for the hero image and anything in the first screen. Use lazy loading for images further down the page, later slides in a carousel, and embedded videos and maps.