What Lazy Loading Does
Lazy loading delays the loading of resources until they are needed - typically when they enter the viewport. Instead of loading all images when the page first loads, lazy loading loads only the images the user can see, then loads the rest as they scroll down.
This dramatically improves initial page load time because the browser does not have to download and render content that is off-screen. For pages with many images, lazy loading can reduce initial load time by 3-5 seconds.
Native Lazy Loading
Modern browsers support native lazy loading through the loading attribute on img and iframe tags. This is the simplest approach:
<img src="image.webp" loading="lazy" alt="Description" width="800" height="600">
The loading="lazy" attribute tells the browser to defer loading until the image approaches the viewport.
WordPress Native Lazy Loading
WordPress 5.5+ automatically adds loading="lazy" to all images. No configuration needed. For iframes, you may need to add the attribute manually or use a plugin.
Lazy Loading Images
For a standard implementation:
- Add loading="lazy" to all below-the-fold images
- Keep above-the-fold images with loading="eager" for fast initial render
- Always specify width and height attributes to prevent layout shift
- Use placeholder images or CSS background colors for the space where lazy images will load
Lazy Loading Videos
YouTube and Vimeo embeds are heavy - typically 500KB-2MB of JavaScript and CSS. Lazy load them by loading a lightweight thumbnail instead of the full embed, then replacing it with the iframe when the user clicks play.
Common Lazy Loading Mistakes
- Lazy loading above-the-fold images: Hero images should load immediately, not be deferred.
- Missing width and height: Without dimensions, the browser cannot reserve space, causing layout shifts.
- Lazy loading everything: Small icons do not benefit from lazy loading.
- Not testing scroll behavior: Lazy loaded images should appear seamlessly as users scroll.
Measuring the Impact
Pages with many images typically see 30-50% reduction in initial page weight and 1-3 second improvement in initial load time after implementing lazy loading.