Cumulative Layout Shift (CLS) is the Core Web Vitals metric that measures visual stability — how much the visible content on a page unexpectedly moves during and after loading.
Cumulative Layout Shift, commonly abbreviated as CLS, is one of three Core Web Vitals metrics that Google uses to evaluate the quality of a page's user experience. Where Largest Contentful Paint (LCP) measures loading speed and Interaction to Next Paint (INP) measures responsiveness, CLS specifically measures visual stability — the degree to which the visible content on a page shifts position unexpectedly while the page is loading or after it has loaded.
A layout shift occurs when a visible element moves from one rendered position to another without being triggered by user interaction. When you visit a page, start reading an article, and then a banner loads above the text and pushes everything down — causing you to lose your place or accidentally click something you did not intend to click — that is a layout shift. CLS quantifies the cumulative impact of all such shifts during a page's lifetime.
The CLS metric is defined and maintained by Google and is measured using the browser's Layout Instability API, which tracks every moment a visible element moves without user instigation.
CLS is not simply a count of how many times content moves. It is a score derived from a mathematical formula that accounts for both how much of the viewport was affected and how far the elements moved. The formula for an individual layout shift entry is:
The impact fraction represents the proportion of the viewport that was affected by unstable elements across both the previous frame and the current frame. If an element occupied the top 50% of the viewport and then moved, the impact fraction would be at least 0.5.
The distance fraction represents the greatest distance any unstable element moved during the shift, divided by the larger dimension of the viewport (height or width). If an element moved 200 pixels and the viewport height is 800 pixels, the distance fraction is 0.25.
A shift where the impact fraction is 0.5 and the distance fraction is 0.25 would produce a layout shift score of 0.125 for that individual event.
Google updated the CLS calculation in 2021 to use a session window approach rather than summing all shifts across the entire page lifetime. A session window is a group of one or more layout shift events where each individual shift occurs within one second of the previous shift and the total window does not exceed five seconds. CLS is reported as the maximum session window score — in other words, the worst cluster of layout shifts that occurred during any five-second period on the page.
This refinement was introduced because early implementations penalized long-lived pages — such as single-page applications or pages that users keep open for extended periods — for shifts that occurred long after the initial load, even if those shifts were caused by deliberate user actions like scrolling to a new section. The session window approach focuses measurement on the most impactful burst of instability rather than a running total.
Not every element movement counts toward the CLS score. The Layout Instability API applies specific rules about which shifts are included and which are excluded.
A layout shift is counted when a visible element changes its start position — its top or left coordinates in the document — between two animation frames, without user input having occurred within the preceding 500 milliseconds. The key criteria are that the element must be visible (not hidden, display:none, or outside the viewport), and the movement must be unexpected.
Shifts that are explicitly excluded from CLS calculation include:
transform property changes (these are composited animations that do not cause layout recalculation)The 500-millisecond user input exclusion is important. If a user clicks a button and content shifts as a result, that shift is not counted toward CLS because it was expected from the user's perspective. The CLS metric is specifically designed to capture unexpected movement.
Google evaluates CLS against three performance tiers:
The page is visually stable. Content does not move unexpectedly. This score passes the Core Web Vitals assessment.
Users experience noticeable visual instability. Investigate and address the elements causing shifts.
Significant instability is present. This page fails the Core Web Vitals assessment and may receive reduced rankings.
These thresholds apply to the 75th percentile of real-user page views when field data is being evaluated. A page must have a CLS of 0.1 or below at the 75th percentile to pass the Core Web Vitals assessment in Google Search Console.
CLS can be measured in two distinct ways, and the results frequently differ from each other in meaningful ways.
Lab data is produced by tools like Lighthouse and Google PageSpeed Insights, which simulate a page load in a controlled environment using a defined network speed and device configuration. Lab data is useful for debugging because it is reproducible and deterministic. However, it captures only a single simulated load, which means it will miss layout shifts that occur due to ads loading differently for different users, personalized content, or shifts triggered by user behavior patterns that the simulation does not replicate.
Field data comes from the Chrome User Experience Report (CrUX), which aggregates real CLS measurements from actual Chrome users who have opted into usage reporting. Field data is what Google uses for the official Core Web Vitals assessment in Search Console. A page might pass CLS in lab conditions but fail in field data if, for example, a certain segment of users on slower connections experiences additional layout shifts from late-loading resources that the lab simulation does not encounter.
Understanding what causes layout shifts is the first step toward reducing them. The most frequent sources of high CLS scores fall into several predictable categories.
When a browser encounters an <img> element without explicit width and height attributes, it cannot reserve space for that image in the layout before the image file downloads. As a result, surrounding content renders without the image, and then shifts downward when the image arrives and the browser creates space for it. The fix is straightforward: always declare the natural dimensions of every image and video element.
Content inserted into the page after the initial render — such as cookie consent banners, promotional notifications, chat widget launchers, or personalization modules — frequently displaces existing content by appearing above it in the document flow. This category of layout shift is particularly problematic because it is often controlled by third-party scripts over which the site owner has limited control.
When a browser loads a web font, it may initially render text using a fallback system font and then swap to the web font once it has downloaded. If the two fonts have different metrics — different character widths, line heights, or letter spacing — the text reflows when the font swap occurs, shifting surrounding content. This is a subtle but common cause of small CLS scores.
Ad slots that do not have a reserved minimum height before the ad loads are a major and persistent source of layout shift, particularly on ad-heavy pages. The ad network delivers creative of varying dimensions, and without a pre-allocated space, the ad's arrival pushes content out of position. The same issue affects social media embeds, interactive maps, and other third-party widgets with variable heights.
CSS animations and transitions that modify properties such as top, left, margin, height, or width trigger full layout recalculation and can cause surrounding elements to shift. Animations using transform: translate() or transform: scale(), by contrast, are handled by the compositor thread and do not affect the document layout.
CLS has a direct impact on user experience in measurable ways. Research consistently shows that unexpected content movement frustrates users, increases error rates on touch interfaces, and undermines trust in a website. A user who clicks a link and instead taps an ad because the content shifted at the wrong moment has had a meaningfully negative experience — and that experience affects whether they return.
From an SEO perspective, Google incorporated Core Web Vitals — including CLS — into its ranking signals beginning in 2021 as part of the Page Experience update. Pages that pass all three Core Web Vitals thresholds at the 75th percentile receive a "Good page experience" designation in Search Console. While Core Web Vitals are not the dominant ranking factor, they are a confirmed signal, and poor CLS is directly associated with lower engagement metrics, higher bounce rates, and reduced conversion rates — all of which have downstream effects on a site's organic performance.
Use our free CLS checker to instantly measure any page's Cumulative Layout Shift score, identify which elements are causing shifts, and get specific recommendations for fixing them.
Run the Free CLS TestNow that you understand what Cumulative Layout Shift is and how it is calculated, the logical next step is learning how to measure it accurately and how to fix the specific issues affecting your pages.