Yes, lazy load images that sit below the fold, because it saves data and frees bandwidth for what visitors see first. But never lazy load the main image visible on load, usually the hero, because that delays Largest Contentful Paint. Add loading="lazy" to off-screen images only, and give the hero fetchpriority="high" instead.
This guide explains how native lazy loading works, why it so often backfires on LCP, the exact HTML to use, and how to check what your CMS is doing.
Key takeaways
- Lazy load images below the fold, but never the hero or LCP image visible when the page opens.
- Give the hero image fetchpriority high, use it on one image per page and never combine it with loading lazy.
- Always set width and height on lazy images so the browser reserves space and avoids layout shift.
- Check page builders and optimisation plugins, as some add JavaScript lazy loading to every image including the hero.
What is lazy loading?
Lazy loading means the browser waits to download an image until the visitor scrolls near it. Without it, every image on the page downloads straight away, including the ones in the footer that most visitors never reach.
Modern browsers support this natively with one attribute:
<img src="team-photo.webp" alt="Our team at the Leeds office"
width="800" height="533" loading="lazy">
Native lazy loading for images is supported in Chrome and Edge, Firefox (from version 75) and Safari (from version 15.4). It also works on <iframe> elements, which is useful for embedded maps and videos.
How does the browser decide when to load a lazy image?
Chrome starts fetching a lazy image when it comes within a set distance of the viewport, so it is usually ready by the time the visitor scrolls to it. In 2020 Chrome reduced those distances to 1,250 pixels on fast connections and 2,500 pixels on 3G or slower. The thresholds are built into the browser and cannot be changed by the website.
Two details worth knowing:
- Lazy loading only takes effect when JavaScript is enabled. With scripting off, the browser loads the images normally. This is a privacy measure to stop sites tracking scroll position through image requests.
- Lazy images in the viewport may not have finished loading when the page's
loadevent fires.
When does lazy loading help?
- Long pages with many images, such as blog archives, galleries, product listings and portfolios.
- Images well below the fold, such as testimonials, logos of clients and footer imagery.
- Embedded iframes like Google Maps, YouTube and Vimeo players further down the page. Our map embed generator adds
loading="lazy"to the code for you. - Visitors on mobile data, who download only what they look at.
In Google's own test on WordPress archive pages, lazy loading roughly halved image bytes downloaded on desktop.
When does lazy loading hurt LCP?
When it is applied to an image that is visible as soon as the page opens. A lazy image is not requested until the browser has worked out the page layout and confirmed the image is near the viewport. That adds a delay before the download even begins, and if that image is the Largest Contentful Paint element, LCP gets worse.
Google's Chrome team measured this on WordPress sites in 2021. In CrUX data, the median 75th-percentile LCP was 2,922 ms for pages without lazy loading and 3,546 ms for pages with it, although the authors note this is a correlation, not proof of cause. In a controlled lab test, simply not lazy loading images above the fold improved LCP on archive pages by 14% on desktop and 18% on mobile, while keeping image savings.
The rule is simple: eager load what is visible on first load, lazy load the rest.
What HTML should I use for the hero image?
Load it eagerly (the default, so just leave loading off) and raise its priority:
<img src="hero-1600.webp"
srcset="hero-800.webp 800w, hero-1600.webp 1600w"
sizes="100vw"
width="1600" height="900"
alt="Fresh bread on the counter of our Bristol bakery"
fetchpriority="high">
fetchpriority="high" tells the browser to fetch this image ahead of other images. Use it on one image per page, the likely LCP element. Never combine it with loading="lazy".
If your hero is a CSS background image, the browser finds it late because it has to download and parse the CSS first. Either switch to an <img> element or add a preload:
<link rel="preload" as="image" href="hero-1600.webp" fetchpriority="high">
Why do lazy images cause layout shift?
An image with no dimensions takes up no space until it loads, so the content below it jumps down when it arrives. That hurts Cumulative Layout Shift. Always include width and height attributes (or a CSS aspect-ratio) so the browser can reserve the space. This is even more important for lazy images, which load while the visitor is reading. Our guide to fixing CLS covers other causes.
Does WordPress lazy load images automatically?
Yes. WordPress has added loading="lazy" to images by default since version 5.5. Version 6.3 improved this: it more reliably skips lazy loading for images likely to be in the viewport, and adds fetchpriority="high" to the image it judges most likely to be the LCP element.
Problems usually come from page builders, sliders or optimisation plugins that add their own JavaScript lazy loading on top, sometimes to every image including the hero. Check your hero in the page source. If it has loading="lazy", a data-src attribute or a lazy-loading class, exclude it in your plugin settings. Our WordPress speed guide has more on plugin conflicts.
Should I use a JavaScript lazy-loading library?
Rarely, now. Native loading="lazy" is supported across current browsers, needs no extra script and cannot fail because a script did not load. JavaScript libraries made sense before native support and are still used for special cases such as background images or custom fade-in effects. If you use one, make sure it never touches above-the-fold images.
How do I check whether my LCP image is lazy loaded?
- Run PageSpeed Insights on the page and open the LCP request discovery insight in the Lighthouse report. It flags an LCP image that is lazy loaded or missing
fetchpriority. - Open the LCP breakdown. A large "resource load delay" often means the browser found the image late.
- In Chrome DevTools, right-click the hero image, choose Inspect and check its attributes.
MakeItFlow includes these Lighthouse findings in its website speed test, so you can spot a lazy-loaded hero across your key pages without testing each one by hand.
Frequently asked questions
Should I lazy load the first image on a mobile page?
Usually not. On a phone, the first image is very often the LCP element. If it is visible without scrolling on a typical phone screen, load it eagerly.
Does lazy loading help SEO?
Google can index lazy-loaded images that use native loading="lazy". The SEO benefit is indirect: a faster page with good Core Web Vitals. Lazy loading the hero image hurts LCP, so done badly it works against you.
Can I lazy load background images?
Not with the loading attribute, which only applies to <img> and <iframe>. You need JavaScript, such as an Intersection Observer that adds a class when the element approaches the viewport. For hero backgrounds, preload them instead.
Should I lazy load iframes like YouTube and Google Maps?
Yes, if they are below the fold. Add loading="lazy" to the <iframe>. For videos, a facade (a thumbnail that loads the player on click) saves even more, because the player's JavaScript does not load until someone wants it.
How many images should I load eagerly?
Whatever is visible in the first screen on a typical device, which is often one to three images. Logos and small icons above the fold should also load eagerly. Everything further down can be lazy.
What to do next
Check your three most important pages: confirm the hero image has no loading="lazy", add fetchpriority="high" to it, and make sure every image has dimensions. Then re-test LCP. For the wider picture, read our guide to improving Largest Contentful Paint or run a free website audit with MakeItFlow.
Related reading
- What Is a Good Page Load Time in 2026? Targets That Matter: A good page load time in 2026 means main content visible within 2.5 seconds on mobile. See the exact targets for LCP, TTFB, FCP and INP and how to hit them.
Sources
More guides for your industry
Free checklist (PDF)
Free hotels & b&bs website checklist
28 practical checks for hotels & b&bs: website speed and mobile, Google Business Profile and reviews, email security, booking and enquiry handling, and AI search visibility. Each one says why it matters, and many link to a free tool that checks it.
Written by the MakeItFlow team
We build the website audit these guides are based on. Every fact is checked against the primary sources listed above and this guide was last reviewed on 30 October 2026 . How we research and check
Check your own site in 30 seconds
Run a free audit covering speed, SEO, DNS, email authentication and security headers — and get a prioritised fix list.
