Lazy loading is a performance optimisation technique that defers the loading of non-critical resources until they are actually needed — typically when the user scrolls them into the visible viewport. Instead of loading every image on a page upfront, the browser loads above-the-fold content first and defers the rest.
Native HTML Lazy Loading
Modern browsers support lazy loading via the loading attribute:
<img src="photo.jpg" alt="Description" loading="lazy">
<iframe src="map.html" loading="lazy"></iframe>Benefits
- Faster initial load — The browser only fetches images in or near the viewport.
- Reduced data usage — Users who don't scroll never download off-screen images.
- Improved LCP — Resources critical to the largest contentful element load faster.
- Lower bandwidth costs — Origin server serves fewer image requests.
What Not to Lazy Load
- The hero image or any image visible on page load — lazy loading it will hurt LCP.
- Critical CSS or JavaScript needed for rendering above-the-fold content.
SEO Considerations
Googlebot fully supports native loading="lazy". Avoid JavaScript-based lazy loaders that rely on scroll events that Googlebot may not trigger.