Native lazy loading
The loading attribute on img and iframe tells the browser when to fetch.
- loading lazy: defer the resource until it nears the viewport.
- loading eager: fetch immediately, the default.
This is built in, so you no longer need an intersection observer or a scroll listener for the common case. The browser decides the trigger distance based on connection speed.
Doing it well
- Apply lazy loading to images below the fold only. The hero image at the top should stay eager so it appears instantly.
- Always set explicit width and height or an aspect ratio. Without dimensions the page reflows as each image arrives, causing layout shift.
- Pair lazy loading with srcset so each deferred image is also the right size.
For the largest above the fold image, consider fetchpriority high to load it sooner, since it often drives the Largest Contentful Paint metric.
Key idea
Use loading lazy for below the fold media, keep the hero eager, and always set dimensions to prevent layout shift as deferred images arrive.