1722325 - (cwv-cls) [meta] Cumulative Layout Shift (CLS) implementation

Status: NEW

(Core :: Performance: General, enhancement)

Description

[Benjamin De Kosnik [:bdekoz]]

The Cumulative Layout Shift metric is one of three core metrics in Google's web vitals suite of analytic tools for web performance.

More information can be found here: https://web.dev/cls/

This bug tracks the status and implementation of this metric in Gecko.

Dependencies include the Layout Instability API, and the specification can be found in the Largest Contentful Paint API (https://wicg.github.io/layout-instability/)

The way this metric is scored has changed from the original design, with the first round of experiments by Google leading to changes WRT long page loads, etc are computed.

Comment 1

[Alfred]

Cumulative Layout Shift (CLS) - a Core Web Vitals metric, measures the instability of content by summing shift scores across layout shifts that don't occur within 500ms of user input.

The most common causes of a poor CLS are:
Images without dimensions
Ads, embeds, and iframes without dimensions
Dynamically injected content
Web Fonts causing FOIT/FOUT
Actions waiting for a network response before updating DOM

Also had Cumulative Layout Shift problem when optimizing https://www.quictents.com/ , but, after reading the how-to on https://web.dev/i18n/en/optimize-cls/ , it became very easy.

Comment 2

[BugBot [:suhaib / :marco]]

The meta keyword is there, the bug doesn't depend on other bugs and there is no activity for 12 months.
:fdoty, maybe it's time to close this bug?

Comment 3

[Frank Doty [:fdoty]]

:bdekoz is this still an issue which needs to be tracked as an individual bug?

Comment 4

[Benjamin De Kosnik [:bdekoz]]

I think we should keep this as a tracker, even though we are not currently working on it. There are some interesting technical ideas here, and this is another of the google algos like "contentful" that are showing up in various parts of webperf.