Largest Contentful Paint is one of Google’s three Core Web Vital metrics. It is a type of page speed measurement that is intended to be a ranking factor for Google search – and so is important for SEO.
Largest Contentful Paint is generally referred to by the acronym LCP. It is reported on in Google Search Console and can be measured with a wide variety of page speed tools (such as Page Speed Insights).
Largest Contentful Paint Definition
LCP measures the amount of time it takes for the largest piece of content (that is immediately visible) on a webpage to fully load. The purpose of this is user perception – how long does it take until a page seems like it has loaded.
Note:
- Largest in this sense refers to the space a piece of content takes up on a screen (rather than file size).
- Only content that can be seen when a page first loads is counted (ie above the fold content).
LCP is primarily a measure used by Google and can be found in the Core Web Vitals section of Google Search Console. There are three levels of performance according to Google:
Source: web.dev/vitals
These three levels of performance are measured separately for desktop and mobile devices. The timeframes however are the same:
- Good: Up to 2.5 seconds
- Needs Improvement: Between 2.5 seconds and 4 seconds
- Poor: Over 4 seconds
Technical Information
Google previously used a different measure for the same purpose. First Meaningful Paint (FMP) attempted to measure when the first important thing on a page had loaded.
Of course what is “important” is subjective and hard for an algorithm to guess across millions of different websites. Instead, Google has changed to LCP as it is a far more objective measure.
However what is the “largest” piece of content on a webpage still needs to be detected. Google does this by ‘watching’ as a page loads and seeing which image, video, or block-level elements (eg things within HTML tags such as <p>,<div>, <span> etc) are the largest above the fold elements once a webpage loads.
As pages don’t load in order from largest to smallest this means that the Largest Contentful Block changes as the page loads. Here is an image from Google which shows how this works:
Source: https://web.dev/lcp/
In this example, in the first screenshot we see the first piece of the main content of the webpage load and become labelled as the FCP (First Contentful Paint).
Then the headline loads, and that is marked as the Largest Contentful Paint for the middle three screenshots, as other parts of the page load.
However, the final screenshot in the sequence shows the full webpage load which includes an image. This image takes up more of the screen than the headline, and so is now marked as the LCP (Largest Contentful Paint).
This process is important as it tells you that you can’t cheat this measurement by having a large piece of content load quickly, only for it to be replaced as the largest later in the page load. Only the largest piece of content on the screen once the page is fully loaded counts.
Top Tip
As Google is using “mobile-first” indexing on most sites, it is a good idea to optimise for mobile ahead of desktop. Desktop and mobile are measured separately for LCP – but both have the same benchmarks.
You shouldn’t assume fixing one will fix the other, however. It is likely that less content can be seen on a mobile screen and so a different block will be designated as the LCP than from the desktop version of the page.
Warning: Cookie Banners
When testing LCP, for most sites your cookie banner will get caught up as the Largest Contentful Paint. This means you should optimise your cookie banner to load as quickly as possible. There is a helpful guide from Google about it here.
If you want to test your actual webpage without including your cookie banner, you can use this Webpage test tool and set your cookies in advance by using the advanced tab, then going to the custom section. Instructions on how to do it are included in the guide from Google mentioned above.
Summary
