Lazy loading

Lazy loading defers work until needed: images below the fold, non-critical routes, heavy components, or off-screen media. The goal is faster critical path—not deferring everything.

					<img src="thumb.jpg" loading="lazy" width="400" height="300" alt="…" />
				

| Asset | Guidance | |-------|----------| | Hero/LCP image | Eager load; `fetchpriority="high"`; never lazy | | Below-fold images | `loading="lazy"` with explicit dimensions | | Routes | `React.lazy` / dynamic import for admin or settings | | Third-party | Load after consent or interaction |

Pair lazy loading with **placeholders** and reserved dimensions to avoid CLS. For React, combine `lazy()` with meaningful Suspense fallbacks that match layout skeletons.

On interviews: native image lazy vs Intersection Observer; lazy hydration patterns; when deferral hurts INP because users interact before chunk arrives.

Common pitfalls: lazy-loading LCP candidate; skeletons that collapse and shift layout; infinite scroll without virtualization.

The trade-off is deferred bytes versus interaction delay when users scroll or click quickly.

Checklist:

• Never lazy-load LCP element.
• Reserve width/height for deferred media.
• Defer third-party until needed.
• Measure impact on INP and LCP together.