CumulativeLayoutShift.com
Test any URL for CLS — Google's Core Web Vitals metric that measures visual stability. Find out your score, which elements are shifting, and what's causing them.
Running PageSpeed Insights analysis… this typically takes 10–30 seconds.
Google evaluates Cumulative Layout Shift against three performance tiers. These thresholds are used for both the Core Web Vitals assessment in Search Console and the Lab score from Lighthouse.
Your page is visually stable. Content does not move unexpectedly during loading. This score passes the Core Web Vitals assessment.
Users experience noticeable visual instability. Some content is shifting unexpectedly during page load. Investigate and remediate the causes.
Significant visual instability is affecting the user experience. This page fails the Core Web Vitals assessment and may receive reduced rankings.
Google measures CLS at the 75th percentile of real-user page views (field data). A score that is Good in lab conditions may still be Poor in field data if certain user segments — slower devices, ad-heavy sessions, or users with slow connections — experience additional shifts.
Cumulative Layout Shift (CLS) is one of three Core Web Vitals metrics used by Google to evaluate page experience. It measures visual stability — specifically, how much the visible content on a page unexpectedly shifts position during the loading process.
CLS is calculated using the browser's Layout Instability API, which tracks every moment a visible element moves from one position to another without the user initiating the movement (such as by scrolling or clicking). Each such movement is called a layout shift. The CLS score aggregates these shifts by measuring the fraction of the viewport that moved and how far it moved.
The formula for a single layout shift entry is:
The impact fraction is the proportion of the viewport affected by the shift. The distance fraction is the greatest distance any element moved, divided by the larger viewport dimension. CLS is then the sum of all layout shift scores that did not occur within 500 milliseconds of user input.
Common causes of high CLS include images or video embeds without explicit width and height dimensions, web fonts that cause a flash of unstyled text followed by a reflow, dynamically injected banners or cookie notices appearing above existing content, third-party embeds (ads, chat widgets, social buttons) with unspecified dimensions, and animations that use properties triggering layout recalculation rather than transforms.
Google incorporated Core Web Vitals — including CLS — into its ranking signals beginning in 2021. Pages that pass all three Core Web Vitals thresholds (CLS, Largest Contentful Paint, and Interaction to Next Paint) earn 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 directly harms user engagement, conversion rates, and ad revenue — all of which have downstream effects on organic performance.
Improving CLS almost always involves identifying the specific elements that are shifting (which this tool shows you) and then addressing the root cause for each. The following remediation approaches cover the most common sources of high CLS scores.
The most common cause of layout shift is images and video embeds without explicit width and height attributes. When the browser encounters an image without dimensions, it cannot reserve space for it in the layout before the file loads, so the image pushes surrounding content downward when it finally appears. The fix is to add width and height attributes to every <img> and <iframe> element, and to set aspect-ratio in your CSS for responsive images.
Ad slots, social embeds, and cookie consent banners injected above existing content are a major source of unexpected shifts. Reserve space for these elements before they load using min-height on their container, or load them in a way that does not displace existing content — for example, using a fixed-position overlay rather than injecting into the document flow.
Web fonts cause CLS when the browser renders fallback text in a different typeface and then swaps to the web font after it downloads, causing surrounding elements to reflow. Use font-display: optional or font-display: swap with appropriately sized fallback fonts, and preload key font files in the <head> using <link rel="preload">. The CSS size-adjust and ascent-override descriptors can be used to match the fallback font's metrics closely to the web font, reducing visible shift.
Dynamic content — user-triggered alerts, banners, chat widgets, personalization modules — should be designed to load below the fold or in a way that does not push rendered content downward. If content must appear above existing elements, animate it using transform rather than changing its height or top values, as transform-based animations do not trigger layout recalculation.
Animations that modify top, left, margin, height, or width force the browser to recalculate layout, which can contribute to CLS if they affect other elements. Animations using transform: translate(), scale(), or opacity are composited on the GPU and do not cause layout shifts.
