Cumulative Layout Shift

[bdekoz]

Request for Mozilla Position on an Emerging Web Specification

• Specification Title: Cumulative Layout Shift
• Specification or proposal URL: https://web.dev/cls/
• Caniuse.com URL (optional):
• Bugzilla URL (optional):
• Mozillians who can provide input (optional): @dholbert, @heycam

Other information

One of 3 metrics defined by Google's Web Vitals in 2020. See: https://web.dev/vitals/

This depends on the layout instability API, for which there is a separate issue #374.

More detailed specs of 'layout-shift-score' and links to canonical sources will be added as comments to this issue.

[npm1]

To clarify, the specification would be https://wicg.github.io/layout-instability/ since CLS is not exposed directly but can be computed based on the layout shifts exposed by the Layout Instability API. We can add a section dedicated to CLS if it helps.

[dholbert]

Duplicate of #374 ? (Oh, now I see "This depends on the layout instability API, for which there is a separate issue #374." So I guess not a dupe, but related.)

[bdekoz]

@npm1 yes, it would be helpful to have a section to CLS and how it's computed in the proposal, as editable text, just because that will clarify and guide future work.

[dholbert]

[EDIT: I removed this comment and spun it off as WICG/layout-instability/issues/57 , "The spec disagrees with developer documentation about whether precise layout-shift values/thresholds should be relied on"]

[skobes-chromium]

In WICG/layout-instability#58, the spec for the Layout Instability API has been updated with further details in non-normative text about the definition of CLS.