Learn Largest Contentful Paint (LCP) in simple words

#webdev #programming #javascript

Largest Contentful Paint (LCP) is a metric that tells us about the perceived page load speed. It marks the point in the page load timeline when the largest content on the page is made visible.

Here, largest content means the largest element in area. But it has to be noted that, not all elements are considered for it. Here is a comprehensive list of the elements that are considered:

<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 load time or first frame presentation time for videos is used—whichever is earlier)
An element with a background image loaded using the url() function, (as opposed to a CSS gradient)
Block-level elements containing text nodes or other inline-level text element children.

This means LCP counts block elements (like <div>, <section>, <article>, etc.) if:

They directly contain raw text nodes, like:

<div>This is plain text</div>

OR they contain inline-level elements that wrap text, like:

<div><span>This is text inside a span</span></div>

Note:
LCP measurements use heuristics to exclude certain elements that users are likely to see as "non-contentful". For Chromium-based browsers, these include:

Elements with an opacity of 0, that are invisible to the user
Elements that cover the full viewport, that are likely considered as background rather than content
Placeholder images or other images with a low entropy, that likely don't reflect the true content of the page

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. If the element extends outside of the viewport, or if any of the element is clipped or has non-visible overflow, those portions don't count toward the element's size.

For image elements that have been resized from their intrinsic size, the size that gets reported is either the visible size or the intrinsic size, whichever is smaller.

For text elements, LCP considers only the smallest rectangle that can contain all text nodes.

For all elements, LCP doesn't consider margins, paddings, or borders applied using CSS.

How is LCP reported?

LCP (Largest Contentful Paint) is reported by the browser as a PerformanceEntry when it paints the largest visible content element on the screen. This entry is updated whenever a larger element finishes rendering — such as when a hero image loads after initial text — or when new, larger elements are added to the DOM.

LCP only considers elements that are visible and fully rendered (e.g., loaded images and fonts). It stops updating once the user interacts with the page (e.g., scroll, click, keypress).

For analysis, only the last LCP entry before user interaction should be reported.

What is a good LCP score?

To provide a good user experience, sites should strive to have Largest Contentful Paint of 2.5 seconds or less. To ensure you're hitting this target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.

Examples

Here are some examples of when the Largest Contentful Paint occurs on a few popular websites:

In both of the timelines, the largest element changes as content loads. In the first example, new content is added to the DOM and that changes what element is the largest. In the second example, the layout changes and content that was previously the largest is removed from the viewport.

While it's often the case that late-loading content is larger than content already on the page, that's not necessarily the case. The next two examples show the LCP occurring before the page fully loads.

In this example, the Instagram logo is loaded relatively early and it remains the largest element even as other content is progressively shown.

In this Google Search results page example, the largest element is a paragraph of text that is displayed before any of the images or logo finish loading. Since all the individual images are smaller than this paragraph, it remains the largest element throughout the load process.