Table of Contents
- What is LCP?
- What elements are captured in LCP?
- Additional Information
What is LCP?
Largest Contentful Paint (LCP) measures the time from navigation to the time when the browser renders the largest bit of content from the DOM.
LCP is primarily affected by four factors:
- Slow server response times
- Resource load times
- Client-side rendering
Here you can view some examples of when LCP occurs.
How is LCP calculated?
Web pages often load in stages, and as a result, it's possible that the largest element on the page may be subject to change. To handle this potential for change, the browser dispatches a
PerformanceEntry of type
largest-contentful-paint identifying the largest contentful element as soon as the browser has painted the first frame. But then, after rendering subsequent frames, it will dispatch another
PerformanceEntry any time the largest contentful element changes.
It's important to note that an element can only be considered the Largest Contentful element once it has rendered and is visible to the user. Images that have not yet loaded are not considered "rendered."
In addition to late-loading images and fonts, a page may add new elements to the DOM as new content becomes available. If any of these new elements is larger than the previous largest contentful element, a new
PerformanceEntry will also be reported.
If an element that is currently the largest contentful element is removed from the viewport (or even removed from the DOM), it will remain the largest contentful element unless a larger element is rendered.
*Since users can open pages in a background tab, it's possible that the largest contentful paint will not happen until the user focuses the tab, which can be much later than when they first loaded it.
(Source: Google, https://web.dev/lcp/#when-is-largest-contentful-paint-reported)
When is LCP Not Being Collected?
Given the design of the metric, there are cases where it's not possible to measure LCP. This is true for both Google and other analytics providers like Blue Triangle. Here's a list of those situations:
- If the browser is not Chrome
- If the browser is not Chrome v77+
- If no LCP events were fired
- If the page view is not a full page turn (e.g it’s SPA or a custom timer)
Note the collection rate for LCP on your site will vary depending on the number of page views that fall into these categories.
What elements are captured in LCP?
<image>elements inside an
<video>elements (the poster image is used)
- An element with a background image loaded via the
url()function (as opposed to a CSS gradient)
- Block-level elements containing text nodes or other inline-level text elements children.
(Source: Google, https://web.dev/lcp/#what-elements-are-considered)
For more information on how to optimize your sites LCP, check out this article from web.dev.