What is CLS (Cumulative Layout Shift)?
Cumulative Layout Shift (CLS) measures how much visible content unexpectedly moves while a page is open; a good score is 0.1 or less.
Cumulative Layout Shift (CLS) measures visual stability — how much content jumps around unexpectedly while someone is using a page. You know the feeling: you reach for a link, an ad loads above it, and you tap the wrong thing. CLS turns that annoyance into a number, and it is one of the three Core Web Vitals.
How the score works
Each unexpected shift is scored as impact fraction × distance fraction: how much of the viewport the moving elements affect, multiplied by how far they move relative to the viewport. Shifts are grouped into “session windows” — bursts in which shifts happen less than one second apart, capped at five seconds — and CLS is the score of the worst window, not a total for the whole visit (web.dev: CLS).
Shifts within 500 ms of a click, tap or key press are excluded, because expected movement, like an accordion opening, is fine.
Thresholds
Good is 0.1 or less, and poor is above 0.25, at the 75th percentile of real visits. CLS has no unit; it’s a score, not a time.
Common causes and fixes
| Cause | Fix |
|---|---|
| Images and videos without dimensions | Set width and height attributes, or CSS aspect-ratio |
| Ads, embeds and iframes that load late | Reserve the slot with min-height |
| Cookie banners and promo bars inserted at the top | Overlay them, or reserve their space from the start |
| Web fonts swapping and reflowing text | Preload key fonts and tune the fallback with size-adjust |
Animating top, height or margin | Animate transform and opacity instead |
Example: give the browser the shape in advance
<img src="/img/chart.webp" width="800" height="450" alt="Monthly sales chart">
<style>
img { max-width: 100%; height: auto; } /* still responsive */
.ad-slot { min-height: 250px; } /* room for a 300×250 ad */
</style>With width and height present, modern browsers compute the aspect ratio before the file arrives and hold that space open instead of collapsing it to zero.
Common mistakes
- Testing only the first load in a lab tool. CLS keeps counting while people scroll, so infinite feeds and late-loading ads often show up only in field data.
- Lazy-loaded images without dimensions. Lazy loading and layout shifts often travel together.
- Skeleton screens that don’t match the final layout in single-page apps, so everything moves when real content replaces them.
- Injecting “related posts” or newsletter boxes into the middle of an article after load.
Quick test: load your page on a phone with a throttled connection and watch the first five seconds. Anything that moves without you touching the screen is costing you CLS.
Check it
The page speed test shows field CLS from PageSpeed Insights when available. The image checker lists every image on a page with its dimensions and flags the ones that risk layout shifts.
Frequently asked questions
What is a good CLS score?
Google considers 0.1 or less good and anything above 0.25 poor, measured at the 75th percentile of real page visits on mobile and desktop separately.
Does CLS count layout shifts that happen while scrolling?
Yes. CLS is measured throughout the visit, so content that shifts as you scroll still counts. Only shifts within 500 ms of a click, tap or key press are excluded.
Why is CLS different in Lighthouse and in field data?
Lighthouse measures a single page load without scrolling or interaction. Field data records whole visits from real users, including late ads, cookie banners and infinite scroll, so it often shows higher CLS.