Lazy loading
Deferring the loading of off-screen content until it's needed.
What is Lazy loading?
Lazy loading is a technique that defers loading of non-critical resources until they're needed. For images and iframes, this means waiting until they're about to scroll into view. For JavaScript, it means code-splitting and loading modules on demand.
Native lazy loading is supported via the loading='lazy' attribute for images and iframes. More complex lazy loading can be implemented with Intersection Observer API.
Why Lazy loading matters
Lazy loading reduces initial page weight and speeds up perceived load time. Users don't need to download images they'll never scroll to. It saves bandwidth and improves performance, especially on image-heavy pages.
How to implement
Add loading='lazy' to below-fold images
Don't lazy load above-fold/LCP images
Use native lazy loading for browser support
Consider JS-based solution for more control
Set proper image dimensions to prevent CLS
Preload critical images instead
Code example
<!-- Native lazy loading for images -->
<img
src="below-fold-image.jpg"
alt="Description"
loading="lazy"
width="800"
height="600"
>
<!-- LCP image - don't lazy load, preload instead -->
<link rel="preload" as="image" href="hero.jpg">
<img src="hero.jpg" alt="Hero" fetchpriority="high">Common mistakes to avoid
- Lazy loading above-fold images
- Lazy loading the LCP element
- No width/height causing layout shift
- Lazy loading all images regardless of position
Examples
Native: loading='lazy' on img tag
Intersection Observer for precise control
React: Dynamic imports for code splitting
Frequently asked questions
No, never lazy load above-fold images, especially the LCP element. Only lazy load images below the initial viewport that users may not scroll to.
Search engines can see lazy-loaded images as long as they load without user interaction. Native lazy loading is fully supported by Googlebot.