How To Repair Largest Contentful Paint Points With Subpart Evaluation

This text is a sponsored by DebugBear

The Largest Contentful Paint (LCP) in Core Internet Vitals measures how rapidly a web site hundreds from a customer’s perspective. It appears to be like at how lengthy after opening a web page the biggest content material ingredient turns into seen. In case your web site is loading slowly, that’s unhealthy for person expertise and may also trigger your web site to rank decrease in Google.

When making an attempt to repair LCP points, it’s not all the time clear what to concentrate on. Is the server too sluggish? Are photographs too huge? Is the content material not being displayed? Google has been working to handle that not too long ago by introducing LCP subparts, which inform you the place web page load delays are coming from. They’ve additionally added this knowledge to the Chrome UX Report, permitting you to see what causes delays for actual guests in your web site!

Let’s check out what the LCP subparts are, what they imply on your web site velocity, and how one can measure them.

The 4 LCP Subparts

LCP subparts cut up the Largest Contentful Paint metric into 4 totally different parts:

1. Time to First Byte (TTFB): How rapidly the server responds to the doc request.
2. Useful resource Load Delay: Time spent earlier than the LCP picture begins to obtain.
3. Useful resource Load Time: Time spent downloading the LCP picture.
4. Component Render Delay: Time earlier than the LCP ingredient is displayed.

The useful resource timings solely apply if the biggest web page ingredient is a picture or background picture. For textual content components, the Load Delay and Load Time parts are all the time zero.

How To Measure LCP Subparts

One technique to measure how a lot every part contributes to the LCP rating in your web site is to make use of DebugBear’s web site velocity check. Increase the Largest Contentful Paint metric to see subparts and different particulars associated to your LCP rating.

Right here, we will see that TTFB and picture Load Period collectively account for 78% of the general LCP rating. That tells us that these two parts are probably the most impactful locations to begin optimizing.

What’s taking place throughout every of those phases? A community request waterfall may help us perceive what assets are loading by every stage.

The LCP Picture Discovery view filters the waterfall visualization to simply the assets which might be related to displaying the Largest Contentful Paint picture. On this case, every of the primary three phases accommodates one request, and the ultimate stage finishes rapidly with no new assets loaded. However that is determined by your particular web site and received’t all the time be the case.

Time To First Byte

Step one to show the biggest web page ingredient is fetching the doc HTML. We not too long ago revealed an article about the way to enhance the TTFB metric.

On this instance, we will see that creating the server connection doesn’t take all that lengthy. More often than not is spent ready for the server to generate the web page HTML. So, to enhance the TTFB, we have to velocity up that course of or cache the HTML so we will skip the HTML era fully.

Useful resource Load Delay

The “useful resource” we wish to load is the LCP picture. Ideally, we simply have an <img> tag close to the highest of the HTML, and the browser finds it straight away and begins loading it.

However generally, we get a Load Delay, as is the case right here. As an alternative of loading the picture straight, the web page makes use of lazysize.js, a picture lazy loading library that solely hundreds the LCP picture as soon as it has detected that it’ll seem within the viewport.

A part of the Load Delay is attributable to having to obtain that JavaScript library. However the browser additionally wants to finish the web page format and begin rendering content material earlier than the library will know that the picture is within the viewport. After ending the request, there’s a CPU activity (in orange) that leads as much as the First Contentful Paint milestone, when the web page begins rendering. Solely then does the library set off the LCP picture request.

How can we optimize this? To begin with, as a substitute of utilizing a lazy loading library, you need to use the native loading="lazy" picture attribute. That method, loading photographs now not is determined by first loading JavaScript code.

However extra particularly, the LCP picture shouldn’t be lazily loaded. That method, the browser can begin loading it as quickly because the HTML code is prepared. Based on Google, you must purpose to eradicate useful resource load delay fully.

Assets Load Period

The Load Period subpart might be probably the most easy: it’s essential to obtain the LCP picture earlier than you’ll be able to show it!

On this instance, the picture is loaded from the identical area because the HTML. That’s good as a result of the browser doesn’t have to hook up with a brand new server.

Different methods you need to use to scale back load delay:

• Use a trendy picture format that gives higher compression.
• Load photographs at a dimension that matches the dimensions they’re displayed at.
• Deprioritize different assets that may compete with the LCP picture.

Component Render Delay

The fourth and last LCP part, Render Delay, is usually probably the most complicated. The useful resource has loaded, however for some purpose, the browser isn’t prepared to point out it to the person but!

Fortunately, within the instance we’ve been to this point, the LCP picture seems rapidly after it’s been loaded. One frequent purpose for render delay is that the LCP ingredient is just not a picture. In that case, the render delay is attributable to render-blocking scripts and stylesheets. The textual content can solely seem after these have loaded and the browser has accomplished the rendering course of.

Another excuse you may see render delay is when the web site preloads the LCP picture. Preloading is a good suggestion, because it virtually eliminates any load delay and ensures the picture is loaded early.

Nonetheless, if the picture finishes downloading earlier than the web page is able to render, you’ll see a rise in render delay on the web page. And that’s superb! You’ve improved your web site velocity total, however after optimizing your picture, you’ve uncovered a brand new bottleneck to concentrate on.

LCP Subparts In Actual Person CrUX Information

Trying on the Largest Contentful Paint subparts in lab-based exams can present a variety of perception into the place you’ll be able to optimize. However all too typically, the LCP in the lab doesn’t match what’s taking place for actual customers!

That’s why, in February 2025, Google began together with subpart knowledge within the CrUX knowledge report. It’s not (but?) included in PageSpeed Insights, however you’ll be able to see these metrics in DebugBear’s “Internet Vitals” tab.

One tremendous helpful bit of information right here is the LCP useful resource kind: it tells you what number of guests noticed the LCP ingredient as a textual content ingredient or a picture.

Even for a similar web page, totally different guests will see barely totally different content material. For instance, totally different components are seen primarily based on the gadget dimension, or some guests will see a cookie banner whereas others see the precise web page content material.

To make the information simpler to interpret, Google solely studies subpart knowledge for photographs.

If the LCP ingredient is normally textual content on the web page, then the subparts data received’t be very useful, because it received’t apply to most of your guests.

However breaking down textual content LCP is comparatively simple: the whole lot that’s not a part of the TTFB rating is render-delayed.

Monitor Subparts On Your Web site With Actual Person Monitoring

Lab knowledge doesn’t all the time match what actual customers expertise. CrUX knowledge is superficial, solely reported for high-traffic pages, and takes at the very least 4 weeks to completely replace after a change has been rolled out.

That’s why a real-user monitoring software like DebugBear is useful when fixing your LCP scores. You’ll be able to monitor scores throughout all pages in your web site over time and get devoted dashboards for every LCP subpart.

You too can assessment particular customer experiences, see what the LCP picture was for them, examine a request waterfall, and examine LCP subpart timings. Join a free trial.

Conclusion

Having extra granular metric knowledge accessible for the Largest Contentful Paint offers internet builders a giant leg up when making their web site quicker.

Together with subparts in CrUX offers new perception into how actual guests expertise your web site and might inform if the optimizations you’re contemplating would actually be impactful.