Lazy Loading
The loading="lazy" attribute can allow images and iframes to be deferred until they are near the viewport. This can reduce initial network and rendering work, particularly on pages with many below-the-fold resources.
Lazy Image
<img src="large-photo.jpg" loading="lazy" width="1200" height="800" alt="Mountain view">💡 The browser may delay loading the image until it approaches the viewport.
Key Takeaways
- Lazy loading can reduce unnecessary initial resource loading.
- Do not lazy-load critical above-the-fold images indiscriminately.
Knowledge Check
Which attribute requests lazy loading for an image?