foundation

Lazy loading

Defer below-the-fold images, routes, modules, and data while protecting LCP and avoiding layout shifts.

Lazy loading defers work until it is likely to be needed. Images, components, routes, data, and third-party scripts can all be delayed, but the LCP candidate and essential interaction code should not be delayed accidentally. Good implementations reserve space and provide deterministic loading states.

					<img src="hero.jpg" fetchpriority="high" width="1200" height="630" alt="...">
<img src="thumb.jpg" loading="lazy" width="320" height="180" alt="...">

Route-level dynamic import and IntersectionObserver extend the same idea to JavaScript and data. Always handle error and skeleton states.

On interviews: native image loading, IntersectionObserver, route splitting, skeletons, and when eager loading is better.

Common pitfalls: lazy-loading the hero image hurts LCP. Loading content without dimensions can create CLS.

The trade-off is convenience versus control — pick the mechanism that matches your coupling and performance budget.

Checklist:

Never delay the LCP element.
Reserve width and height.
Use thresholds and rootMargin wisely.
Show loading and error UI.