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 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.

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





Source link

Related Posts