Largest Contentful Paint
The Largest Contenful Paint metric aims to measure the time between the start of a navigation and the visually largest element being rendered (so called LCP candidate).
This metric is available in RUM, synthetic monitoring and soft navigations.
There can be a low correlation between CWV and Lighthouse outcomes.
LCP is part of Google's Core Web Vitals.
Nuances of the Largest Contentful Paint metric
There are some important nuances when it comes to the Largest Contentful Paint metric:
- successor of FMP
LCP is the successor of the FMP metric as the methodology of the LCP metric is well documented and has better reproducibility. - images and text nodes
it can be either block level text nodes or images (both inlined and background images, that can be LCP candidates. - some images are excluded
Both full viewport images (changed in Chrome 88) and low-entropy images (Chrome 112) are ignored and won't become LCP candidates. - video's
as of recent, the first frame of a video is now an LCP candidate as well; - stops on interaction
web vitals will stop tracking new LCP candidates when a user interaction happend (clicking, scrolling, typing). - Single Page Applications
If your site is a Single Page Application, there are exceptions when it comes to tracking Core Web Vitals across all page navigations. - FCP higher then LCP
You might run into a scenario where the FCP value is higher than the LCP value. This can happen when dealing with images that aren't served from the same domain as the main document.
The heuristics will then report the load time of the image, instead of the render time.
The last issue has been addressed by Chrome 133.
Limited availability
Largest contentful paint (LCP) is not Baseline because it does not work in some of the most widely-used browsers.
- Only supported in Chrome 77, Edge 79 and Firefox 122
- Continue reading about largest contentful paint
Register to RUMvision to see more resources and learn if your website visitors would already benefit from this feature today.
Lighthouse LCP versus Core Web Vitals LCP
There's a low correlation between the LCP score that you would see in Lighthouse or synthetic monitoring in general (both lab data), and Core Web Vitals or Real User Monitoring (both field data).
That's because during lab data testing, one would often use a the same conditions: an uncached pagehit in the same viewport. In reality, users could be using different viewports and will benefit from caching during successive pageviews.
LCP breakdown
The LCP exists of multiple phases or components. By using the attribution build of the web-vitals JS library or a tool like RUMvision, you'll be able to see a breakdown of the LCP metric.
The LCP breakdown includes:
timeToFirstByte
(the actual TTFB)
our thresholds: 1000ms & 1600msresourceLoadDelay
(time since TTFB and when the browser starts loading the LCP resource - if there is one, otherwise 0)
our thresholds: 250ms & 400msresourceLoadDuration
(time it takes to load the LCP resource itself - if there is one, otherwise 0)
our thresholds: 1000ms & 1600mselementRenderDelay
(time between when the LCP resource finished loading until the LCP element is fully rendered)
our thresholds: 250ms & 400ms
These thresholds per sub-part are based on web.dev guidelines: 40% - 10% - 40% - 10% of the total LCP.
Custom tracking via element timing
Additionally, the cookie notice could sometimes be your website's LCP, while in real life, users will have either accepted or dismissed the cookie notice.
As a result, it could be a totally different element that becomes your LCP during successive pageviews.
In those cases, it is recommended to implement and track element timing. It's a solution that is often used by site speed experts, where RUMvision offers easy integration. A use case is to always track the rendering of your cookie notice, headline and hero image. This way, you don't depend on an LCP that will vary in practice, allowing you what matters for your audience and conversion.
Continue reading about Largest Contentful Paint
Want to learn more about Largest Contentful Paint? Check our blog, check the web.dev LCP article or keep an eye out on the changes to the LCP metric.