What is Cumulative Layout Shift (CLS)?
A Core Web Vital that measures how much visible content unexpectedly shifts during page loading.
Definition
Cumulative Layout Shift (CLS) is a Core Web Vital that quantifies how much visible content unexpectedly moves around during the entire lifespan of a page. It measures visual stability by calculating a score based on the fraction of the viewport affected by layout shifts and the distance elements moved. CLS only counts unexpected shifts, user-initiated changes (like clicking a button that expands a section) do not count against your score. Google considers a CLS of 0.1 or less as good.
CLS is calculated using a session window approach: layout shifts that occur within 1 second of each other are grouped into session windows, and the score is the maximum session window score rather than the sum of all shifts. This means a page can have multiple small shifts throughout its lifecycle without a high CLS score, but a burst of significant shifts in a short period will produce a poor score. The formula for each shift is: impact fraction (percentage of viewport affected) multiplied by distance fraction (how far elements moved as a percentage of viewport).
Why It Matters
Layout shifts create a frustrating user experience. When buttons, text, or images suddenly jump to different positions, visitors may accidentally click the wrong thing, lose their reading position, or simply feel disoriented. High CLS is especially problematic on mobile devices where screens are smaller and shifts are more jarring. As a Core Web Vital, CLS is also a Google ranking factor, so poor visual stability can hurt both user experience and search visibility.
The most damaging scenario is when a layout shift causes a visitor to click the wrong element. Imagine a user about to tap a link, but an ad loads above it and pushes the link down just as they tap, they end up clicking the ad instead. This kind of interaction frustration drives visitors away and erodes trust. CLS problems are often invisible to developers because they occur under specific loading conditions (slow networks, cold caches) that desktop testing environments don't replicate. Field data from real users is essential for accurately assessing CLS.
How to Measure
Measure CLS using Google PageSpeed Insights, Chrome DevTools (Performance tab), or the Web Vitals JavaScript library. Google Search Console reports field CLS data from real users. Target thresholds: under 0.1 is good, 0.1-0.25 needs improvement, and above 0.25 is poor. When debugging, use Chrome DevTools to highlight layout shifts in real time and identify which elements are moving and why.
In Chrome DevTools, enable the Layout Shift Regions overlay (under the Rendering drawer) to see layout shifts highlighted with blue rectangles as they occur during page load. The Performance tab records individual layout shift events with details about which elements moved, how far they moved, and what triggered the shift. Pay special attention to CLS that occurs during scrolling or after delayed resource loading, as these shifts may not appear in initial lab tests but affect real users who interact with the page while it's still loading resources.
How Racoons.ai Helps
Racoons.ai evaluates layout stability as part of its performance audits and uses AI visual analysis to identify visible content shifts across desktop, mobile, and full-page screenshots. Our analysis flags common CLS culprits like images without dimensions, dynamically injected content, and late-loading web fonts, with specific fixes to stabilize your page layout.
Best Practices
Always specify explicit width and height attributes on all images and video elements so the browser can reserve the correct amount of space before the resource loads. For responsive images, use CSS aspect-ratio as an alternative to width/height attributes. Reserve space for dynamically loaded content (ads, embeds, lazy-loaded components) using CSS min-height, aspect-ratio, or placeholder containers so the surrounding content doesn't shift when the dynamic element appears.
Use font-display: swap combined with size-adjusted fallback fonts to minimize text reflow when web fonts load. The @font-face size-adjust, ascent-override, and descent-override properties let you match fallback font metrics to your web font, reducing the visible shift when fonts swap. Never insert new content above existing visible content unless in response to a user action, if a banner or notification needs to appear, either push content down before it's visible or use a fixed/overlay position that doesn't affect layout. Test CLS on slow connections where resources load incrementally, as this is when shifts are most likely to occur.
Put this knowledge into action
Understanding the metrics is the first step. Racoons.ai uses AI to analyze your website and tell you exactly what to improve, in plain English.
Try the full analysis free