Someone read a blog post about web performance, discovered loading="lazy", and added it to every <img> tag on the site. Page speed improved on test pages with many below-the-fold images. Then the Core Web Vitals report came in, and LCP (Largest Contentful Paint) got worse. What happened?
The hero image at the top of every page is almost always the LCP element. When you add loading="lazy" to it, you're telling the browser to defer loading the most important visual element on the page until the user scrolls near it. But the user is already looking at it. The browser waits, the hero area shows a blank space or a low-quality placeholder, and the LCP timer ticks until the image finally loads.
What lazy loading actually does
Native lazy loading via loading="lazy" tells the browser to defer fetching an image until it's within a certain distance of the viewport. The exact distance varies by browser (Chrome uses about 1250px on fast connections, more on slow ones). The image isn't requested at all until the user scrolls close enough.
For images far below the fold, this is a genuine performance win. A page with 20 product images below the fold doesn't need to fetch all 20 on initial load. Deferring those requests reduces initial page weight, speeds up first paint, and saves bandwidth for users who never scroll that far.
But "lazy load everything" is the wrong strategy for three reasons:
1. It delays LCP. If the largest image on the page is lazy-loaded, the browser won't start fetching it until JavaScript runs and determines the image is in or near the viewport. This adds hundreds of milliseconds to LCP compared to an eager-loaded image with fetchpriority="high".
2. It creates layout shifts. A lazy-loaded image without explicit width and height attributes takes up zero space until it loads. When it loads, the layout shifts. If the image is near the viewport during initial scroll, the user sees the jump.
3. It can hurt perceived performance. Images that pop in as the user scrolls feel slower than images that are already loaded when the user arrives at them. Preloading slightly ahead of the viewport helps, but the default browser heuristic doesn't always get the distance right.
The audit breakdown
A lazy load audit examines every image and iframe on the page and classifies each one:
- Above the fold / LCP candidate: Should NOT be lazy-loaded. Should have
loading="eager"(or no loading attribute, since eager is the default) and ideallyfetchpriority="high". - Near the fold (within ~1-2 screens below): Lazy loading is optional. The browser's default distance threshold usually handles these well.
- Well below the fold: Should be lazy-loaded. These are the images where
loading="lazy"provides the most benefit. - Iframes (YouTube, maps, embeds): Almost always candidates for lazy loading. Iframes are expensive because they load entire documents, and below-the-fold iframes should nearly always be deferred.
The Image LCP Candidate Audit identifies which image is actually the LCP element and checks whether it has the right loading strategy. Pairing it with a lazy load audit gives you the full picture: which images to defer, which to prioritize, and which are currently misconfigured.
The fetchpriority complement
fetchpriority is a newer attribute that tells the browser how important a resource is relative to others of the same type. For the LCP image, fetchpriority="high" signals the browser to fetch it before other images, even during the busy initial load phase.
<img src="hero.webp" width="1200" height="630"
fetchpriority="high" alt="...">
For below-the-fold images with loading="lazy", fetchpriority is irrelevant because the image isn't fetched at all until the user scrolls near it. The two attributes work on different axes: loading controls when the fetch starts, fetchpriority controls how urgently it's scheduled relative to other same-time fetches.
CMS and framework defaults
WordPress added loading="lazy" to all images by default in version 5.5 (August 2020). After CWV data showed this was hurting LCP, WordPress 5.9 (January 2022) added logic to skip lazy loading on the first image in post content. But this heuristic doesn't always identify the actual LCP image, especially on pages where the hero image is in the theme template rather than the post body.
Next.js's Image component defaults to lazy loading and requires priority prop for above-the-fold images. Nuxt's image module is similar. The pattern is consistent across frameworks: the default favors bandwidth saving over LCP, and the developer must manually mark the critical image.
If you're building lean sites without a framework, the decision is simpler but still requires deliberate choices per image. I wrote about this kind of intentional page construction in The $97 Launch. Every element on a page either helps the user's immediate task or gets in the way of it. Images above the fold help. Delayed images above the fold get in the way.
Related reading
- Image LCP Candidate Audit identifies the LCP element and checks its loading strategy
- CWV Audit runs a full Core Web Vitals assessment including CLS from lazy-loaded images
- Blog: Image Dimension Attributes covers the width/height requirements that prevent CLS on lazy images
- Render Block Audit catches CSS and JS that delay the initial paint lazy loading depends on
- Blog: Resource Hint Priority explains preload, preconnect, and fetchpriority
Fact-check notes and sources
- Chrome's lazy loading distance threshold is approximately 1250px on fast connections. Source: Chromium source code,
LazyImageHelper.cpp, and web.dev documentation. - WordPress 5.5 (August 2020) added
loading="lazy"to all images. WordPress 5.9 (January 2022) added the "skip first content image" heuristic. Source: WordPress Core Trac tickets #44427 and #53675. fetchpriorityattribute shipped in Chrome 101 (May 2022). Source: web.dev "Optimizing resource loading with the Fetch Priority API."- LCP (Largest Contentful Paint) measures the render time of the largest image or text block visible in the viewport. Source: web.dev/lcp/.
This post is informational, not web development consulting advice.
