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.
  • 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.
  • 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.

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)
  • resourceLoadDelay (time since TTFB and when the browser starts loading the LCP resource - if there is one, otherwise 0)
  • resourceLoadDuration (time it takes to load the LCP resource itself - if there is one, otherwise 0)
  • elementRenderDelay (time between when the LCP resource finished loading until the LCP element is fully rendered)

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 LCP article or keep an eye out on the changes to the LCP metric.