Lazy loading

What this check looks for

This check only applies to pages with at least 9 images — below that, it reports "na" since lazy loading isn't needed. For qualifying pages, it looks for at least one image using loading="lazy". If none do, it warns; if at least one image lazy-loads, it passes. It does not check whether the first (likely above-the-fold) image is correctly left eager — only that lazy loading is used somewhere on an image-heavy page.

Why it matters

Without lazy loading, a browser starts fetching every image on the page immediately, including ones far below the fold the visitor may never scroll to — that competes for bandwidth with the images and scripts that actually matter for the initial render, slowing down Largest Contentful Paint. Native lazy loading defers off-screen images until they're about to enter the viewport, which is a one-attribute fix with no JavaScript required. This is primarily a page-speed optimization rather than a direct AI-visibility signal, but faster pages are indexed and re-crawled more efficiently, and speed remains a ranking factor.

How to fix it

Add loading="lazy" to below-the-fold images, but leave the hero/LCP image eager so it isn't delayed:

<!-- Hero image: keep eager, it's the LCP candidate -->
<img src="/hero.webp" alt="Acme wireless headphones" loading="eager">

<!-- Gallery images further down the page: lazy-load them -->
<img src="/gallery-1.webp" alt="Side view of the headphones" loading="lazy">
<img src="/gallery-2.webp" alt="Case and accessories" loading="lazy">

Most modern browsers support loading="lazy" natively with no polyfill needed.