Lazy Loading Mistakes That Hurt LCP

Someone added loading="lazy" to every <img> in the template — including the hero. Lighthouse LCP regressed 1.2 seconds. The fix was deleting one attribute from one tag.

Lazy loading is default good below the fold and default bad on whatever paints largest first.

How native lazy load works

loading="lazy" tells browser defer fetch until image approaches viewport (implementation-defined margin). Saves bandwidth for scroll-never images.

Side effect: LCP image inside lazy threshold starts late → worse LCP score → SEO/UX hit.

Mistake 1: Lazy hero / featured image

Wrong:

<img src="hero.webp" loading="lazy" alt="..." class="hero">

Right:

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

Hero Image Weight Budget — size matters too.

Mistake 2: Blanket CMS lazy plugin

WordPress/plugins add lazy to all content images — first image in post is often LCP. Exclude first content image or featured thumbnail.

Mistake 3: Lazy background heroes

CSS background-image on hero div — no native lazy attribute. JS lazy backgrounds delay LCP worse. Prefer <img> with object-fit or prioritize background in critical CSS.

Mistake 4: Lazy + low quality placeholder swap

LQIP/blur-up techniques can shift LCP timing if final image loads late. Ensure high-res LCP src in initial HTML, not injected after consent/analytics.

Mistake 5: Carousel first slide lazy

Slider libraries lazy-load slide 1 — catastrophic. First visible slide eager.

Mistake 6: Incorrect sizes/srcset

Oversized srcset entry selected + lazy = double delay. Fix Resize Images for Web and sizes attribute accuracy.

What to lazy load

✓ Blog comments avatars
✓ Footer badges
✓ Related posts thumbnails below fold
✓ Gallery images after row 1
✓ Embed placeholders click-to-load

fetchpriority hint

<img fetchpriority="high" ...>  <img loading="lazy" fetchpriority="low" ...>  ```

Browser support broad in Chromium; graceful ignore elsewhere.

## Picture element

First `<source>` matching LCP must not be behind lazy parent incorrectly — test actual network waterfall.

## Framework pitfalls

- Next.js `Image` — `priority` prop on LCP image
- React lazy components wrapping hero
- Intersection Observer custom lazy on viewport top

## Measure fix impact

Before/after Lighthouse LCP on mobile throttling. Field data CrUX lags 28 days — lab test immediate feedback.

[Image Compression for Web](/blog/image-compression-for-web) complements lazy strategy.

## Troubleshooting

**Does lazy loading hurt LCP?** Yes, when applied to above-the-fold images especially the LCP element. Lazy loading defers loading until near viewport — delaying what Lighthouse measures as largest paint. Below-fold lazy loading helps; LCP image must load immediately.

**Should I lazy load all images by default?** No. Use lazy loading for below-fold content. Exclude hero, featured image, and any image in initial viewport. Native loading=lazy on first image is a common mistake.

**What is loading eager vs lazy?** loading=eager loads immediately (default for images). loading=lazy defers until scroll proximity. Use eager for LCP candidates; lazy for rest.

## Limitations

## When not to use this approach

## Conclusion

**Lazy everything except LCP.** One hero image with `loading="lazy"` can cost a second of LCP.

Audit first screen images — set eager + fetchpriority high on winner; lazy the rest. Deleting one attribute fixes more than tweaking CDN headers.

## Native lazy load distance

Browser preloads lazy images within implementation-defined viewport margin — Chrome loads slightly before visible. Still insufficient for LCP element — must be eager.

## Intersection Observer custom lazy

Libraries using 200px rootMargin mimic early fetch — tune rootMargin but never apply to above-fold selector in generic lazy script.

## WordPress native lazy

WP 5.5+ adds loading=lazy to content images — filter `wp_img_tag` to exclude first image or featured image from lazy attribute via theme functions.php snippet documented in theme README.