How to Detect and Fix Lazy Loading on Your LCP Image

Introduction

You added lazy loading to speed up your pages, and instead your most important metric got worse. This is a common and fixable situation: loading="lazy" ended up on your LCP image, the largest element visible when the page first loads. This guide is the practical, step-by-step path to confirming the problem, finding which image is affected, and correcting it.

If you want the underlying mechanism—why deferring the LCP image delays the metric, the exact thresholds, and the principle behind selective lazy loading—see the companion article Lazy loading and LCP: why deferring your main image slows you down. Here we stay focused on diagnosis and the fix.

---

A Short Note on What LCP Is

Largest Contentful Paint (LCP) measures how long it takes for the largest visible element to render. On most pages that element is an image: a hero banner, a featured product photo, or a large headshot. Google treats an LCP at or under 2.5 seconds as good. When you lazy-load that specific image, the browser waits before requesting it, and the metric slips. That is the entire problem in one sentence; the concept article covers the rest.

---

Symptoms: Do You Actually Have This Problem?

Before changing any markup, check whether the signs match. You likely have lazy loading on your LCP image if:

• You recently enabled a lazy-loading plugin, theme option, or library, and LCP got worse rather than better.
• Lighthouse or PageSpeed Insights reports a slow LCP while other metrics look fine.
• PageSpeed Insights shows a warning like "Largest Contentful Paint image was lazily loaded."
• Your hero or featured image appears to load a beat later than the surrounding text.
• The UXR SEO Analyzer flags an LCP lazy-loading issue (covered below).

If none of these apply, your LCP delay probably has another cause, and the LCP Optimization Guide is the better starting point.

---

Step 1: Identify Which Element Is Your LCP

You cannot fix the right image until you know which one it is. Any of the three tools below will tell you.

Chrome DevTools

1. Open DevTools (F12).
2. Go to the Performance tab.
3. Record a page load (reload while recording).
4. Find the LCP marker in the timeline.
5. Click it to see exactly which element triggered LCP.

Lighthouse

1. Run a Lighthouse audit.
2. In the Performance section, open Largest Contentful Paint element.
3. It names the precise element measured as your LCP.

PageSpeed Insights

1. Enter your URL at PageSpeed Insights.
2. Scroll to Diagnostics.
3. Look for "Largest Contentful Paint element."

Once you have the element, inspect its HTML and check for a loading="lazy" attribute. If it is there, you have confirmed the problem.

---

Step 2: Find the Culprit in Your Stack

The attribute rarely gets there by hand. It is almost always added automatically by a platform, theme, or library that applies lazy loading to every image without distinguishing the one above the fold. Match your setup to the likely source.

Where it comes from	How the bug is introduced	Where to look
CMS auto-lazy (e.g. WordPress)	Adds loading="lazy" to all images by default, hero included	Theme settings and image-optimization plugins
E-commerce themes (e.g. Shopify)	Theme templates lazy-load product and banner images site-wide	The image snippet in your theme templates
JS lazy-load libraries	Apply lazy behavior to every matched image indiscriminately	Library config; add an exclusion for above-the-fold images
Framework component defaults	Image components lazy-load unless told otherwise	Next.js Image, Nuxt Image, Angular image directive settings

The pattern to watch for is blanket lazy loading, where the hero, a mid-page product, and the footer logo all carry the same loading="lazy". The hero is your LCP and should be the exception.

---

Step 3: Apply the Fix

Once you know which image and where it is generated, the correction is small.

Remove loading="lazy" from the LCP image. If the source is a plugin or component default, disable lazy loading for hero and featured images rather than editing generated HTML by hand.

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

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

<!-- BETTER: Signal priority to the browser -->
<img src="hero.jpg" alt="Hero banner" fetchpriority="high">

Add fetchpriority="high". Removing lazy loading stops the delay; this tells the browser the image is critical and should load ahead of other resources, which can recover an additional 100-200ms.

Consider preloading. When the LCP image is referenced late (for example, set through CSS or built by script), a preload hint in the <head> lets the browser discover it sooner:

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

Keep loading="lazy" on genuinely below-the-fold images. The goal is selective lazy loading, not removing it everywhere.

---

Verification Checklist

After the change, confirm it worked rather than assuming it did.

• [ ] The LCP element no longer carries loading="lazy" in the rendered HTML.
• [ ] fetchpriority="high" is present on the LCP image.
• [ ] Below-the-fold images still use loading="lazy".
• [ ] Re-run Lighthouse or PageSpeed Insights and confirm LCP improved.
• [ ] Check every major template, since the fix is per-template: home, product, and blog can each generate the markup differently.
• [ ] Re-run the UXR SEO Analyzer and confirm the flag is gone.

---

How the UXR SEO Analyzer Flags It

The analyzer automates the diagnosis above:

1. Install the Chrome extension.
2. Open the page you want to check.
3. Open the extension and look under the Images tab for LCP Image Lazy Loading.

It identifies the LCP element, checks whether it has the loading="lazy" attribute, and marks it as a critical error when present, recommending removal and fetchpriority="high". It is marked critical because LCP is a Core Web Vitals ranking signal.

---

Related Articles

• Lazy loading and LCP: why deferring your main image slows you down - The concept and mechanism behind this fix
• Lazy Loading Best Practices Guide - Libraries, placeholders, and advanced techniques
• LCP Optimization Guide - Complete Largest Contentful Paint optimization
• Responsive Images Explained - Serving the right size to every device
• Image Optimization Explained - Complete image optimization overview
• Images SEO Hub - All image optimization guides

---

References

1. web.dev - Lazy loading images
2. Chrome Developers - Optimize Largest Contentful Paint
3. web.dev - Largest Contentful Paint (LCP)
4. Google Search Central - Page experience