What is Largest Contentful Paint (LCP)? [New Page Speed Metric]

Largest Contentful Paint is the most important metric (along with TBT) for your score in Google’s PageSpeed Insights.

Source: Google PageSpeed Insights 

This is a result of a recent update to the technology that powers PSI - Lighthouse.

The latest version of Lighthouse (v6) affected the two old "paint" metrics - First Meaningful Paint and First Contentful Paint. It also added LCP to the mix.

 

Source: What's New in Lighthouse 6.0

In this article, you learn:

• What LCP Is
• Why It's So Important    
• How LCP Improves Upon FMP and FCP
• How To Check Which Element Triggers The LCP Metric 

Finally, we’ll look at a few examples of LCP in action.

Let's get started.

What is Largest Contentful Paint?

Largest Contentful Paint (LCP) measures the time it takes for the largest above the fold content element to load. Items that appear only when a user taps the screen or scrolls down don't affect LCP.

A few things to unpack here.

First, the largest element can be a picture, video, or a block of text. We'll look at different examples in a bit.

 

 

Second, only above-the-fold content can affect this metric. If a user taps on the screen or scrolls down, the browser stops looking for another LCP candidate.

According to PSI, everything below 2.5s is considered a good LCP score. If your largest above the fold elements load faster than that, you're good.

So, the concept of LCP isn't that complex.

But why should we even bother with it? Especially since we already have two other similar metrics. 

Because the other two metrics have significant gaps. Let me explain.

 

The Shortcomings of First Contentful Paint (FCP) and First Meaningful Paint (FMP)

 

LCP's addition addresses some of the problems with FCP and FMP.

Actually, FMP will no longer be a part of PSI scores. It was too complicated to track and prone to huge swings. And it wasn't as "meaningful" as the name suggested. In short, don't worry about FMP anymore.

Next, FCP is still around. But it now contributes less to the overall score. Its weight is down from 20% to 15%.

Why is that?

Well, FCP measures how long it takes for any content to be painted. Anything described in the Document Object Model (DOM) triggers FCP. 

That sounds good until you realize you're measuring how long it takes for your loading screen to appear.

Other small and unimportant elements can also trigger this metric.

That's not to say FCP is irrelevant. Loading screens, icons and animations are important. In general, progress indicators are great for improving user experience. 

But at the same time, they're not what your visitors came for. And they're not what you want people to see or remember. 

That's why FCP doesn't paint a complete picture. And it's also why we need LCP.

With LCP, you know how long it takes for the largest element to load. And that’s an item you want your visitors to see and remember. 

So, FCP tracks the beginning of the loading experience while LCP tracks the culmination. By analyzing both, you get a better picture of the actual user experience on your page. 

Let's check out two examples of LCP.

LCP Examples

Some websites depend on their largest element to thrive.

News websites are a great example. They have a shocking headline, picture, or video that they want visitors to see. If that doesn't load quickly, people won't stick around much longer. 

This is the item that triggers the LCP metric in Yahoo News:

 

Source: Yahoo News

 

As you can see, it's the picture for the featured story of the day. Remove that and you're throwing half (or more) of your traffic out the window.

Next, let's look at the LCP for Google News.

 

Source: Google News

Pretty much the same thing.

Here the featured headline triggers the LCP metric. Again, this is what people come to the site for. Not the Google News logo or the "More Headlines" button.

As you can see, the largest element often plays the most prominent role.

How You Can Check Which Element Triggers LCP

You can perform this check on your own website. Or any website for that matter.

First, open the page you want to inspect in Chrome. Right-click and select "Inspect."

From there, go to "Performance."

 

 

Click the “Reload” button.

 

Chrome will analyze the page for a few seconds and give you a report. 

 

 

In the "Timings" section, you can see a small LCP icon. When you hover over it, it will paint the largest element of the page blue.

 

 

And that's about it. 

If you want a more technical explanation, check out this webinar by Paul Irish. It covers the history, current state and technical details of the LCP metric.

Final Thoughts

LCP is just one part of the new way PSI tracks performance.

In fact, metrics are always changing. Some get updated. Others are left behind. And it's our job to keep up with them.

For now, you need to understand two more new metrics - Cumulative Layout Shift (CLS) and Total Blocking Time (TBT).

We're going to cover both in-depth in the next few days. We're also compiling everything you need to know about this latest update in one place.

Finally, we’re running thousands of tests to learn more about the effects of the latest Lighthouse update. We’re going to publish our findings soon.

If you want to get everything as soon as we're done writing it, subscribe to our newsletter below.