About 10% of LCP images are incorrectly lazy-loaded. This is one of the easiest LCP issues to fix.

What's the Problem?

loading="lazy" tells the browser to delay downloading an image until it's near the viewport. This is great for images below the fold, but terrible for your LCP image which is already visible.

What happens with lazy-loaded LCP:

1. Browser downloads HTML
2. Browser sees loading="lazy", skips the image
3. Browser finishes layout, determines image is in viewport
4. Browser finally starts downloading the image
5. LCP fires late

How to Identify This Issue

Chrome DevTools

1. Elements panel → find your LCP image
2. Check if it has loading="lazy"

Lighthouse

Look for: "Largest Contentful Paint image was lazily loaded"

Quick Check

View your page source and search for your hero image. If it has loading="lazy", that's the problem.

The Fix

1. Remove lazy Loading from LCP Image

<!-- Before: wrong -->
<img src="hero.webp" loading="lazy" alt="Hero">

<!-- After: correct (eager is the default) -->
<img src="hero.webp" alt="Hero">

<!-- Or explicitly eager with high priority -->
<img src="hero.webp" loading="eager" fetchpriority="high" alt="Hero">

2. Add fetchpriority for Extra Priority

<img
  src="hero.webp"
  loading="eager"
  fetchpriority="high"
  alt="Hero"
>

3. Keep Lazy-Loading for Below-Fold Images

Lazy-loading is still valuable—just not for above-the-fold content.

<!-- Hero image: no lazy loading -->
<img src="hero.webp" fetchpriority="high" alt="Hero">

<!-- Below-fold images: lazy load -->
<img src="product1.webp" loading="lazy" alt="Product 1">
<img src="product2.webp" loading="lazy" alt="Product 2">

Framework-Specific Solutions

// Wrong: lazy by default
<Image src="/hero.jpg" alt="Hero" />

// Correct: priority disables lazy loading
<Image src="/hero.jpg" alt="Hero" priority />

<!-- Wrong: lazy by default -->
<NuxtImg src="/hero.jpg" alt="Hero" />

<!-- Correct: eager loading -->
<NuxtImg src="/hero.jpg" alt="Hero" loading="eager" />

// Don't use LazyLoad for LCP
<img src="/hero.jpg" alt="Hero" />

// Use LazyLoad for below-fold
<LazyLoad>
  <img src="/product.jpg" alt="Product" />
</LazyLoad>

Verify the Fix

After implementing:

1. Check Elements panel — no loading="lazy" on LCP image
2. Check Network tab — LCP image should start downloading immediately
3. Run Lighthouse — warning should be gone

Expected improvement: Removing lazy-loading from LCP can improve LCP by 100-500ms depending on image size and connection.

Common Mistakes

• Global lazy-loading — Don't apply loading="lazy" to all images. Exclude above-the-fold images.
• Intersection Observer libraries — Same issue. Exclude LCP images from lazy-loading logic.
• CMS defaults — Some CMS platforms add lazy-loading automatically. Override for hero images.

Related Issues

Often appears alongside:

• Resource Load Delay — Both delay LCP image download
• Large Images — Fix both for best results

Test Your Entire Site

Different page templates may have different lazy-loading behavior. Unlighthouse scans your entire site and identifies pages with lazy-loaded LCP images.

Related

• All LCP Issues
• LCP Overview