What_Is_Lcp_(Largest_Contentful_Paint) - What-is-LCP-Header

What is Largest Contentful Paint (LCP)?

08 Oct 2019

Measuring page speed has always been a struggle. Popular, widely used metrics like Load or First Paint don’t fully reflect the user experience. Every website is different, and it’s usually tricky to pinpoint a single moment when it becomes interactive.

As the author of this W3C document puts it:

“Load is not a single moment in time — it’s an experience that no one metric can fully capture. There are multiple moments during the load experience that can affect whether a user perceives it as ‘fast’ or ‘slow.’”

Quality performance-measuring tools offer an arbitrary score based on several metrics, and depending on the weight they ascribe to those metrics, the score might fit one website better than the next one. 

The speed measurement endeavor may get a little less arbitrary with a newly introduced metric called Largest Contentful Paint (LCP). It is now a part of the Chrome browser (as of Chrome 77) and measures the time until the largest element is rendered in the viewport.

Metrics typically used to measure page speed

The metrics already used to measure page speed include Load Event; First Paint (FP); First Contentful Paint (FCP); First Meaningful Paint (FMP); DOMContentLoaded (DCL); and Time to Interactive (TTI).

What is Load Event?

This metric fires when the whole page has been loaded.

What is First Paint?

This metric marks the point when the browser renders anything different from what was previously on the screen.

What is First Contentful Paint?

This metric marks the point when the first bit of content is rendered.

What is First Meaningful Paint?

This metric shows when the essential content is rendered.

What is DOMContentLoaded (DCL)?

This metric fires when the initial HTML has been fully loaded and parsed. The difference between DCL and load is that for the DCL to occur, external resources like pictures don't need to be loaded.

What is Time to Interactive?

This metric measures how long it takes before the page is interactive, meaning that First Contentful Paint occurred, event handlers are registered for visible page elements, and the page reacts to user interactions within 50 ms.

All of the commonly used metrics can be useful at times, but some of them don’t address the user experience, while others can’t be used to accurately measure page speed on a large scale.

For instance, the Load or DOMContentLoaded events may take 20 seconds to occur. That doesn’t mean that the user was waiting for 20 seconds to be able to access the relevant content. 

First Meaningful Paint, while still a handy metric, often fails to recognize which content is actually meaningful. First Meaningful Paint works well with popular layouts, but it doesn’t scale well and in some cases, should not be trusted at all. 

Time to Interactive measures interactivity in connection to content visibility. In many cases, this metric is undoubtedly critical. However, websites that don’t rely on responsiveness as much, like news outlets, will not benefit from using Time to Interactive in analyzing their page speed.

Enter Largest Contentful Paint

Because none of the metrics previously used was reliable on a large scale, Google was looking for new ways to measure performance. What they came up with might be surprising: it’s not a complicated, flashy algorithm, but rather a back-to-basics solution.

According to Google’s research, it is highly accurate to assume that the most essential element of the page is the largest one visible in the viewport

This means that when a page is loading, the largest elements, be it a text node, an image or a video, are tracked. If during loading, a newly loaded element is larger than the previous biggest one, then it is that element’s loading time that will be tracked. 

This process is well depicted by the images from the article introducing the Largest Contentful Paint metric, written by Philip Walton.

What_Is_Lcp_(Largest_Contentful_Paint) - 3.-what-is-LCP-enter-LCP.png

What_Is_Lcp_(Largest_Contentful_Paint) - 4.-what-is-LCP-enter-LCP.png

As we can see in these examples, the largest element tracked will be the one that is the largest by the end of the loading process.

What does Largest Contentful Paint mean for SEO?

Google has gone out of its way to emphasize how important web performance is for them, especially when it comes to mobile devices. Since Largest Contentful Paint is a metric of their invention and will be a part of the Chrome browser, we can expect them to treat it as one of the defaults in measuring a website’s performance. In turn, although it is merely speculation at this point, it could become a direct ranking factor in the future. 

Does that mean that Google wants all the important content to be presented in the largest element? While this would usually make sense from a structural standpoint, it might discourage creativity in web design. 

Time will tell if these are valid concerns.

Wrapping up

The Largest Contentful Paint metric is a deceptively simple but effective way to measure when key content is displayed in the user’s viewport. With all the other metrics available, we are getting closer to a consistent, universal way of accurately measuring web performance with the user experience in mind.

For more insight into Largest Contentful Paint, you can watch what Onely’s Bartosz Goralewicz has to say about LCP:

More from our blog

How-Much-Content-is-Not-Indexed-in-Google-in-2019 - How-Much-Content-is-Not-Indexed-in-Google-in-2019-Headerm

How Much Content is Not Indexed in Google in 2019?

everything-about-google-autocomplete - autocomplete-blog

Everything you Need to Know about Google Autocomplete

Google-vs-JavaScript-What-is-the-Score-in-2019 - Google-vs.-JavaScript.png

Google vs. JavaScript: What is the Score in 2019?

what-happened-to-meta-search-engines - 0.-meta-search-engines-hero-image_moz.jpg

What Happened to Meta-search Engines?

×


Sorry to interrupt, but …

Onely uses cookies to provide you with a better website experience. Read our Privacy Policy for more details.