[Proposal] Largest Contentful Paint

Nicolas_Pena · 2019-05-13

The Largest Contentful Paint (LCP) attempts to answer the following question: how long does the main content of a website take to be rendered on the screen? In our initial version of this API we intend to answer this question for the largest among images or text in the website.

The LCP metric can be viewed as an extension on PaintTiming, which currently only contains the first paint (the time content is first seen on the screen) and first contentful paint (the first time some ‘relevant’ content is first seen on the screen). Even though this API is very popular, it has the limitation of triggering way too early on the page load. The addition of LCP will provide another point in time in the ‘load timeline’: the time at which the key content of the page has been painted on the screen. The LCP metric can be thought of as a high-level loading metric that builds upon the more flexible Element Timing. While Element Timing can be used by developers who can dedicate a lot of time to the performance of their website, LCP provides important information without any effort on the part of web developers. Furthermore, since LCP is a single number, it can be used to compare sites and decide when to invest in performance.

I presented this API to W3C’s Web Perf WG: see slides here and minutes of that call here. Members of the group had concerns about the heuristics being used (large content as a proxy for important content, ignoring elements that are rendered after user input occurs on the website, etc.). There was a followup thread with more feedback. But then we also received support from several industry members, as shown by posts in this thread. Therefore, we’d like to incubate this API to gather more feedback.

yoavweiss · 2019-05-18

An explainer for the feature is now available.

yoavweiss · 2019-05-23

I’d like to move the explainer repo to the WICG org. @marcosc - PTAL?

marcosc · 2019-05-24

Given that it’s been looked at by the web perf working group, it seems reasonable to do some incubation on it.

yoavweiss · 2019-05-24

Thanks! The repo now lives at https://github.com/WICG/LargestContentfulPaint

emersonthis · 2020-01-20

When we talk about a “paint” in the context of the LCP metric, does it refer to the entire screen or an individual element? I’m wondering if it makes sense to describe LCP as the time when the largest contentful element is painted? Or is it more accurate to describe it as the time of the screen paint that includes the largest contentful element.

I think this distinction matters when dealing with nesting…

<body>
    <div id="big-contentful-banner" style="background-image:url('./cats.svg');">
        <img id="small-but-expensive-img" src="./dogs@3000px.jpg" style="width: 20px;height:20px;" />
    </div>
</body>

Let’s assume the parent

is large enough to be targeted by LCP and it renders in 1s but the file is slow to download and takes 10s to be rendered, would we expect a short ~1s LCP or the longer ~10s? I’m trying to pinpoint whether whether paint events apply to areas of the screen or DOM nodes.

Nicolas_Pena · 2020-01-20

Not sure I understand the question… the LCP in your example will probably be the time it takes for the big-contentful-banner to be rendered on the screen.