Short answer: Cumulative Layout Shift (CLS) measures how much the visible content of a page moves when the visitor doesn’t expect it. It takes the largest burst of layout shifts during the whole life of the page. A good CLS is 0.1 or less, and above 0.25 is poor.
How CLS is calculated
A layout shift happens when a visible element changes its start position from one rendered frame to the next. A new element, or one that changes size, only counts if it moves other visible elements. Each shift gets a score: the impact fraction multiplied by the distance fraction, which measure how much of the viewport the moving elements affect and how far they move.
Shifts that come less than 1 second apart form a session window, which lasts 5 seconds at most. CLS is the score of the worst window, not the sum of every shift on the page.
Shifts within 500 milliseconds of a tap, click or keypress don’t count, because the visitor expects them. Scrolling, dragging and pinching don’t get that exception.
Common causes and their fixes
These are the most common causes of a poor CLS according to web.dev, plus animations.
| Cause | What happens | The fix |
|---|---|---|
| Images and videos without dimensions | The browser doesn’t know their size, so the content below moves when they load | Width and height attributes, or CSS aspect-ratio |
| Ads, embeds and iframes without reserved space | The slot grows when its content arrives and pushes the page down | Reserve the space with min-height or aspect-ratio |
| Banners and forms that pop in | They appear at the top or bottom and push the content | Reserve their space with a placeholder, or overlay them |
| Web fonts | When the web font replaces the fallback font, the text block and the content around it shift | font-display: optional, a closer fallback font with size-adjust, and preloaded critical fonts |
| Animations of top, left, width or height | Changing these properties moves other content | Animate with transform instead |
From web.dev, “Optimize Cumulative Layout Shift”, read November 3, 2026.
How to fix CLS
- Check your field data in PageSpeed Insights or Search Console, because lab tests only see the load.
- Run Lighthouse to see which elements shifted, then look above them: the cause is often a new element inserted there.
- Give every image and video width and height attributes, or reserve the space with CSS aspect-ratio.
- Reserve space for ads, embeds and iframes with min-height or aspect-ratio.
- Show banners and forms only after a tap or click, reserve their space in advance, or lay them over the content.
- Load fonts so the swap doesn’t move text: font-display: optional, a closer fallback with size-adjust and preloaded critical fonts. Our website fonts guide covers which fonts to choose.
- Animate with transform instead of top, left, width or height.
web.dev also suggests keeping your pages eligible for the back/forward cache (bfcache): a page restored from it starts again with a CLS of zero. Our guides to Core Web Vitals, PageSpeed Insights and lazy loading images go deeper into steps 1, 2 and 3.
CLS on our own pages
We measured 4 pages on November 3 with the PageSpeed Insights mobile test: home, SEO services, the blog index and our robots.txt guide. On all 4, CLS was 0 in the lab test.
Lighthouse listed no layout shift on any of them and flagged no unsized image. Our cookie notice floats over the page instead of pushing it down, the overlay option web.dev gives for banners.
But a lab test only sees the load. Shifts while a visitor scrolls, or when lazy-loaded content arrives without reserved space, only show up in field data. So a lab 0 is a good sign, and field data is what confirms it.
Before you call your CLS fixed
- Field data shows 0.1 or less, not only a lab test.
- Every image and video has width and height or an aspect-ratio.
- Ads, embeds and iframes have their space reserved.
- No banner or form pushes the content without a click.
- Web fonts don’t move the text when they load.
- Animations use transform.
RememberCLS is the worst burst of unexpected shifts in the whole visit, not only during the load. Reserve space for everything that arrives late, and confirm the result in field data.
If you want pages whose content doesn’t jump while they load, see our web design service.
Quick answers about CLS
What is a good CLS score?
Good is 0.1 or less, and poor is anything above 0.25, according to web.dev. Aim for at least 75% of page loads to meet it, measuring mobile and desktop separately.
Do layout shifts after a click count?
Not if they happen within 500 milliseconds of a tap, click or keypress, because the visitor expects them. Scrolling, dragging and pinching don’t get that exception, so content that jumps while someone scrolls still counts.
Why is my lab CLS 0 when Search Console says it’s poor?
Because lab tests usually load the page once and only see the shifts during that load. Search Console uses field data from real visits, which include scrolling, late content and interactions.
Does CLS add up every shift on the page?
Not anymore. It used to add up every shift in the life of the page. Now it groups shifts that come close together into session windows and keeps the window with the highest total.
Can animations hurt my CLS?
Yes, if they change top, left, width or height, since that moves other content. Animations with transform, such as translate or scale, don’t cause a new layout, so the content around them stays put.
Sources
Read on November 3, 2026. web.dev: Cumulative Layout Shift (CLS) and Optimize Cumulative Layout Shift. Our own case: the PageSpeed Insights mobile test on 4 of our pages, November 3, 2026.