The Largest Contentful Paint (LCP) measures how long it takes for the largest content within the viewport to render. In other words, LCP measures when the largest image or text block above the fold becomes visible.
The types of content elements considered for LCP are:
- <img> elements
- <image> elements inside an <svg> element
- The poster image is used for <video> elements
- A background image loaded via the url() function
Block-level elements containing text nodes or other inline-level text elements children.
Because CWV will continue to evolve, other element types may be added in the future (e.g., <svg>, <video>).
There are a few caveats about calculating the size of the largest contentful element that you must consider:
The size of a content element is the size visible within the viewport. Any portion of an element that is not visible within the viewport does not count towards LCP. For example, LCP won’t consider element portions clipped or that extend outside the viewport. Additionally, any margin padding or border element applied with CSS won’t impact LCP.
Any late-loading element can be considered the largest contentful element once it becomes visible to the user. For example, a smaller element (e.g., <h1>) may be reported as the largest element early in the loading process. Still, as soon as a larger element finishes rendering (e.g., a background image), the latter will be considered for LCP. This is also true for new elements added to the DOM.
Only the element’s initial size and position in the viewport are considered. Thus, elements initially rendered in the viewport that later go off-screen can still become the LCP element. On the other hand, elements that were initially rendered off-screen and then transitioned into the viewport will not be considered.
Even if a current largest element is removed later from the DOM, it will remain the largest element (unless a larger contentful element renders).
No new contentful elements will be considered for LCP after user interaction (tap, scrolls, keypresses).
With those caveats in mind, let’s get into measuring and optimizing LCP.