Missing Lazy Loading

Downloading every episode of a show before watching episode 1? That's your page loading all images at once. Lazy load them instead.

What is this?

Imagine you want to watch episode 1 of a new show, but your streaming service insists on downloading every single episode of every season before you can press play. That is what happens when all your images load at once — the browser downloads every image on the page, including the ones way below the fold that nobody can see yet. Lazy loading tells the browser: "Only load images when the visitor is about to scroll to them."

Why it matters

For your visitors: Without lazy loading, your page makes dozens (sometimes hundreds) of image requests simultaneously on load. This consumes bandwidth, drains battery on mobile, and makes the visible content load slower because it is competing with off-screen images for network resources. Visitors on slower connections feel this most — the stuff they actually want to see takes forever.
For your business: Slower initial page load means higher bounce rates. Every extra second of load time costs you conversions. Unnecessary bandwidth usage also increases your hosting costs if you are paying for CDN traffic. And Google factors page speed into search rankings.
The standard: Images that are not visible in the initial viewport should use loading="lazy". The first visible image (your hero or banner) should NOT be lazy-loaded — it should load immediately. This is called "eager" loading and it is the default.

Lazy loading off-screen images

<!-- Hero image: loads immediately (default) -->
<img src="/hero.webp" alt="Hero" width="1200" height="600" />

<!-- Below-the-fold images: lazy loaded -->
<img src="/feature-1.webp" alt="Feature" width="400" height="300" loading="lazy" />
<img src="/feature-2.webp" alt="Feature" width="400" height="300" loading="lazy" />

Everything loads at once

<img src="/hero.webp" alt="Hero" width="1200" height="600" />
<img src="/feature-1.webp" alt="Feature" width="400" height="300" />
<img src="/feature-2.webp" alt="Feature" width="400" height="300" />
<!-- 47 more images, all loading immediately -->

How to fix it

React / Next.js

The Next.js Image component lazy-loads by default. You only need to opt OUT for above-the-fold images using the priority prop.

import Image from "next/image";

// Hero image: priority means it loads immediately (no lazy loading)
<Image
  src="/hero.webp"
  alt="Hero banner"
  width={1200}
  height={600}
  priority
/>

// Below-the-fold images: lazy loaded by default, nothing extra needed
<Image
  src="/feature-screenshot.webp"
  alt="Feature screenshot"
  width={400}
  height={300}
/>

If you are using regular <img> tags in React:

function ImageGallery({ images }: { images: { src: string; alt: string }[] }) {
  return (
    <div className="grid grid-cols-2 gap-4">
      {images.map((img, i) => (
        <img
          key={img.src}
          src={img.src}
          alt={img.alt}
          width={400}
          height={300}
          loading={i < 2 ? "eager" : "lazy"} // first 2 visible, rest lazy
        />
      ))}
    </div>
  );
}

Plain HTML

Add loading="lazy" to every image that is not visible in the initial viewport. Do NOT add it to your hero image or anything above the fold.

<!-- Above the fold: keep eager (default) -->
<img src="/hero.webp" alt="Hero" width="1200" height="600" />

<!-- Below the fold: add loading="lazy" -->
<img src="/about.webp" alt="About us" width="800" height="500" loading="lazy" />
<img src="/team.webp" alt="Our team" width="800" height="500" loading="lazy" />

<!-- Also works on iframes -->
<iframe src="https://www.youtube.com/embed/xyz" loading="lazy"></iframe>

High impact — performance~2 paws

Loading all images at once is wasteful and rude to your visitors' bandwidth. The cat loads things on its own schedule, and so should your images.

How the cat scores this

The scanner identifies images that appear below the initial viewport and checks whether they have loading="lazy" set. It also checks that above-the-fold images (especially the Largest Contentful Paint element) are NOT lazy-loaded, because that would delay the most important content. The penalty scales with the number of off-screen images missing lazy loading — a page with 3 missing is a minor issue, a page with 30 missing is a serious problem.