Largest Contentful Paint

Largest Contentful Paint

Largest Contentful Paint (LCP) is one of the many metrics tracked by the Performance Scan on both desktop and mobile. Each metric captures a different aspect of your application's performance.

The resulting LCP is shown in milliseconds:

What does LCP measure?

The LCP metric reports the render time of the largest image or text block within the viewport, relative to when the page first started loading

How can I improve my application's LCP score?

As specified in the Largest Contentful Paint API, the following elements are considered:

• <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 containting text nodes or other inline-level text elements children

How is an element's size determined?

The size of the element reported for LCP is typically the size that's visible to the user within the viewport. The part of an element that extends outside of the viewport, or any part that is clipped or has non-visible overflow, does not count toward the element's size.

For image elements that have been resized from their original(intrinsic) size, the size that gets reported is either the visible size or the intrinsic size, whichever is smaller. For example, images shrunk to a much smaller than their intrinsic size will only report the size they're displayed at, whereas images that are stretched or expanded to a larger size will only report their intrinsic sizes.

For text elements, only the size of their text nodes is considered (the smallest rectangle that encompasses all text nodes). For all other elements, any margin, padding, or border applied via CSS is not considered.

I would like to learn more

For more info on the LCP metric, you can read this article on https://web.dev.