Google’s Web Performance Developer Advocate, Barry Pollard, has clarified how Cumulative Layout Shift (CLS) is measured.
CLS quantifies how much unexpected layout shift occurs when a person browses your site.
This metric matters to SEO as it’s one of Google’s Core Web Vitals. Pages with low CLS scores provide a more stable experience, potentially leading to better search visibility.
How is it measured? Pollard addressed this question in a thread on X.
For Core Web Vitals what is CLS measured in? Why is 0.1 considered not good and 0.25 bad, and what do those numbers represent?
I’ve had 3 separate conversations on this with various people in last 24 hours so figured it’s time for another deep dive thread to explain…
🧵 1/12 pic.twitter.com/zZoTur6Ad4
— Barry Pollard (@tunetheweb) October 10, 2024
Understanding CLS Measurement
Pollard began by explaining the nature of CLS measurement:
“CLS is ‘unitless’ unlike LCP and INP which are measured in seconds/milliseconds.”
He further clarified:
“Each layout shift is calculated by multipyling 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 whole viewport moves all the way down – that’s worse than just half the view port moving all the way down. The whole viewport moving down a little? That’s not as bad as the whole viewport moving down a lot.”
Worse Case Scenario
Pollard described the worst-case scenario for a single layout shift:
“The maximum layout shift is if 100% of the viewport (impact fraction = 1.0) is moved one full viewport down (distance fraction = 1.0).
This gives a layout shift score of 1.0 and is basically the worst type of shift.”
However, he reminds us of the cumulative nature of CLS:
“CLS is Cumulative Layout Shift, and that first word (cumulative) matters. We take all the individual shifts that happen within a short space of time (max 5 seconds) and sum them up to get the CLS score.”
Pollard explained the reasoning behind the 5-second measurement window:
“Originally we cumulated ALL the shifts, but that didn’t really measure the UX—especially for pages opened for a long time (think SPAs or email). Measuring all shifts meant, given enough, time even the best pages would fail!”
He also noted the theoretical maximum CLS score:
“Since each element can only shift when a frame is drawn and we have a 5 second cap and most devices run at 60fps, that gives a theoretical cap on CLS of 5 secs * 60 fps * 1.0 max shift = 300.”
Interpreting CLS Scores
Pollard addressed how to interpret CLS scores:
“… it helps to think of CLS as a percentage of movement. The good threshold of 0.1 means about the page moved 10%—which could mean the whole page moved 10%, or half the page moved 20%, or lots of little movements were equivalent to either of those.”
Regarding the specific threshold values, Pollard explained:
“So why is 0.1 ‘good’ and 0.25 ‘poor’? That’s explained here as was a combination of what we’d want (CLS = 0!) and what is achievable … 0.05 was actually achievable at the median, but for many sites it wouldn’t be, so went slightly higher.”
See also: How You Can Measure Core Web Vitals
Why This Matters
Pollard’s insights provide web developers and SEO professionals with a clearer understanding of measuring and optimizing for CLS.
As you work with CLS, keep these points in mind:
- CLS is unitless and calculated from impact and distance fractions.
- It’s cumulative, measuring shifts over a 5-second window.
- The “good” threshold of 0.1 roughly equates to 10% of viewport movement.
- CLS scores can exceed 1.0 due to multiple shifts adding up.
- The thresholds (0.1 for “good”, 0.25 for “poor”) balance ideal performance with achievable goals.
With this insight, you can make adjustments to achieve Google’s threshold.
Featured Image: Piscine26/Shutterstock