Common misconceptions about how to optimize LCP

The Largest Contentful Paint (LCP) of a page tin beryllium analyzable to improve, often involving aggregate moving parts and tradeoffs. This station looks astatine section information from existent page loads crossed nan web to find wherever developers should attraction their optimization efforts.

Classic LCP advice: trim nan size of your images!

For astir pages connected nan web, nan LCP constituent is an image. It's earthy past to presume that nan champion measurement to amended LCP is to optimize your LCP image.

In nan 5 years aliases truthful since LCP was introduced, that has often been nan header advice. Ensure your images are sized appropriately and compressed sufficiently, and possibly usage a 21st-century image format while you're successful there. Lighthouse moreover has three different audits to make these suggestions.

The 3 image-optimization audits successful a Lighthouse report.

Part of nan logic this is specified communal proposal is that excessive bytes are easy to measurement and image compression devices are easy to suggest. Depending connected your build and deployment pipelines, it whitethorn besides beryllium easy to implement.

If so, do it! Sending less bytes to your users is almost ever a win. There are many sites connected nan web that are still serving needlessly ample images that moreover basal compression would fix.

However, erstwhile we started looking astatine section capacity information for users successful Chrome to spot wherever nan clip to LCP is typically being spent, we recovered that image download clip is almost ne'er nan bottleneck.

Instead, different parts of LCP are a overmuch bigger problem.

LCP sub-part breakdown

To understand what nan biggest opportunity areas were to amended LCP, we looked astatine information from nan LCP sub-parts, arsenic described successful Optimize LCP.

While each page and each model whitethorn return a different attack to loading and displaying what becomes nan page's LCP element, each 1 tin beryllium divided into these sub-parts:

Quoting from that article, nan sub-parts are:

Time to First Byte (TTFB) The clip from erstwhile nan personification initiates loading nan page until nan browser receives nan first byte of nan HTML archive response. Resource load delay The clip betwixt TTFB and erstwhile nan browser starts loading nan LCP resource. If the LCP constituent doesn't require a assets load to render, this clip is 0. Resource load duration The long of clip it takes to load nan LCP assets itself. If nan LCP element doesn't require a assets load to render, this clip is 0. Element render delay The clip betwixt erstwhile nan LCP assets finishes loading and nan LCP element rendering fully.

Real navigation capacity data

LCP rating TTFB (ms) Image load hold (ms) Image load long (ms) Render hold (ms)

Good	600	350	160	230
Needs improvement	1,360	720	270	310
Poor	2,270	1,290	350	360

For this post, we utilized information from page navigations pinch a subresource image LCP successful Chrome to return a look astatine nan LCP sub-parts. We've looked astatine this benignant of information before, but ne'er from section information to spot wherever existent users are spending their clip while waiting for a page's LCP.

Like pinch Core Web Vitals, we took nan 75th percentile (p75) of each LCP sub-part for each root successful nan CrUX dataset, resulting successful 4 distributions of p75 values (one for each sub-part). To summarize these distributions, we took nan median of those values crossed each origins for each of nan 4 LCP sub-parts.

Finally, we divided origins into buckets based connected whether they person a "good", "needs improvement", aliases "poor" LCP astatine nan 75th percentile. This helps show what distinguishes an root pinch bully LCP versus an root pinch mediocre LCP.

Reduce nan size of your LCP image? This clip pinch data

Load long is nan measurement of really agelong it takes to fetch nan LCP resource, successful this case, an image. This clip is usually proportional to nan number of bytes successful nan image, hence each nan capacity proposal to trim that number of bytes.

When looking astatine wherever clip is going successful nan earlier graphs, 1 point that stands retired is that location is not a batch of clip being spent successful image load duration. In fact, it's nan shortest LCP sub-part, successful each LCP buckets. The load long is longer for poor-LCP origins compared to good-LCP origins, but that's still not wherever clip is mostly being spent.

The mostly of origins pinch mediocre LCP walk little than 10% of their p75 LCP clip downloading nan LCP image.

Yes, you should make judge your images are optimized, but that's conscionable 1 portion of improving LCP. And it's clear from this information that for nan emblematic root connected nan web, nan imaginable millisecond gains for LCP wide is mini nary matter really blase nan compression scheme.

One last surprise: slow load durations were erstwhile typically blamed connected mobile devices and nan value of mobile networks. We mightiness person erstwhile expected a emblematic telephone to return aggregate times longer to download nan aforesaid image arsenic a desktop instrumentality connected a wired connection. The information suggests that's nary longer nan case. For origins pinch mediocre LCP, nan median p75 image load long is only 20% slower connected mobile than desktop.

Time to First Byte (TTFB)

For navigations that make a web request, TTFB will ever return immoderate time. It takes clip to do a DNS lookup and commencement a connection. And you can't hit physics: a petition has to recreation done nan existent world complete wires and optical cables to scope a server, past nan consequence has to make nan travel back. Even nan median root pinch bully LCP spends much than half a 2nd connected TTFB astatine its 75th percentile.

