Introduction

Lcp Lazy Loading Explained

5 min read
View contents

LCP Image Lazy Loading: The Critical Performance Mistake

Introduction

You’ve added lazy loading to your images to improve performance—but your page actually got slower. What happened?

One of the most common performance mistakes on the web today is applying loading="lazy" to your LCP (Largest Contentful Paint) image. This single error can add hundreds of milliseconds to your most important performance metric and hurt your search rankings.

In this guide, you’ll learn why lazy loading your LCP image is a critical mistake, how to identify which image is your LCP element, and how to fix this issue in minutes.

What is LCP?

Largest Contentful Paint (LCP) measures how long it takes for the largest content element—usually an image or text block—to become visible on screen. Google uses LCP as a Core Web Vital ranking factor.

LCP thresholds:

  • Good: ≤ 2.5 seconds
  • Needs Improvement: 2.5 - 4.0 seconds
  • Poor: > 4.0 seconds

For most pages, the LCP element is a hero image, featured product photo, or large banner. This is the image users are waiting to see.

The Lazy Loading Mistake

How Lazy Loading Works

The loading="lazy" attribute tells browsers to defer loading an image until it’s about to enter the viewport. This is excellent for images below the fold—users don’t waste bandwidth downloading content they might never scroll to see.

<!-- Lazy loading for below-the-fold images -->
<img src="photo.jpg" alt="Description" loading="lazy">

Why It Breaks LCP

Here’s the problem: when you apply loading="lazy" to your LCP image, you’re telling the browser to wait before loading the most important visual element on your page.

What happens:

  1. Browser starts parsing HTML
  2. Browser sees loading="lazy" on the hero image
  3. Browser delays the image request
  4. Browser waits for layout to determine if image is in viewport
  5. Browser finally starts loading the image
  6. LCP is recorded—but now it’s hundreds of milliseconds slower

According to web.dev, this delay can add 500ms or more to your LCP time.

How to Identify Your LCP Image

Using Chrome DevTools

  1. Open Chrome DevTools (F12 or right-click → Inspect)
  2. Go to the Performance tab
  3. Click the reload button
  4. In the timeline, look for “LCP” marker
  5. Click it to see which element was measured

Using Lighthouse

  1. Open Chrome DevTools
  2. Go to the Lighthouse tab
  3. Run a performance audit
  4. Scroll to “Largest Contentful Paint element”
  5. It will show you exactly which element is your LCP

Using PageSpeed Insights

  1. Go to PageSpeed Insights
  2. Enter your URL
  3. Look for “Largest Contentful Paint element” in the diagnostics

The Fix: Remove Lazy Loading from LCP Image

Step 1: Remove loading=“lazy”

If your LCP image has loading="lazy", remove it:

<!-- WRONG: Lazy loading on LCP image -->
<img src="hero.jpg" alt="Hero image" loading="lazy">

<!-- CORRECT: No lazy loading on LCP image -->
<img src="hero.jpg" alt="Hero image">

Go further by telling the browser to prioritize this image:

<!-- BEST: Prioritize the LCP image -->
<img src="hero.jpg" alt="Hero image" fetchpriority="high">

Step 3: Consider Preloading

For maximum performance, preload your LCP image:

<head>
  <link rel="preload" as="image" href="hero.jpg">
</head>

Best Practice: Selective Lazy Loading

Lazy loading is still excellent—just not for above-the-fold content.

DO use loading=“lazy” for:

  • Product images in a grid (below the first few)
  • Blog post thumbnails
  • Gallery images
  • Footer images
  • Any image below the fold

DON’T use loading=“lazy” for:

  • Hero images
  • First visible product image
  • Logo images
  • Any above-the-fold content
  • Your LCP element

Common Mistakes to Avoid

1. Blanket Lazy Loading

Don’t apply lazy loading to all images globally:

<!-- WRONG: All images lazy loaded via CSS/JS -->
<style>
  img { loading: lazy; } /* This doesn't work, but frameworks might do similar */
</style>

Instead, be selective about which images get lazy loading.

2. CMS Auto-Lazy Loading

Many CMS platforms and image optimization plugins automatically add loading="lazy" to all images. Check your:

  • WordPress theme settings
  • Image optimization plugins
  • CDN settings
  • Framework defaults

3. Framework Defaults

Some frameworks lazy load by default. Check your configuration:

  • Next.js Image component
  • Nuxt Image module
  • Angular image directive

How to Check with UXR SEO Analyzer

The UXR SEO Analyzer automatically detects this critical issue:

  1. Install the Chrome extension
  2. Navigate to any page
  3. Open the extension
  4. Look for “LCP Image Lazy Loading” in the Images tab
  5. If flagged, the analyzer will show which image has the problem

The extension identifies when loading="lazy" is applied to your LCP element and recommends removal.

Impact on Core Web Vitals

Fixing this single issue can have dramatic results:

Metric Before Fix After Fix
LCP 3.8s 2.2s
Lighthouse Performance 62 89

Results vary by site, but improvements of 500ms+ are common.

Next Steps

  1. Identify your LCP element using Chrome DevTools or Lighthouse
  2. Check for loading=“lazy” on that specific image
  3. Remove the attribute if present
  4. Add fetchpriority=“high” for additional improvement
  5. Re-test with Lighthouse to measure improvement

Ready to learn more? Read our Lazy Loading Best Practices Guide for advanced strategies.

References

  1. web.dev - Largest Contentful Paint - Google’s official LCP documentation
  2. web.dev - Browser-level lazy loading - When to use lazy loading
  3. Chrome Developers - Lighthouse LCP - Measuring LCP
  4. MDN - Lazy loading - Technical reference

Related articles

In the same category

Introduction

Cls Explained

Cumulative Layout Shift (CLS) is one of Google's Core Web Vitals—a set of metrics that measure real-world user experience on your website

Detailed guide

Cls Optimization Guide

Cumulative Layout Shift (CLS) measures the visual stability of your page

Introduction

Lcp Explained

Largest Contentful Paint (LCP) is one of Google's Core Web Vitals—a set of metrics that measure real-world user experience on your website

Introduction

Lcp Image Lazy Loading Explained

Lazy loading images is widely considered a best practice for web performance

Detailed guide

Lcp Optimization Guide

Largest Contentful Paint (LCP) measures when the largest content element becomes visible to users

Introduction

Ai Crawlability Explained

As AI assistants like ChatGPT, Claude, Gemini, and Perplexity become primary information sources, a new question emerges: Should you allow AI bots to access...