Fix the Largest Contentful Paint image was lazily loaded in Lighthouse

Largest Contentful Paint image was lazily loaded: in short

"Lazy-loading the Largest Contentful Paint image will trigger a Lighthouse warning." Lazy loaded images get queued for downloading much later than eager images, delaying the LCP metric. 

Last reviewed by Arjen Karel on February 2026

"Browsers are smart enough to figure this out right? Yes, browsers are pretty smart, but not in this case!"

"When you lazy load an image element you explicitly tell the browser to de-prioritize this image."

This means non-lazy images get scheduled earlier. When the lazy image is your LCP element, you will probably delay your LCP, potentially by a significant amount! JavaScript-based lazy loading libraries like lazysizes.js compound this by requiring JS download and execution before lazy loading begins.

According to the 2025 Web Almanac, 10.4% of mobile pages still native-lazy-load their LCP image and another 5.9% use JavaScript-based lazy loading. That is roughly 1 in 6 pages actively delaying their most important content.

Fix the Lighthouse warning by removing the loading="lazy" attribute from your LCP image or updating plugin filters to bypass lazy loading for the LCP image.

What is the 'Largest Contentful Paint image was lazily loaded' warning?

This warning appears when the Largest Contentful Paint image is lazy-loaded. For page speed purposes, "you should load this element as early as possible. Lazy loading this element might delay the Largest Contentful Paint."

A quick reminder: lazy loading

"Lazy loading is when an element, often an image, is not scheduled for download by the browser immediately during page load but rather when the element is close to the visible part of the screen." Two methods exist.

Native lazy loading

"Native lazy loading uses the browser's native lazy loading API. For images it is as simple as adding loading="lazy" to the image tag." This is supported by all modern browsers.

<img loading="lazy"
     src="image.png"
     width="123"
     height="123"
     alt="a lazy loaded image"
>

JavaScript based lazy loading

"JavaScript based lazy loading uses a JavaScript API called the Intersection Observer to determine when an image is in or close to the visible viewport." When detected, the src is swapped. Recognize it by the data-src attribute. While supported broadly, "it uses JavaScript", requiring download before lazy loading begins, making it slower than native approaches.

<img data-src="image.png"
     src="small-placeholder.png"
     width="123"
     height="123"
     alt="a lazy loaded image"
>

How does a 'lazy loading Largest Contentful Paint image' affect page speed?

"The Largest Contentful Paint element is the largest element that has been painted on the screen, in the visible viewport, during page load." It marks when the page appears visually ready. Lazy loading this element delays that perception, making visitors perceive slower loading.

The most important image should load immediately for fastest painting. However, explicit lazy loading de-prioritizes it, queuing other resources earlier. With JavaScript lazy loading, you add further delays awaiting script execution.

When you add loading="lazy" to an image, the browser's preload scanner skips it entirely. Normally the preload scanner discovers images while still parsing the HTML and starts fetching them early. Lazy loading opts out of this early discovery, which is exactly why it increases the LCP resource load delay.

In a Chrome network tab example with one lazy LCP image and six eager images, the lazy image starts and finishes downloading last, demonstrating real-world impact.

A bit more detail

Browsers cannot automatically override lazy-loading directives. Technical reasons for LCP delays include:

• "Lazy images will get queued for downloading at a much later time than non-lazy (eager) images."
• Lazy images typically download with low priority.
• "Other elements like normal images, deferred scripts, fonts etc. might be scheduled for download earlier than lazy images."
• JavaScript lazy loading depends on script download and execution overhead.

How to fix 'Largest Contentful Paint image was lazily loaded'

"Fixing the warning is simple: do not lazy load this image."

In theory

• For native lazy loading, remove loading="lazy" or change to loading="eager"
• For JavaScript lazy loading, switch to native approaches or exclude the LCP image.
• For Next.js next/image, set priority to load the image eagerly with a preload hint.

If your LCP element is a hero image, see the complete guide on how to fix slow hero images for additional optimization techniques including preloading, fetchpriority, and responsive images.

In real life

Optimization plugins often lazy-load all images automatically without distinguishing importance. Most allow bypassing lazy loading via filename, class, or attributes. Check your plugin documentation and update your templates accordingly.

WordPress 6.3 and later no longer lazy-load the first few images and automatically add fetchpriority="high" to the likely LCP image. If you are still seeing this warning on a WordPress site, a third-party optimization plugin is likely overriding this behavior. According to the 2022 Web Almanac's Performance chapter, 72% of pages with a lazily loaded LCP image are WordPress sites.

Workaround for 'Largest Contentful Paint image was lazily loaded'

When CMS restrictions prevent changing lazy loading settings, workarounds minimize impact:

• Lazy load all images so below-the-fold eager images don't download first
• Avoid background images to prevent competing downloads
• Preload the LCP element to schedule early download
• Disable JavaScript lazy loading and use native instead
• Add fetchpriority="high" to the LCP element for early scheduling. For details on how browsers prioritize resources, see the guide to resource prioritization.
• Optimize all images using responsive techniques and next-gen formats to reduce download time.

After removing lazy loading from your LCP image, verify the improvement with Real User Monitoring. The Lighthouse warning is lab-based, but Google uses real user field data for ranking signals. Across sites tracked by CoreDash, pages without lazy-loaded LCP images score 79% 'good' on LCP compared to 52% for pages that still lazy-load their LCP element.