Lazy loading

[LeaVerou]

Load certain resources only when needed.

Code sample

<img src="picture.jpg" loading="lazy" />
<iframe src="picture.jpg" loading="lazy" />

MDN URL:

https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading

Specification URL:

https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes

Any other links?

• Can I Use
• https://web.dev/browser-level-image-lazy-loading/

How stable is this feature?

Stable (Widely supported for several years)

Type of feature

HTML attribute

What focus area does this feature fall into?

Performance

Details

Note: Significantly better browser support for <img loading> than <iframe loading>.