All About LCP

Table of Contents

• What is LCP?
  • How is LCP Calculated?
• What elements are captured in LCP?
• Additional Information
• Sources

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 (image, text block, or video visible in the viewport).

LCP is primarily affected by four factors:

• Slow server response times
• Render-blocking JavaScript and CSS
• 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)

What elements are captured in LCP?

• <img> elements (the first frame presentation time is used for animated content such as GIFs or animated PNGs)
• <image> elements inside an <svg> element
• <video> elements (the poster image is used or first frame presentation time for videos, whichever is earlier)
• 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)

Additional Information

For more information on how to optimize your sites LCP, check out this article from web.dev. 

Sources

https://web.dev/lcp/