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.

Quick answer

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.

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

Browser-based workflows for lazy loading mistakes that hurt lcp depend on file size, browser memory, and how the source file was created. Very large files, password-protected inputs, or unusual encodings may fail without a desktop alternative. Always keep an original copy before batch processing.

## When not to use this approach

Skip browser-only processing when compliance requires audit logs, when files exceed practical browser limits, or when you need features your browser tool does not expose (bookmarks, form fields, digital signatures). In those cases, use dedicated desktop software or an approved enterprise pipeline.

## 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.

## Putting this into practice this week

Pick one workflow from this article and run it on a real task today — not a hypothetical. If the guide covers PDF export, export one document you already need for work. If it covers image naming, rename one messy folder. Knowledge retained from doing beats knowledge retained from reading.

## Questions to ask before you delegate

When handing a process to a teammate or virtual assistant, ask: "What would break if you skipped step three?" If they can't answer, the process isn't documented enough. Add the missing step to your internal wiki with a link to this guide and the relevant tool page.

## How this connects to the broader site

Utility-first sites win when guides and tools reinforce each other. Bookmark the tool URL alongside this article. Share the article link when onboarding someone who'll use the tool weekly — context reduces support messages asking the same formatting question twice.

## Common "it worked yesterday" causes

Software updates change export defaults. Browser updates change PDF print behavior. CDN cache serves old image after you uploaded new asset. When workflows break without code changes, check version changelogs before blaming user error. First troubleshooting step: reproduce in clean browser profile with extensions disabled.

## When to escalate to a specialist

Tax, legal, medical, and enterprise security topics in adjacent guides sometimes require professional advice. Articles like this explain operational literacy — not professional services. Escalate when stakes exceed convenience (court filing, audit response, M&A data room, HIPAA-covered PHI).

## Quick reference checklist

Before you close the tab, confirm the basics from this guide:

- You know which tool or export path applies to your exact file type
- You've tested output on the device or platform your audience uses
- Filename, margins, or metadata won't embarrass you in a professional context
- You've linked related guides for the next step in the workflow
- Sensitive data stayed in the processing tier your policy allows (browser vs cloud)

Print or save this checklist for onboarding teammates — utility workflows fail from skipped verification, not missing features.

## Related reading on this site

Browse the blog category cluster this article belongs to for deeper dives. Tool pages linked in-body are the fastest path from reading to doing. If something in the workflow still feels fuzzy, that's a signal to run one real file through the pipeline and note where friction appeared — then re-read the section that matches that step.

## Final reminder

Good document and media hygiene compounds. An extra ninety seconds at export time prevents ninety minutes of rework when a client, professor, printer, or auditor sends the file back. The tools exist to make that ninety seconds painless — use them deliberately rather than hoping defaults match your stakes.