Cumulative Layout Shift
31 quoted answers, each with its source
The short answer
Cumulative Layout Shift is the largest burst of layout shift scores for unexpected layout shifts over the entire page lifecycle, where the burst is the session window with the maximum cumulative score; layout shifts within 500 milliseconds of user input can be excluded. As of 2023, web.dev defines good CLS as 0.1 or less and poor as greater than 0.25, measured at the 75th percentile of page loads segmented across mobile and desktop, and the 0.1 threshold was chosen over 0.05 as a better balance between experience quality and achievability. In 2021 Chrome changed the metric to a maximum session window with a 1 second gap capped at 5 seconds, which caps a page's CLS and did not make any page's score worse; the analysis reported that 55% of origins would see no change at the 75th percentile and about 3% would improve to good. By 2025, 72% of desktop pages and 81% of mobile pages achieved a good CLS score, with desktop up from 62% in 2021.
Every part of this comes from the quotes below. How we write these.
What the rules actually say16
Quoted straight from the people who make or enforce the rules.
The web.dev Cumulative Layout Shift article states that…
- good CLS values are 0.1 or less.
- poor CLS values are greater than 0.25.
1 quote from 1 source
Good CLS values are 0.1 or less. Poor values are greater than 0.25.
The web.dev Cumulative Layout Shift article states that a good threshold at which to measure CLS is the 75th percentile of page loads, segmented across mobile and desktop devices.
1 quote from 1 source
To provide a good user experience, sites should strive to have a CLS score of 0.1 or less. To ensure you're hitting this target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.
The web.dev Cumulative Layout Shift article states that CLS is a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifecycle of a page.
1 quote from 1 source
CLS is a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifecycle of a page.
The web.dev Cumulative Layout Shift article states that the largest burst is the session window with the maximum cumulative score of all layout shifts within that window.
1 quote from 1 source
The largest burst is the session window with the maximum cumulative score of all layout shifts within that window.
The web.dev Cumulative Layout Shift article states that layout shifts occurring within 500 milliseconds of user input have the hadRecentInput flag set so they can be excluded from calculations.
1 quote from 1 source
Layout shifts that occur within 500 milliseconds of user input will have the hadRecentInput flag set, so they can be excluded from calculations.
The web.dev Cumulative Layout Shift article notes that the…
- layout shift score was initially calculated based only on impact fraction.
- distance fraction was introduced to avoid overly penalizing cases where large elements shift by a small amount.
1 quote from 1 source
Note: Initially, the layout shift score was calculated based only on impact fraction . The distance fraction was introduced to avoid overly penalizing cases where large elements shift by a small amount.
The finalised change to Cumulative Layout Shift is a maximum session window with a 1 second gap, capped at 5 seconds.
2 quotes from 1 source
we've finalized the change we plan to make to the metric: maximum session window with 1 second gap, capped at 5 seconds
Evolving the CLS metric
Cumulative Layout Shift's candidate metric options were implemented in Chrome, according to the web.dev post 'Evolving the CLS metric'.
1 quote from 1 source
We also implemented the top options in Chrome and did a large-scale analysis of the metrics over millions of web pages.
The web.dev post "Evolving the CLS metric" states that…
- no page will have a worse Cumulative Layout Shift score as a result of the session-window change.
- the session-window change caps the Cumulative Layout Shift (CLS) of a page.
1 quote from 1 source
Since this update caps the CLS of a page, no page will have a worse score as a result of this change.
The web.dev article "How the Core Web Vitals metrics thresholds were defined" states that…
- Cumulative Layout Shift (CLS) is new.
- its authors are not aware of research that can directly inform the thresholds for Cumulative Layout Shift (CLS).
1 quote from 1 source
Cumulative Layout Shift (CLS) is a new metric that measures how much the visible content of a page shifts around. Given CLS is new, we are not aware of research that can directly inform the thresholds for this metric.
The web.dev article on how the Core Web Vitals thresholds were defined states that the 0.1 Cumulative Layout Shift…
- 'good' threshold was chosen over the 0.05 threshold.
- threshold strikes a better balance between quality of experience and achievability than the 0.05 threshold.
1 quote from 1 source
Thus, we conclude that, while many origins meet the 0.05 threshold, the slightly less stringent CLS threshold of 0.1 strikes a better balance between quality of experience and achievability.
Measured finding12
Something someone actually measured, with the method attached.
Cumulative Layout Shift's candidate metric options were analysed at large scale over millions of web pages, according to the web.dev post 'Evolving the CLS metric'.
1 quote from 1 source
We also implemented the top options in Chrome and did a large-scale analysis of the metrics over millions of web pages.
The web.dev post 'Evolving the CLS metric' reports that 55% of origins would see no change in Cumulative Layout Shift at all at the 75th percentile as a result of the session-window change.
1 quote from 1 source
And based on our analysis, 55% of origins will not see a change in CLS at all at the 75th percentile
The web.dev post 'Evolving the CLS metric' reports that about 3% of origins would see their Cumulative Layout Shift (CLS) scores improve from a 'needs improvement' or 'poor' rating to a 'good' rating as a result of the session-window change.
1 quote from 1 source
Most will only see a slight improvement, but about 3% will see their scores improve from having a "needs improvement" or "poor" rating to having a "good" rating.
The web.dev article on how the Core Web Vitals thresholds were defined reports that in internal testing…
- levels of shift from 0.15 and higher were consistently perceived as disruptive.
- shifts of 0.1 and lower were noticeable but not excessively disruptive.
1 quote from 1 source
In our internal testing, we found that levels of shift from 0.15 and higher were consistently perceived as disruptive, while shifts of 0.1 and lower were noticeable but not excessively disruptive.
Cumulative Layout Shift is reported by the web.dev article on how the Core Web Vitals thresholds were defined, based on CrUX data, to be 0.05 or lower for nearly 50% of origins.
2 quotes from 1 source
Based on CrUX data, we can see that nearly 50% of origins have CLS of 0.05 or lower.
% of CrUX origins classified as "good" for candidate CLS thresholds as of April 2020
The web.dev article on how the Core Web Vitals thresholds were defined reports that at a 0.25 threshold for Cumulative Layout Shift, roughly…
- 20% of phone origins would be classified as 'poor'.
- 18% of desktop origins would be classified as 'poor'.
1 quote from 1 source
For a 0.25 threshold, roughly 20% of phone origins, and 18% of desktop origins, would be classified as "poor".
The Web Almanac 2025 performance chapter reports that…
- 72% of desktop pages achieve a "good" Cumulative Layout Shift score.
- 81% of mobile pages achieve a "good" Cumulative Layout Shift score.
2 quotes from 1 source
In 2025, 72% of desktop pages and 81% of mobile pages achieve a "good" Cumulative Layout Shift (CLS) score.
Performance | 2025 | The Web Almanac by HTTP Archive
The Web Almanac 2025 performance chapter reports that the share of mobile pages with a good Cumulative Layout Shift (CLS) score reached 81% over the period from 2021 to 2025.
1 quote from 1 source
Desktop CLS improved gradually from 62% in 2021 to 72% in 2025, while mobile saw stronger gains, reaching 81% over the same period.
The Web Almanac 2025 performance chapter reports that on mobile, 62% of pages fail to set dimensions on at least one image.
1 quote from 1 source
On mobile, 62% of pages fail to set dimensions on at least one image, an improvement from 66% in 2024, indicating gradual adoption of CLS friendly image practices.
Changed on3
A dated change. This is where advice quietly stops being true.
Chrome's Cumulative Layout Shift changelog lists 'Cumulative Layout Shift uses max session window' as a metric definition improvement in Chrome 91.
2 quotes from 1 source
Chrome 91 Metric definition improvement: Cumulative Layout Shift uses max session window
Chrome Speed - Cumulative Layout Shift Changelog
The Web Almanac 2025 performance chapter reports that the share of desktop pages with a good Cumulative Layout Shift (CLS) score rose from 62% in 2021 to 72% in 2025.
1 quote from 1 source
Desktop CLS improved gradually from 62% in 2021 to 72% in 2025, while mobile saw stronger gains, reaching 81% over the same period.
The Web Almanac 2025 performance chapter reports that the 62% figure for mobile pages failing to set dimensions on at least one image is an improvement from 66% in 2024.
1 quote from 1 source
On mobile, 62% of pages fail to set dimensions on at least one image, an improvement from 66% in 2024, indicating gradual adoption of CLS friendly image practices.