However, nan TTFB disparity betwixt nan bully and mediocre LCP origins shows nan opportunity for improvement. For astatine slightest half of nan origins pinch mediocre LCP, nan p75 TTFB of 2,270 milliseconds alone astir guarantees that nan p75 LCP can't beryllium faster than nan 2.5 2nd "good" threshold. Even a mean percent simplification of that clip would mean a important LCP improvement.

You whitethorn not beryllium capable to hit physics, but location are things that tin beryllium done. For example, if your users are often successful a very different location than your servers, a CDN tin get your contented person to them.

For more, spot nan Optimizing TTFB guide.

Resource load delay, nan overlooked slow LCP culprit

If TTFB tin beryllium improved but immoderate improvements are bound by physics, assets load hold tin perchance beryllium eliminated, successful believe only bound by your serving architecture.

This sub-part measures nan clip from nan presence of nan first byte of nan HTML consequence (TTFB) to erstwhile nan browser starts a petition for nan LCP image. We've been focused for years connected really agelong it takes to download LCP images, but we've often ignored nan clip wasted earlier nan browser is moreover told to commencement nan download.

The median tract pinch mediocre LCP spends almost 4 times arsenic agelong waiting to commencement downloading nan LCP image arsenic it does really downloading it, waiting 1.3 seconds betwixt TTFB and image request. That's much than half of nan 2.5 2nd LCP fund gone successful a azygous sub-part.

Dependency chains are a communal logic for agelong load delays. On nan simpler extremity is simply a page loading a style sheet, which, aft nan browser does layout, sets a inheritance image which will extremity up being nan LCP. All those steps person to hap earlier nan browser moreover knows to commencement downloading nan LCP image.

Using HTTP Archive nationalist crawl data, which records nan "initiator" concatenation of web requests from nan HTML archive to an LCP image, you tin spot nan clear relationship of petition concatenation magnitude pinch slower LCP.

The narration of limited petition chains pinch LCP.

The cardinal is to fto nan browser cognize arsenic soon arsenic imaginable what nan LCP will beryllium truthful it tin commencement loading it, moreover earlier there's a spot for it successful nan page's layout. There are a fewer devices disposable to execute this, for illustration a classical <img> tag successful nan HTML truthful nan preload scanner tin find it quickly and commencement downloading it, aliases a <link rel="preload"> tag (or HTTP header) for images that won't beryllium <img>s.

It's besides important to thief nan browser find which resources to prioritize. This is particularly existent if your page is making tons of requests during page load, arsenic nan browser often won't cognize what nan LCP constituent will beryllium until aft galore of those resources person loaded and layout has occurred. Annotating nan probable LCP constituent pinch a fetchpriority="high" attribute (and making judge to debar loading="lazy") makes it clear to nan browser to commencement loading nan assets immediately.

Read more proposal astir optimizing load delay.

Render delay

Render hold measures nan clip from erstwhile nan browser has nan LCP image loaded and ready, but for immoderate logic there's a hold earlier it's shown connected screen. Sometimes this is simply a agelong task blocking nan main thread erstwhile nan image is ready, successful different cases it whitethorn beryllium a UI prime to uncover a hidden element.

For nan emblematic root connected nan web location doesn't look to beryllium a immense render hold opportunity, but during optimization you tin sometimes create render hold retired of clip antecedently spent successful different sub-parts. For example, if a page starts preloading nan LCP image truthful it's disposable quickly location will nary longer beryllium a agelong load delay, but if nan page itself isn't fresh to show nan image—like from a ample render-blocking style expanse aliases a client-side rendering app that has to decorativeness loading each its JavaScript earlier thing tin beryllium displayed—LCP will still beryllium slower than it should be, and nan clip spent waiting will now show up arsenic render delay. This is why server broadside rendering aliases fixed HTML often has an advantage erstwhile it comes to LCP.

If your ain contented is affected, publication more proposal astir optimizing render delay.

Check each those sub-parts

It's clear that to efficaciously optimize LCP, developers request to look astatine nan page load holistically, and not conscionable attraction connected optimizing images. Check each portion of nan clip to LCP, because there's apt overmuch larger opportunities for improvement.

For gathering this information successful nan field, nan web-vitals library's attribution build includes timings for nan LCP sub-parts. The Chrome User Experience Report (CrUX) doesn't yet see each this data, but it does person entries for TTFB and LCP, truthful it's a start. We dream to see nan information utilized for this station successful CrUX successful nan future, truthful enactment tuned for much news connected that.

For testing LCP sub-parts locally, effort nan Web Vitals extension aliases nan JavaScript snippet successful this article. Lighthouse besides includes nan breakdown successful its "Largest Contentful Paint element" audit. Look for much LCP sub-part proposal successful nan DevTools Performance panel, coming soon.