Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) is a Core Web Vitals metric that measures how much visible content unexpectedly moves on a page during its lifespan, quantifying visual stability as a score where lower values indicate a more stable, user-friendly experience.

What Cumulative Layout Shift Means in Practice

You’ve experienced CLS even if you’ve never heard the term. You’re reading an article on your phone, you’re about to tap a link, and suddenly the text jumps down the page because an ad loaded above it. You tap the wrong thing. You’re frustrated. That frustration is what CLS quantifies.

Cumulative Layout Shift is one of three Core Web Vitals that Google uses as page experience signals for ranking. Where Largest Contentful Paint (LCP) measures loading speed and Interaction to Next Paint (INP) measures responsiveness, CLS measures visual stability. It answers a deceptively simple question: does the page stay where it’s supposed to, or does content jump around while the user is trying to interact with it?

The metric works by tracking every unexpected layout shift that occurs during a page’s entire lifespan, not just during initial load. Each shift produces a layout shift score calculated by multiplying two values: the impact fraction (the percentage of the viewport affected by the shift) and the distance fraction (how far the element moved relative to the viewport). CLS is the largest burst of layout shift scores within a session window, where a session window is defined as one or more consecutive layout shifts occurring less than one second apart, capped at a maximum of five seconds. This “session window” approach, introduced by the Chrome team in 2021, replaced the original cumulative-for-the-entire-page-lifespan calculation and provides a fairer measurement for long-lived pages like single-page applications.

A common misconception is that CLS only matters during the initial page load. That’s not how the metric works. CLS captures shifts that happen at any point, including those triggered by lazy-loaded images, dynamically injected content, or user-initiated actions that cause unexpected reflows. If a user scrolls down a page and an image loads without a reserved space, that shift counts. If a font swap causes text to reflow after the page appears fully loaded, that counts too.

In practice, the most frequent CLS problems we see across client sites fall into a few predictable categories. Images and videos without dimensions are the single most common cause. When the browser doesn’t know the size of a media element before it loads, it reserves zero space and then pushes everything else down once the asset renders. Late-loading ads and embeds are the second most common culprit, particularly on content-heavy sites where third-party scripts inject elements into the page after the initial render. Web fonts that trigger a FOIT/FOUT swap cause text to reflow when the custom font replaces the fallback. And dynamically injected content above the fold, such as notification bars, cookie consent banners, or promotional overlays that push page content down rather than overlaying it, round out the list.

For multi-location businesses with hundreds of location pages built from templates, CLS issues tend to be systemic rather than isolated. A single template with an unoptimized hero image or an ad unit without reserved space creates the same CLS problem across every page that uses that template. We routinely find that fixing one template-level issue improves CLS scores across dozens or hundreds of pages simultaneously. That’s the upside of template-driven architectures: the problems are consistent, and so are the fixes.

Why Cumulative Layout Shift Matters for Your Marketing

CLS matters because it directly affects how users interact with your site and how Google evaluates your pages. A page with a high CLS score isn’t just annoying. It’s actively pushing visitors away from the actions you want them to take.

The business impact is measurable. Google’s own research found that sites meeting all three Core Web Vitals thresholds saw significantly lower abandonment rates and higher engagement. When it comes to CLS specifically, layout shifts during critical interactions, like clicking a “Book Appointment” button or filling out a contact form, directly increase form abandonment and reduce conversion rates. For healthcare practices, ecommerce sites, and professional services firms where conversion is the entire point of the web presence, poor CLS scores translate to lost revenue.

From an SEO perspective, CLS is one of three Core Web Vitals that factor into Google’s page experience ranking signal. While content relevance and backlinks still carry more weight, Core Web Vitals serve as a tiebreaker between pages of similar authority and relevance. If your competitor’s page has comparable content and a CLS score of 0.05 while yours sits at 0.3, their page has a measurable ranking advantage. In competitive verticals where margins between positions are thin, that advantage compounds over time.

Your CLS score also affects how your pages appear in Google Search Console reports. Pages with “Poor” CLS assessments are flagged in the Core Web Vitals report, and those flags influence how Google prioritizes crawling and indexing your site. For large sites with thousands of pages, systemic CLS issues can create a drag on organic traffic growth that’s difficult to diagnose without looking at the performance data.

How Cumulative Layout Shift Works

Understanding the mechanics of CLS helps you diagnose issues faster and avoid introducing new ones.

