Core Web Vitals: LCP, INP, CLS

[ryantownsend]

Description

There's a proposal for Largest Contentful Paint (LCP) which is only missing from Safari/Webkit now, but Cumulative Layout Shift (CLS) and Interaction to Next Paint (INP) are also missing from both Safari/Webkit and Firefox. These metrics are exceptionally useful for monitoring and optimising websites, particularly when attribution is collected.

Given the nuances between the different browsers, we cannot solely depend on data from Chromium:

1. Browsers operate differently in many areas (e.g. tight mode)
2. Some support unpolyfillable features (e.g. Speculation Rules) that have a huge impact on performance
3. Polyfills and alternative code paths can have wildly different performance characteristics to their platform-native counterparts
4. iOS users have different upgrade paths / device performance characteristics to Android users

In terms of implementation, it definitely makes sense to break these metrics into separate deliverables, but from a voting point of view, maybe keeping them wrapped up under one "Core Web Vitals" proposal to gauge interest might be more accurate?

Specifications

• LCP
• INP
• CLS

(Note the latter two aren't full specs for the metrics, but the APIs they depend on. The metrics are calculated in userland from these)

Specification

W3C

Additional Signals

• Mozilla/Firefox on Event Timing API w/ interactionId (necessary for accurate INP)
• Mozilla/Firefox on CLS
• Mozilla/Firefox on Layout Stability API

[gsnedders]

Specifications

• LCP
• INP
• CLS

(Note the latter two aren't full specs for the metrics, but the APIs they depend on. The metrics are calculated in userland from these)

Which corresponds to these tests: https://wpt.fyi/results/?label=master&label=experimental&aligned&q=path%3A%2Flayout-instability%2F%20or%20path%3A%2Fevent-timing%2F%20or%20path%3A%2Flargest-contentful-paint%2F