Cumulative Layout Shift (CLS) measures how much page content moves unexpectedly. A good score is 0.1 or less at the 75th percentile of visits.
Cumulative Layout Shift (CLS) is a Core Web Vitals metric that measures how much a page’s content moves around unexpectedly while someone is using it. A good CLS score is 0.1 or less, measured at the 75th percentile of real visits. Anything above 0.25 is rated poor.
You’ve felt bad CLS even if you didn’t know the name. You go to tap a link and an advert loads above it, so you tap the wrong thing. You start reading and a banner pushes the text down the screen. Each of those jumps is a layout shift.
CLS is one of the three Core Web Vitals Google uses as part of its page experience signals, alongside Largest Contentful Paint and Interaction to Next Paint. It’s often the easiest of the three to fix, because the causes are usually specific elements you can point to.
How CLS is calculated
Each unexpected shift gets a score based on two things: how much of the screen the moving content affected (the impact fraction) and how far it moved (the distance fraction). The two are multiplied together. A large element moving a long way scores high. A small element nudging a few pixels scores close to zero.
Shifts are grouped into session windows. A window collects shifts that happen less than one second apart, up to a maximum of five seconds. The page’s CLS is the score of its worst window, not the total of every shift over the visit. That change, made by Google in 2021, stops long-lived pages from being penalised just for being open a long time.
Not every movement counts. Shifts that happen within half a second of a user interaction, such as tapping a button that opens a menu, are expected and excluded. Animations that use CSS transforms don’t trigger layout shifts either.
CLS thresholds
| Rating | CLS score |
|---|---|
| Good | 0.1 or less |
| Needs improvement | Above 0.1, up to 0.25 |
| Poor | Above 0.25 |
To pass, at least 75% of visits to the page need to score 0.1 or less. Our guide to Core Web Vitals covers how CLS fits alongside the other two metrics.
How to measure CLS
Use field data to find out whether you have a problem, and lab tools to find the cause.
- Google Search Console: the Core Web Vitals report groups URLs by template and flags CLS issues on mobile and desktop.
- PageSpeed Insights: shows real-user CLS from the Chrome User Experience Report at the top, and a lab test underneath with an audit listing the elements that shifted.
- Chrome DevTools: record a page load in the Performance panel and the layout shifts appear on the timeline, with the moved elements highlighted.
- The web-vitals JavaScript library: lets you collect CLS from your own visitors and send it to your analytics.
One point catches people out. Lighthouse lab tests only measure shifts during page load. Field data measures the whole visit, including shifts caused by scrolling, lazy-loaded content and late adverts. So a page can score well in the lab and still fail in the field.
The common causes of layout shift
Most CLS problems come from a short list:
- Images and videos without dimensions. The browser doesn’t know how much space to reserve, so content jumps when the file arrives.
- Adverts, embeds and iframes without reserved space. Ad slots that expand when an ad loads are among the worst offenders.
- Content injected above existing content. Cookie banners, promo bars and “you might also like” blocks that push the page down.
- Web fonts. When a custom font replaces a fallback font of a different size, text reflows.
- Animations that change layout. Animating properties such as top, height or margin moves surrounding content.
How to fix CLS
Each cause has a well-known fix:
- Set width and height on every image and video, or use the CSS aspect-ratio property. Browsers then reserve the right space before the file loads.
- Reserve space for ads and embeds with a minimum height on the container, sized for the most common ad. Avoid collapsing the slot if no ad fills it.
- Don’t insert content above what’s already on screen, unless it’s in response to a user action. Show cookie notices and promo bars as overlays, or reserve their space from the start.
- Control font loading. Preload key fonts, and use font-display with size-adjusted fallback fonts so the swap barely changes line lengths.
- Animate with transforms. Use transform and opacity instead of properties that trigger layout.
- Allow the back/forward cache. Pages restored from the cache appear instantly with no shifts, so avoid blocking it.
After a fix, check the lab test straight away. The field data in PageSpeed Insights and Search Console takes up to 28 days to reflect the change, because it’s based on a rolling window of real visits. Our guide to improving Core Web Vitals and page speed covers fixes for the other metrics too.
How much CLS matters for SEO
CLS is a ranking signal, but a modest one. Google has been clear that relevance and helpful content matter far more, and a good page experience won’t rescue a page that doesn’t answer the query. Where it does matter is with users: content that jumps causes mis-taps, frustration and abandoned forms. That hurts conversions on every page, whatever it ranks. Our guide to page speed covers the wider picture.
If your templates are failing CLS and you can’t find the cause, our technical SEO agency can track it down and brief your developers. Book a free strategy session to talk it through.
Related reading: our guides to mobile-first indexing and technical SEO.
Common questions
What is a good CLS score?
A good CLS score is 0.1 or less. Between 0.1 and 0.25 needs improvement, and above 0.25 is poor. Google assesses it at the 75th percentile of real visits.
Why is my CLS fine in Lighthouse but poor in Search Console?
Lighthouse only measures layout shifts during page load. Search Console uses field data from real visits, which includes shifts after load, such as late adverts, lazy-loaded content and banners.
Does CLS affect rankings?
Yes, as part of Google’s page experience signals, but it’s a small factor next to relevance and content quality. Its bigger effect is on users, who leave or mis-tap when content jumps.
What causes the most layout shift?
Images without width and height, ads and embeds without reserved space, content inserted above the page, and web fonts swapping in are the most common causes.
