
Google explains how cumulative layout shift (CLS) is measured
Google’s Web Performance Developer Advocate, Barry Pollard, has clarified how Cumulative Layout Shift (CLS) is measured.
CLS quantifies how many unexpected layout changes occur when a person browses your website.
This metric is important for SEO because it is one of Google’s Core Web Vitals. Pages with low CLS scores provide a more robust experience and potentially lead to better search visibility.
How is it measured? Pollard addressed this question in a thread on X.
How is CLS for Core Web Vitals measured? Why is 0.1 considered not good and 0.25 considered bad, and what do these numbers mean?
I’ve had three separate conversations with different people about this in the last 24 hours, so I figured it was time for another detailed thread to explain it…
🧵 1/12 pic.twitter.com/zZoTur6Ad4
— Barry Pollard (@tunetheweb) October 10, 2024
Understanding CLS measurement
Pollard began by explaining the nature of the CLS measurement:
“CLS is ‘unitless’ unlike LCP and INP which are measured in seconds/milliseconds.”
He further clarified:
“Each layout shift is calculated by multiplying two percentages or fractions together: What moved (impact fraction) How much it moved (distance fraction).”
This calculation method helps quantify the severity of layout shifts.
As Pollard explained:
“The entire viewing window moves all the way down – that’s worse than just half the viewing window moving all the way down. The entire viewport moves down a little? This isn’t so bad if the entire viewport shifts down a lot.”
Worst case scenario
Pollard described the worst-case scenario for a single layout shift:
“Maximum layout shift occurs when 100% of the viewport (impact fraction = 1.0) is moved down one full viewport (distance fraction = 1.0).
This gives a layout shift score of 1.0 and is essentially the worst type of shift.”
However, it reminds us of the cumulative nature of CLS:
“CLS is Cumulative Layout Shift, and the first word (cumulative) is important. We take all the individual shifts that occur within a short period of time (maximum 5 seconds) and sum them to get the CLS score.”
Pollard explained the reasons for the 5-second measurement window:
“Originally we aggregated ALL shifts, but that didn’t really measure UX – especially for pages that were open for long periods of time (think SPAs or email). Measuring all layers meant that even the best sites would fail given enough time!”
He also noted the theoretical maximum CLS score:
“Since each element can only move when a frame is drawn and we have a 5 second cap and most devices run at 60 fps, this gives a theoretical cap for CLS of 5 seconds * 60 fps * 1.0 max .Displacement = 300.”
Interpreting CLS results
Pollard addressed the interpretation of the CLS results:
“…it helps to think of CLS as a percentage of movement. The good threshold of 0.1 means that the page has moved by about 10% – which could mean that the entire page has moved by 10%, or half of the page has moved by 20%, or that many small movements are one of these corresponded to both values.”
Regarding the specific thresholds, Pollard explained:
“Why is 0.1 “good” and 0.25 “bad”? That’s explained here, as well as a combination of what we want (CLS = 0!) and what’s achievable… 0.05 was actually achievable in the median, but for many locations that wouldn’t be the case, so it worked a little higher.”
See also: How to measure key web vitals
Why this is important
Pollard’s insights give web developers and SEO professionals a clearer understanding of measurement and optimization for CLS.
When working with CLS, keep the following points in mind:
- CLS is unitless and is calculated from impact and distance components.
- It is cumulative and measures displacements over a 5 second window.
- The “good” threshold of 0.1 corresponds to approximately 10% of the viewport movement.
- CLS values can exceed 1.0 because multiple layers add up.
- The thresholds (0.1 for good, 0.25 for bad) balance ideal performance with achievable goals.
With this insight, you can make adjustments to meet Google’s threshold.
Featured Image: Swimming pool26/Shutterstock