Lazy Loading & Core Web Vitals: What You Need to Know

Lazy loading is one of the most effective — and most commonly misimplemented — image optimizations available. Done right, it can dramatically reduce initial page weight and improve your Core Web Vitals. Done wrong, it can actively hurt your LCP score and slow down your most important content.

What Is Lazy Loading?

By default, browsers load all images on a page as soon as it starts rendering — even images that are far below the fold that the user may never scroll to. Lazy loading defers the loading of off-screen images until the user scrolls near them.

In HTML, enabling lazy loading is a single attribute:

<img src="photo.webp" alt="Photo" loading="lazy">

That's it. The browser handles everything else natively. No JavaScript required for basic lazy loading.

How Lazy Loading Improves Core Web Vitals

Lazy loading helps primarily with two aspects of page performance:

Reduces initial page weight: If a page has 20 images and 15 are below the fold, lazy loading means the browser only downloads 5 images on initial load. This frees up bandwidth for the images that actually matter.
Improves LCP indirectly: By reducing the total bytes downloaded initially, the browser can focus its network resources on above-the-fold content — including the LCP element — which loads faster.

On pages with many images, lazy loading can reduce initial page weight by 40–60%, directly improving Time to Interactive and perceived load speed.

The Critical Mistake: Lazy Loading Your LCP Image

This is the single most common lazy loading mistake, and it actively hurts SEO. If you add loading="lazy" to your hero image — the first large image the user sees — you're telling the browser to delay loading your most important content.

The result: your LCP metric gets worse, not better.

The rule is simple:

Above-the-fold images: Never use loading="lazy". Use loading="eager" (default) or omit the attribute.
Hero/banner images: Add fetchpriority="high" to tell the browser to prioritize this image.
Below-the-fold images: Always use loading="lazy".

priority vs fetchpriority — What's the Difference?

For your LCP image, you want to do two things:

<!-- Hero / LCP image: eager + high priority -->
<img
  src="hero.webp"
  alt="Hero image"
  width="1200"
  height="630"
  loading="eager"
  fetchpriority="high"
>

<!-- Below-fold images: lazy -->
<img
  src="product.webp"
  alt="Product photo"
  width="400"
  height="400"
  loading="lazy"
>

fetchpriority="high" tells the browser's preload scanner to fetch this resource as a high-priority network request, even before the full HTML is parsed.

Lazy Loading and Layout Shift (CLS)

One subtle but important interaction: lazy loading without explicit image dimensions can cause Cumulative Layout Shift. When a lazy-loaded image loads, if the browser doesn't know the image dimensions in advance, it will push content down to make room — causing a layout shift.

Always specify width and height attributes on your images:

<img src="photo.webp" alt="Photo" width="800" height="600" loading="lazy">

This lets the browser reserve the correct amount of space before the image loads, eliminating layout shift.

How Image Inspector Helps

Image Inspector checks every image on a page for the loading attribute and whether it's below the fold. It flags:

Warning: Below-fold image missing loading="lazy"
Warning: Image with no srcset that could benefit from responsive loading

This gives you an immediate list of images where adding loading="lazy" would improve performance — without having to manually audit each one.

Lazy Loading Checklist

Add loading="lazy" to every image below the fold
Never add loading="lazy" to hero/banner/LCP images
Add fetchpriority="high" to your LCP image
Always specify width and height to prevent layout shift
Use Image Inspector to identify which images are missing lazy loading