Native Lazy Loading
The loading attribute defers off-screen image and iframe fetching until near the viewport, for free and without JavaScript, with eager behavior for above-the-fold resources.
Definition
loading=lazy on img and iframe tells the browser to defer the resource until it approaches the viewport, using engine-internal distance thresholds that adapt to connection and device. The default is eager, fetching immediately. It replaces intersection-observer-based lazy loaders for standard cases with no scripting cost.
Context and scope
Applied to below-the-fold images, long article media, embedded maps and videos, and any resource whose discovery cost outweighs its deferral risk.
Common misconceptions
- Lazy everything is optimal — the LCP image must stay eager or be preloaded; deferring it destroys the loading metric
- Native lazy loading needs JavaScript — it is an HTML attribute the engine implements with no script
- Browsers fetch lazily marked images on scroll only — engine thresholds prefetch ahead of the viewport, tuned by connection class
Anti-patterns
- Marking the hero image loading=lazy and watching LCP regress on every page
- Keeping custom intersection-observer loaders for plain images that native loading already covers
- Lazy-loading iframes that contain the first above-the-fold interactive content
Related concepts
Related examples
Authoritative source
https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading
What it is
Images below the fold consume bandwidth and compete with critical resources during load. The loading attribute hands the deferral policy to the browser: fetch only when the element is within an engine-chosen margin of the viewport, tuned for connection speed and effective device class.
How it works
Values are eager (default), lazy, and auto (defers to browser heuristics). Dimensions should accompany the attribute so reserved space prevents layout shift. The fetchpriorities interact: a lazy image can still be urgent once near. Browsers expose the distance thresholds differently, but the contract is approaching viewport equals fetch.
When to use it
Default lazy for below-the-fold media and embeds; keep eager with explicit dimensions for the LCP candidate. Native loading removes the observer script, the layout reads, and the failure modes of custom loaders on old browsers.
Pitfalls
Native deferral delays discovery relative to preload scanner awareness, so critical images must stay eager. Print and find-in-page force loads in most engines, but counting on it is fragile. Iframes with scripts inside still execute when fetched, so lazy-loading third-party widgets also defers their side effects.