Why Lazy Loading Can Delay Largest Contentful Paint (LCP)

In a current episode of Google’s Search Off the Document podcast, Martin Splitt and John Mueller mentioned when lazy loading helps and when it will probably sluggish pages.

Splitt used a real-world instance on builders.google.com for example a typical sample: making each picture lazy by default can delay Largest Contentful Paint (LCP) if it consists of above-the-fold visuals.

Splitt stated:

“The content material administration system that we’re utilizing for builders.google.com … defaults all photographs to lazy loading, which isn’t nice.”

Splitt used the instance to clarify why lazy-loading hero photographs is dangerous: you inform the browser to attend on probably the most seen factor, which may push again LCP and trigger structure shifts if dimensions aren’t set.

Splitt stated:

“In case you are utilizing lazy loading on a picture that’s instantly seen, that’s almost definitely going to have an effect in your largest contentful paint. It’s like nearly assured.”

How Lazy Loading Delays LCP

LCP measures the second the most important textual content or picture within the preliminary viewport is painted.

Usually, the browser’s preload scanner finds that hero picture early and fetches it with excessive precedence so it will probably paint quick.

Whenever you add loading="lazy" to that very same hero, you alter the browser’s scheduling:

The picture is handled as decrease precedence, so different assets begin first.
The browser waits till structure and different work progress earlier than it requests the hero picture.
The hero then competes for bandwidth after scripts, kinds, and different property have already queued.

That delay shifts the paint time of the most important factor later, which will increase your LCP.

On sluggish networks or CPU-limited units, the impact is extra noticeable. If width and peak are lacking, the late picture also can nudge structure and really feel “jarring.”

web optimization Threat With Some Libraries

Browsers now assist a built-in loading attribute for photographs and iframes, which removes the necessity for heavy JavaScript in commonplace situations. WordPress adopted native lazy loading by default, serving to it unfold.

Splitt stated:

“Browsers received a local attribute for photographs and iframes, the loading attribute … which makes the browser care for the lazy loading for you.”

Older or customized lazy-loading libraries can disguise picture URLs in nonstandard attributes. If the true URL by no means lands in src or srcset within the HTML Google renders, photographs might not get picked up for indexing.

Splitt stated:

“We’ve seen a number of lazy loading libraries … that use some kind of data-source attribute reasonably than the supply attribute… If it’s not within the supply attribute, we received’t decide it up if it’s in some customized attribute.”

How To Test Your Pages

Use Search Console’s URL Inspection to assessment the rendered HTML and make sure that above-the-fold photographs and lazy-loaded modules resolve to plain attributes. Keep away from counting on the screenshot.

Splitt suggested:

“If the rendered HTML appears prefer it accommodates all of the picture URLs within the supply attribute of a picture tag … then you can be wonderful.”

Rating Influence

Splitt framed rating results as modest. Core Net Vitals contribute to rating, however he known as it “a tiny minute issue normally.”

What You Ought to Do Subsequent

Maintain hero and different above-the-fold photographs keen with width and peak set.
Use native loading="lazy" for below-the-fold photographs and iframes.
For those who depend on a library for previews, movies, or dynamic sections, be sure that the ultimate markup exposes actual URLs in commonplace attributes, and make sure in rendered HTML.