The scoring thresholds are defined by Google. A CLS score of 0.1 or lower is rated “Good.” Between 0.1 and 0.25 is “Needs Improvement.” Above 0.25 is “Poor.” These thresholds are based on the 75th percentile of page loads, meaning Google evaluates your CLS based on how 75% of your real users experience the page, not how it performs in a lab test. This distinction matters because lab tools like Lighthouse test a single simulated load, while field data from the Chrome User Experience Report (CrUX) reflects actual user conditions including slower devices, varied network speeds, and different viewport sizes.

The calculation itself is straightforward but nuanced. For each unexpected layout shift, the browser calculates: layout shift score = impact fraction x distance fraction. If a 400px-tall element shifts down by 100px in a 900px viewport, the impact fraction is (400 + 100) / 900 = 0.556 (the area of the viewport affected before and after the shift), and the distance fraction is 100 / 900 = 0.111. The layout shift score for that single event would be 0.556 x 0.111 = 0.062. CLS then takes the largest “session window” of these scores, not the sum of every shift across the entire page session.

Critically, only unexpected shifts count. Layout shifts that occur within 500 milliseconds of a user interaction (taps, clicks, key presses) are excluded from CLS. This means that expanding an accordion, opening a dropdown menu, or toggling a navigation panel won’t penalize your score as long as the shift is a direct response to the user’s action. The key word is “unexpected.” If the user didn’t cause it, it counts.

Common diagnostic mistakes include relying solely on Lighthouse scores without checking field data. Lighthouse runs a simulated load on a single viewport under controlled conditions. It might show a CLS of 0.02 for a page that has a field CLS of 0.35 because the lab test doesn’t trigger the late-loading ad that real users encounter. Always cross-reference lab results with CrUX data in Google Search Console or PageSpeed Insights field data. The other common mistake is fixing the most visible shift rather than the one with the highest score. A large image that shifts the entire page layout by 20px has a much higher CLS contribution than a small badge icon that jumps 50px, because the impact fraction is what drives the score.

Fixing CLS follows a clear priority order. First, add explicit width and height attributes (or CSS aspect-ratio) to all images and video elements. Second, reserve space for ads and embeds using CSS min-height on their container elements. Third, preload web fonts and use font-display: swap or font-display: optional to control the swap behavior. Fourth, avoid inserting content above existing content unless it’s in response to a user interaction. These four fixes address the vast majority of CLS issues across most websites.

External Resources

• Cumulative Layout Shift (CLS) on web.dev — Google’s official documentation on CLS, including the metric definition, scoring methodology, and session window calculation
• Optimize Cumulative Layout Shift on web.dev — Google’s prescriptive guide to diagnosing and fixing common CLS issues, with code examples
• Core Web Vitals on web.dev — Overview of all three Core Web Vitals metrics and their thresholds, including how they factor into page experience signals
• Search Engine Journal: CLS and SEO — Analysis of how Core Web Vitals, including CLS, function as ranking factors in practice
• HTTP Archive Web Almanac: Performance — Annual data on real-world CLS scores across millions of websites, providing industry benchmarks

Related Resources

• Website Speed and SEO: What the Data Says About Rankings, Conversions, and Revenue — Deep dive into the measurable relationship between page speed metrics (including CLS) and business outcomes
• JavaScript SEO: What Your Framework Choice Means for Search Visibility — How JavaScript frameworks affect rendering behavior and performance metrics, including layout stability
• The Technical SEO Audit Guide — Practitioner methodology for auditing technical SEO, including Core Web Vitals assessment across large sites
• The Ultimate SEO Checklist for 2026 — Complete SEO framework that includes Core Web Vitals optimization as part of the technical foundation

Related Glossary Terms

• Core Web Vitals: Google’s set of three page experience metrics (LCP, INP, CLS) that measure loading, interactivity, and visual stability. CLS is the visual stability component of this trio.
• Page Speed: The measure of how quickly a web page loads and becomes interactive. Page speed and CLS are related but distinct: a page can load quickly but still have poor visual stability if elements shift after rendering.
• Responsive Design: A web design approach that adapts layout and content to different screen sizes and devices. Responsive breakpoints are a common source of CLS issues when images, grids, or navigation elements resize without proper dimension reservations.
• Mobile-First Indexing: Google’s practice of using the mobile version of a page for indexing and ranking. Because CLS issues are often more severe on mobile viewports, mobile-first indexing makes CLS optimization on mobile particularly important for search visibility.