Lazy loading is a technique that defers the loading of non-critical resources (primarily images and iframes) until they are about to enter the viewport (the visible part of the page). This means images below the fold are not downloaded until the user scrolls down to them.
Benefits
- Faster initial page load — The browser only downloads what's immediately visible.
- Reduced bandwidth — Users who don't scroll to the bottom don't download those images.
- Better Core Web Vitals — Improves Largest Contentful Paint (LCP) and reduces page weight.
Native Browser Lazy Loading
Modern browsers support native lazy loading with a simple HTML attribute:
<img src="photo.jpg" loading="lazy" alt="Description" />
<iframe src="video.html" loading="lazy"></iframe>WordPress has added native lazy loading to images automatically since version 5.5.
Important: Don't Lazy Load Above-the-Fold Images
Your hero image, logo, and other images visible without scrolling should not be lazy loaded. They should use loading="eager" (the default) or fetchpriority="high" to load as fast as possible.
What InspectWP Checks
InspectWP analyzes the images on your page, including whether the loading="lazy" attribute is present. This helps you verify that lazy loading is properly implemented.