DefinitionA Core Web Vitals metric that measures how much visible page content moves unexpectedly while the page loads and during use. Good is a score of 0.1 or less.
Cumulative Layout Shift (CLS) is a Core Web Vitals metric that measures how much visible page content moves unexpectedly while the page loads and during use, with a score of 0.1 or less counting as good. It is one of the three Core Web Vitals, next to loading speed (LCP) and responsiveness (INP). Every time text, a button or an image jumps without the visitor asking for it, the page collects layout shift, and CLS is the total of the worst burst of those shifts.
The common misunderstanding is that CLS is a speed metric. A page can load in under a second and still score badly, because the metric only cares about stability: does content stay where it first appeared? Shop owners also assume a shift is harmless because it lasts “only a moment”. That moment usually coincides with a tap, and that is exactly when a jump does damage.
Why CLS matters for a webshop
A layout shift on a product page has a direct cost. The classic case is the “add to cart” button that moves down when price or stock loads via AJAX, so the tap lands on a wishlist icon instead. On a PrestaShop or WooCommerce category page, a late cookie banner pushing the grid down means the product the visitor was about to click is suddenly somewhere else. Each of those moments costs a click, and on mobile it costs conversions.
CLS also feeds into how Google assesses your pages. Page experience is a lightweight ranking factor, so I never promise rankings from a better score alone, but a shop that fails Core Web Vitals across many URLs gives Google one more reason to prefer a competitor. The practical point is that a stable page keeps visitors scrolling and buying, and that shows up in conversion long before it shows up in the SERP.
How to measure CLS
Google scores CLS on field data at the 75th percentile: good is 0.1 or less, needs improvement is up to 0.25, and poor is anything above 0.25. The score is the impact fraction (how much of the viewport moved) multiplied by the distance fraction (how far), summed within a session window. Only unexpected shifts count; a shift within 500 milliseconds of a tap or click is excluded. I start with the Core Web Vitals report in Google Search Console to see which URL groups fail, then open PageSpeed Insights for one product or category URL to compare field data with a fresh lab run.
To find the element that moves, I use the Performance panel in Chrome DevTools, which highlights layout shift regions and names the node behind each shift. For a quick check, the Core Web Vitals Checker on this site pulls the same field and lab numbers for any URL. For clients with monitoring I plot CLS per template in Looker Studio, so a regression after a theme update or a new app is visible within days.
Common CLS mistakes
Images without dimensions. Product and banner images that lack width and height attributes (or a CSS aspect-ratio) take up zero space until they load, then push everything below them down. This is the most frequent cause of layout shift I find in webshop audits, especially on themes with lazy loading.
Content injected at the top of the page. Cookie banners, “free shipping above 50 euro” promo bars and trust badges that load after the HTML get inserted above existing content, and everything below jumps. Reserve the space, or use an overlay that does not move the page.
Late-loading web fonts. When a custom font arrives after text has rendered in a fallback, lines reflow and headings change height (FOUT). Preloading the font files and setting font-display with a matched fallback keeps text in place.
Dynamic blocks without reserved space. Review widgets, product sliders, ads and embeds that fetch content via JavaScript render into an empty container that grows on arrival, and the same goes for price and stock loaded via AJAX. Give the container a minimum height that matches the final content.
How I handle CLS for clients
I treat cumulative layout shift as a template problem, not a page problem. A shop with 3,000 product URLs usually has one product template, one category template and a homepage, so I group Search Console data by template, pick one URL for each and record every shift in DevTools with its cause. The deliverable is a short prioritised list: the element, the cause, the fix, and who implements it (the theme developer, the app vendor or me).
Fixes follow a fixed order: explicit dimensions or aspect-ratio on images first, then reserved space for banners and dynamic content, then fonts, then replacing animations that move top or left with transform-based ones. After each release I re-check the lab score and wait for the 28-day field window to confirm it. This work sits inside my Core Web Vitals service and usually runs alongside a technical audit, because a theme that shifts content tends to have render-blocking scripts and oversized images too.
Frequently asked questions
What is a good CLS score?
A CLS of 0.1 or less is good, between 0.1 and 0.25 needs improvement and above 0.25 is poor. Google judges this on real visitor data at the 75th percentile. A lab score of 0 in PageSpeed Insights does not guarantee a good field score, because lab tests do not scroll or interact with the page.
Does a cookie banner always hurt CLS?
No. A banner only causes layout shift when it pushes existing content out of place. If it sits as a fixed overlay at the bottom of the screen, or the layout reserves its height before it loads, the score stays unaffected. Most consent tools offer an overlay mode; the problem is usually the default setting.
Why does my shop score fine on desktop but poorly on mobile?
On a narrow screen the same shift covers a larger share of the viewport, so the impact fraction is higher. Mobile also loads fonts and images more slowly, which gives late content more time to shift what has already rendered. I measure CLS on mobile first, because that is where most webshop traffic is.
Will fixing CLS improve my rankings?
On its own, rarely in a way you can measure. Page experience is a small signal compared with content and links. The reliable gain is in conversion: fewer mis-taps and fewer abandoned carts. I treat the ranking effect as a bonus and justify the work on user experience.