Below-fold images use lazy loading

images_lazy_loading

Checks if below-fold images use native lazy loading.

What does this rule check?

The loading="lazy" attribute tells the browser to defer loading images that are below the viewport fold until the user scrolls near them. This reduces initial page load time and bandwidth usage.

Why is this important?

Loading all images upfront wastes bandwidth and slows initial page load. Lazy loading above-the-fold images hurts LCP. The key is to only lazy-load images below the fold.

How to fix

Add loading="lazy" to images that are not visible in the initial viewport. Do NOT lazy-load hero images or above-the-fold content.

Examples

<!-- All images load immediately, even ones below the fold -->
<img src="hero.jpg" alt="Hero" />
<img src="product1.jpg" alt="Product 1" />
<img src="product2.jpg" alt="Product 2" />

<img src="hero.jpg" alt="Hero" />
<!-- Hero loads immediately -->

<img src="product1.jpg" alt="Product 1" loading="lazy" />
<img src="product2.jpg" alt="Product 2" loading="lazy" />
<!-- Below-fold images lazy loaded -->

Agent fix snippet

Copy this snippet and paste it into your AI coding agent to fix this issue automatically.

Add loading="lazy" to below-fold images:

<img src="image.jpg" alt="description" loading="lazy" />

Do NOT add lazy loading to hero images or above-the-fold LCP candidates.