[Proposal] Largest Contentful Paint

#1

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.

#2

An explainer for the feature is now available.

#3

<chair hat off>

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

#4

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

#5

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