Definition
Cumulative Layout Shift is a score for how much visible content moves unexpectedly while you use a page. It is the visual stability measure among Google's three Core Web Vitals, and a good CLS is 0.1 or less. It is a score, not a time.
Example. You go to tap a button, an ad loads above it, and the button drops out from under your thumb. That jump is a layout shift, and CLS scores the worst burst of them.
You can see your page's CLS from real visitors, next to sites ranking in your niche, with the free Is My Page Speed Really a Problem? tool.
What is a good CLS score?
A good CLS score is 0.1 or less. Over 0.25 is poor, and the band in between needs improvement. The score has no unit: it combines how much of the screen moved with how far it moved, so a small element jumping a long way and a large one nudging slightly can score the same.
| CLS | Band |
|---|---|
| 0.1 or less | Good |
| Over 0.1 and up to 0.25 | Needs improvement |
| Over 0.25 | Poor |
How often do ranking sites fail CLS?
Ranking sites fail CLS less often than LCP, but not rarely. In our benchmark of 38,950 domains ranking across 12 niches and 5 markets (July 2026 field data, phones), between 3% and 21% of the measured sites in a niche and market group failed CLS. It was not the most common failure in any of the 60 groups.
The usual limits apply. These are sites ranking in a niche and market, not an industry average, and the data has no ranking variable, so it shows how common a failing CLS is, not what it costs.
How is CLS calculated?
CLS is calculated from the largest burst of layout shifts, not the total across the visit. Each shift scores its impact fraction, the share of the viewport affected, multiplied by its distance fraction, how far the content moved. Shifts less than 1 second apart group into one burst, capped at 5 seconds, and the worst burst is the page's CLS.
Shifts within 500 milliseconds of a click, tap or key press are expected rather than unexpected, and can be left out. Content that moves because you opened a menu is not a CLS problem; content that moves while you read is.
What causes CLS, and how do you improve it?
CLS is caused mostly by content that arrives without space reserved for it: images, ads, embeds and web fonts. These are the common causes web.dev lists, and the fix for each.
| Cause | Fix |
|---|---|
| Images and videos without dimensions | Set width and height attributes, or reserve the space with CSS aspect-ratio |
| Ads, embeds and iframes without reserved space | Reserve the space with min-height, and do not collapse it if nothing loads |
| Web fonts swapping in | Use font-display: optional, match the fallback with size-adjust, and preload critical fonts |
Animating top or left | Animate with transform instead |
One more lever costs nothing to design for: pages the browser can keep in its back/forward cache come back already laid out, which web.dev calls a highly effective way to keep CLS low.
Sources
- web.dev: Cumulative Layout Shift (CLS)
- web.dev: Optimize Cumulative Layout Shift
- Google Search Central: Understanding Core Web Vitals and Google search results
- Hawk Academy: Core Web Vitals benchmark of sites ranking in 12 niches and 5 markets
Last checked against these sources on 26 October 2026.