All About LCP

Table of Contents

• What is LCP?
  • How is LCP Calculated?
  • When is LCP Not Being Collected?
• 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.

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)

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?

• <img> elements
• <image> elements inside an <svg> element
• <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)

Additional Information

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

Sources

https://web.dev/lcp/