Google Explains Why Lazy Loading Can Delay Largest Contentful Paint (LCP)

Google’s Martin Splitt has explained why using lazy loading for images that appear right at the top of a webpage (like hero images or banners) can make your site feel slower. The problem? The biggest visible image the one users see first loads late, and that directly hurts your Largest Contentful Paint (LCP) score.

What is LCP in Simple Terms?

Think of LCP as the stopwatch Google uses to measure how quickly the “main thing” on your page shows up.

• If you land on Amazon, the product image is usually the LCP.
• On a news site, the headline photo is often the LCP.

The faster this image or text appears, the faster your site “feels” to users.

Why Lazy Loading Delays the Hero Image

Normally, browsers give top priority to big images on the screen and download them right away. But when you use loading="lazy", you’re telling the browser: “Relax, load this later.”

As Martin Splitt puts it:

“If you are using lazy loading on an image that is immediately visible, that is most likely going to have an impact on your largest contentful paint. It’s like almost guaranteed.”

In real life, this is like a waiter serving drinks to the back tables first while the front table (your hero image) keeps waiting.

When Does This Become a Big Problem?

• On slow internet: That top image waits in line, making the page look half-empty for a few seconds.
• On low-powered phones: The browser spends time loading other things, delaying the big image.
• If you don’t set image sizes, the late image causes the text below to jump around, this is what’s called a layout shift.

Hidden Risk with Some Lazy-Loading Plugins

Some older lazy-loading plugins don’t put the actual image link (src) in the code. Instead, they hide it in something like data-src. If Googlebot doesn’t find the real image URL, that picture may not even get indexed in Google Images.

How to Fix It (Without Killing Lazy Loading Completely)

Lazy loading is useful for long pages with lots of images like an ecommerce catalog. But for hero images or banners, skip lazy loading.

Best practices you can apply right now:

• Don’t lazy-load above-the-fold images. Let them load normally.
• Use fetchpriority="high". This tells browsers: “This one’s important, load it first.”
• Preload key images. Add <link rel="preload" as="image" href="hero.jpg"> in your code.
• Set width and height. This keeps the layout stable even if the image arrives late.
• Audit plugins. Make sure your lazy-loading plugin has an option to exclude the first image.

Roadmap Example: News Website Fix

Step	Before Fix	After Fix
1	Top banner photo lazy-loaded → loads late	Banner photo loads immediately
2	No priority hints → browser loads ads/scripts first	Added fetchpriority="high" → photo loads first
3	No width/height → text jumps when photo appears	Fixed dimensions → no layout jump

Result: LCP drops from 3.2s to 1.8s on mobile. Users see the main story image much faster.

Real-Life Analogy

Imagine going to a theater. The curtain rises, but the spotlight is still off. The audience keeps waiting. That’s lazy-loading your hero image.

Now imagine the curtain rises and the spotlight hits instantly. That’s what happens when you prioritize your LCP image correctly.

Takeaway:

The takeaway from Google is clear: lazy loading everything by default is bad for Core Web Vitals. Use it for images lower down the page, but make sure the top images (the ones that define the first impression of your site) are loaded eagerly and given priority.