Google Clarifies How Cumulative Layout Shift (CLS) is Measured

Google's Web Performance Developer Advocate, Barry Pollard, recently provided a detailed explanation of how Cumulative Layout Shift (CLS) is measured, a key metric within Google’s Core Web Vitals. CLS quantifies the amount of unexpected visual movement on a webpage while a user is interacting with it. This measurement is important for both user experience and SEO, as pages with a low CLS score tend to offer a more stable browsing experience, which can positively impact search rankings.

What is Cumulative Layout Shift?

Cumulative Layout Shift (CLS) is one of the three Core Web Vitals that Google uses to assess the overall user experience of a webpage, along with Largest Contentful Paint (LCP) and Interaction to Next Paint (INP). Unlike LCP and INP, which are measured in seconds or milliseconds, CLS is unitless, focusing on the unexpected layout shifts that occur when content moves on the page during loading or interaction.

Layout shifts are disruptive to the user experience, as they can cause a user to click on the wrong item or make content harder to read. A low CLS score indicates fewer layout shifts and a smoother experience for visitors, which may lead to better SEO outcomes.

How is CLS Measured?

Barry Pollard shared an in-depth breakdown of how CLS is calculated in a series of posts on X (formerly Twitter). He clarified that each layout shift is measured by combining two key factors:

• Impact Fraction: The percentage of the screen affected by the shift.
• Distance Fraction: How far the element has moved relative to its initial position.

The CLS score is calculated by multiplying these two fractions. As Pollard explains, if the entire viewport (100%) moves down by one full viewport, this would be considered a major shift and would yield the worst possible CLS score of 1.0. Smaller movements, or movements that affect only part of the viewport, would result in lower CLS scores.

Understanding the Worst-Case Scenario

The worst-case scenario for CLS is when 100% of the viewport shifts by one full screen’s worth of movement, which would give a score of 1.0. However, it’s important to note that CLS measures cumulative shifts, meaning that all layout shifts that happen within a short period (up to 5 seconds) are added together to form the final CLS score.

Pollard pointed out that previously, Google considered all layout shifts over the entire duration of a session. However, this didn’t accurately reflect user experience, especially for Single Page Applications (SPAs) or web pages that remain open for long periods, such as email clients. By limiting the measurement window to 5 seconds, Google ensures that the CLS score more accurately reflects short-term user interactions.

Theoretical Maximum CLS Score

Because each element can only shift when a new frame is drawn, and most devices run at 60 frames per second (fps), the theoretical maximum CLS score would be 300. This is derived from the formula:

5 seconds × 60 fps × 1.0 max shift = 300.

This theoretical cap represents the worst possible CLS scenario, though most websites will never approach this number.

Interpreting CLS Scores

Pollard also provided guidance on interpreting CLS scores. CLS scores represent the cumulative percentage of layout movement on the page. A score of 0.1, for example, equates to roughly 10% of the page shifting unexpectedly. This could mean that the entire page shifted by 10%, or that half the page shifted by 20%, or it could be the result of numerous smaller movements adding up.

Google’s recommended thresholds for CLS are:

• Good: A CLS score of 0.1 or lower.
• Needs Improvement: Between 0.1 and 0.25.
• Poor: 0.25 and above.

These thresholds were established based on a balance between optimal user experience (where the ideal CLS would be 0) and what is realistically achievable by most websites. While a median score of 0.05 was once achievable, it was found to be too difficult for many sites to consistently meet, so the threshold was adjusted slightly higher to 0.1.

Why CLS Matters for SEO and UX

Optimizing for CLS is essential for both user experience and search engine rankings. A low CLS score enhances usability, providing a smoother and less disruptive experience. Additionally, because CLS is part of the Core Web Vitals, improving it can lead to better search visibility. By understanding how CLS is measured and how-to improve it, web developers and SEO professionals can make targeted adjustments to achieve better performance and meet Google’s thresholds.

Key Takeaways for Web Developers

1. CLS is unitless, calculated from the impact and distance fractions of layout shifts.
2. CLS is cumulative, measuring all shifts that occur within a 5-second window.
3. Good CLS scores are those below 0.1, equivalent to 10% of the page moving.
4. CLS scores can exceed 1.0 if multiple shifts occur within the measurement window.
5. Google's thresholds are designed to balance ideal performance with achievable results.

Understanding and optimizing CLS can significantly enhance both user experience and SEO outcomes, making it a critical component of web performance strategies.