Available on the biggest platforms.
Once you start with NitroPack, you can freely choose your integration platform.
Once you start with NitroPack, you can freely choose your integration platform.
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.
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.
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.
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.
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.
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).