Lazy loading implementationWhat it checks and how to fix it

What it checks

Counts the images and iframes on the page (ignoring those in the header, nav and footer) and how many load lazily with loading="lazy" or a data-src style JavaScript loader. It passes when there is nothing to lazy load, or when native lazy loading is used and covers at least half of the media; partial coverage, or JavaScript-only lazy loading, is a warning, and so is none at all.

Why it matters

Without lazy loading the browser downloads every image and embed on the page up front, including ones the visitor never scrolls to. That competes with the content above the fold for bandwidth, slows Largest Contentful Paint, and wastes mobile data. Native lazy loading is a single attribute supported by every modern browser.

How to fix it

Add loading="lazy" to images and iframes below the fold, and always give images their dimensions.

<img src="/gallery/1.webp" alt="Office at night" width="800" height="600" loading="lazy">
<iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID" title="Product demo" loading="lazy"></iframe>

Do not lazy load the hero image or anything visible on first paint; mark it as a priority instead:

<img src="/hero.webp" alt="Dashboard" width="1200" height="630" fetchpriority="high">

In Rails, image_tag "photo.jpg", loading: "lazy" adds the attribute; config.action_view.image_loading = "lazy" makes it the default for every image_tag.