Largest Contentful Paint (LCP) is a term we have heard frequently in the last two years.
LCP reports the render time of the largest element you see on the first screen after you access a website. It can be an image, a text block, a video, or anything else.
You might have also heard that we should do our best to keep it under 2.5 seconds.
But why 2.5 seconds?
Think about it, the LCP metric measures perceived load speed for the largest element on the first screen, meaning when page-to-page navigation appears complete to a user.
You click a link, you access a website, you see something on the screen, and that’s the moment when you make a choice to stay or to go.
LCP is the litmus test of the site’s perceived initial value for the user. You see something meaningful (hopefully) on the screen and you decide whether it aligns with the expectations you had before clicking that link, or if you’d rather see something else. This is the moment of truth.
And there is quite a short period of time we are okay to wait for something to happen on a web page. Usually, users are patient enough to wait a few seconds—up to 2.5s, according to Google’s data.
So, to improve the odds that a user continues to engage with a website we should strive for the following:
- Show something meaningful on the first screen in less than 2.5s.
- Make sure what we are showing is what represents the site’s value in the best way.
Desired LCP Versus Real LCP
But how do we make sure our LCP represents the site’s value in the best way possible? How do we make sure that the first meaningful thing a user sees on the website welcomes them to interact with the website?
Take a look at this news website.
If you happened to open a news website, you would expect to see what the news is about the first thing, right? So you could decide as soon as possible—whether you’re interested in reading the page further or not.
The heading and the thumbnail would be the most informative and important elements in this case. They would be the desired Largest Contentful Paint.
We’d like to display them as soon as possible, and we’d like to track their load specifically as LCP.
How to Calculate LCP on Your Site
You can use quite a few tools to measure LCP: GTmetrix, WebPageTest.org, Lighthouse in Chrome Dev Tools, and others. The easiest way would be just to look at Google PageSpeed Insights. The last screenshot will include all areas considered to be a part of LCP.
You can see that an ad, a breaking news section, and a cookies consent popup are all considered to be LCP on this page. Their loading time is added to the LCP timing as well.
Adjust Real LCP to Become the Desired One
To raise the chances that a user stays on the page, we need to make sure that our “desired” LCP is really seen as LCP, and nothing else.
Here are few ideas on how to do it:
- Improve design so that there will be a clear hierarchy with the main element on the page, and a few secondary.
- Delay execution of anything that is not providing the best value on the first screen (pop-ups, modals, chat widgets, ads, subscription forms etc.)
- Move heavy elements like sliders, galleries and so on below the fold.
Largest Contentful Paint is a point when the user sees the main content on the first screen and decides to stay or to leave. In the best interest of your users, we recommend:
- Providing the LCP to users in 2.5s or less.
- Display valuable content first, delaying everything else.
In other words, it is in our best interest to provide a good user experience, as this is the main idea behind Core Web Vitals.