loading
The loading attribute defers loading of offscreen images and iframes until they near the viewport.
Syntax
loading="lazy"Examples
<img src="/photo.jpg" alt="Scenery" loading="lazy">
<iframe src="/map" loading="lazy" title="Map"></iframe>
Output
The image and iframe load only when the user scrolls close to them, speeding initial page load.
Notes
Values: lazy and eager (default). Do not lazy-load above-the-fold or LCP images; use eager or fetchpriority="high" for those. Always keep width/height to avoid layout shift.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 76 |
| firefox | 75 |
| safari | 15.4 |
| edge | 79 |