CLS: definition, calculation, and how to fix it
Updated on February 22, 2026
Quick definition
CLS (Cumulative Layout Shift) is a Core Web Vitals metric measuring the visual instability of a web page during loading — the sum of unexpected layout shifts. CLS is good below 0.1, needs improvement between 0.1 and 0.25, and poor beyond that. It quantifies the frustrating experience where page elements "jump" during load, causing accidental clicks.
How it works
Formula
CLS score = Σ (impacted surface fraction × distance fraction) for each layout shift within 5-second session windows
Example: an element covering 50% of the screen that moves 25% of the viewport height = a layout shift score of 0.125
Each layout shift is computed by multiplying the impacted area fraction (the proportion of the visible area affected) by the distance fraction (the relative movement distance). The CLS score is the sum of all such shifts within 5-second session windows.
Official Google thresholds:
- Good (green): below 0.1
- Needs improvement (orange): between 0.1 and 0.25
- Poor (red): beyond 0.25
Common causes of poor CLS include:
- Images and videos without explicit dimensions (`width`/`height`)
- Dynamically loaded ads, embeds, or iframes
- Fonts triggering FOUT (Flash of Unstyled Text)
- Elements injected by JavaScript above existing content
Why it matters
A high CLS score creates a frustrating user experience: accidental clicks, lost reading position, a sense of visual instability. This frustration translates directly into higher bounce rates and lower conversion rates.
Google included CLS in the Core Web Vitals because it is one of the most frequently cited abandonment factors by users. A good CLS also contributes to the perceived quality and professionalism of the site.
How to improve or use it
- 1Always set explicit `width` and `height` attributes on your images and videos so the browser reserves space before loading.
- 2Use `min-height` for ad and embed zones.
- 3Preload your fonts and use `font-display: swap` to prevent typographic shifts.
- 4Avoid inserting content above existing visible content via JavaScript.
- 5Audit your layout shifts with the Performance tab in Chrome DevTools or PageSpeed Insights.
With Sublim
Sublim lets you correlate your CLS scores per page with your conversion rate and bounce rate data in real time. You can prioritize fixing high-traffic pages where high CLS is actually costing you customers — all data collected without cookies, in full GDPR compliance.
Frequently asked questions
How do I identify the elements responsible for poor CLS?
The most precise tool is the Performance tab in Chrome DevTools: enable recording at page load and look for 'Layout Shift' events. PageSpeed Insights and the Web Vitals Debugger Chrome extension also help visually identify the elements that move. The CSS `content-visibility` property can also help isolate problems.
Do CSS animations affect CLS?
Not necessarily. Google excludes from CLS calculation shifts caused by user interactions (clicks, key presses) that happen within 500 ms of the interaction. CSS animations using `transform` rather than layout-modifying properties (top, left, margin) also do not affect CLS, as they do not trigger layout recalculation.
Is good CLS enough to rank well in Google?
CLS is one of three Core Web Vitals (with LCP and INP) that constitute a page experience signal. Good CLS alone is not enough: all three metrics must be in the green for the signal to be positive. Furthermore, content and domain authority remain dominant in overall ranking.
Related terms
Core Web Vitals are a set of three metrics defined by Google to object…
LCP (Largest Contentful Paint) is a [Core Web Vitals](core-web-vitals)…
INP (Interaction to Next Paint) is the [Core Web Vitals](core-web-vita…
The bounce rate is the percentage of [sessions](session) in which a us…