Lazy Loading Images
debt(d5/e1/b3/t7)
Closest to 'specialist tool catches it' (d5), because the detection_hints list Lighthouse and PageSpeed Insights — both specialist auditing tools that flag eager-loaded below-fold images and missing fetchpriority on LCP images. This is not caught by a compiler or default linter, but is reliably surfaced by these performance auditing tools.
Closest to 'one-line patch or single-call swap' (e1), because the quick_fix is literally adding a single HTML attribute (loading='lazy') to img elements below the fold, and adding fetchpriority='high' to the hero image — both are attribute-level, zero-JavaScript changes.
Closest to 'localised tax' (b3), because lazy loading decisions apply per-image or per-page-template within the web context. The choice is scoped to frontend image markup; it does not impose a cross-cutting architectural cost on the rest of the codebase, though developers must remember to apply the pattern consistently across image-heavy pages.
Closest to 'serious trap' (t7), because the canonical misconception is that lazy-loading ALL images improves performance — the opposite is true for above-the-fold/LCP images, where loading=lazy actively harms Core Web Vitals. This directly contradicts the intuitive reading of 'lazy loading = good performance everywhere,' and the mistake penalises a visible, user-facing metric (LCP) in a way that contradicts how the attribute behaves on below-fold images.
Also Known As
TL;DR
Explanation
Native lazy loading (loading="lazy" on img and iframe) defers fetching until the resource is near the viewport — supported in all modern browsers since 2020. Combined with Intersection Observer for custom thresholds, lazy loading can reduce initial page weight by 50-80% on image-heavy pages. Key attributes: loading="lazy" (native), decoding="async" (non-blocking decode), fetchpriority="high" for LCP images, and width/height to prevent layout shift. Never lazy-load above-the-fold images — they should load immediately.
Common Misconception
Why It Matters
Common Mistakes
- loading=lazy on hero images — the LCP image must load immediately; never lazy-load it.
- No width and height attributes — browser cannot reserve space, causing layout shift (CLS).
- Lazy loading images in CSS background — loading=lazy only works on img elements.
- Using a JavaScript lazy loader when loading=lazy has full browser support.
Code Examples
<!-- All images load immediately — wastes bandwidth:
<img src="hero.jpg" loading="lazy"> <!-- Never lazy-load LCP! -->
<!-- Page with 50 product images — all fetch on load:
<img src="product-1.jpg" alt="Product 1">
<img src="product-2.jpg" alt="Product 2">
<!-- ... 48 more --><!-- LCP image: eager + high priority:
<img src="hero.jpg" alt="Hero" loading="eager" fetchpriority="high"
width="1200" height="600">
<!-- Below-fold images: lazy + dimensions for CLS prevention:
<img src="product-1.jpg" alt="Product 1" loading="lazy"
decoding="async" width="300" height="300">
<img src="product-2.jpg" alt="Product 2" loading="lazy"
decoding="async" width="300" height="300">
<!-- Browser fetches only images near viewport -->