Cumulative Layout Shift (CLS): why your store jumps and how to stop it
CLS scores how much a page moves while it loads. Google rates 0.1 or lower as good. Find the element that shifts and fix it on Shopify or WooCommerce.
3 min read
Area
Speed
Severity
High
Fix effort
Medium
Stores failing
16%
Of 37 stores we scanned where this check applies, 16% fail it and 76% pass. See all benchmarks.
Cumulative Layout Shift (CLS) adds up how far visible elements move unexpectedly while a page loads. Google counts 0.1 or lower as good and over 0.25 as poor. The classic case is a shopper about to tap a button when a banner loads above it and pushes it down.
Why it matters
A page that moves under a finger causes wrong taps: the wrong colour, a promo banner opened by accident, a missed add-to-cart. Shoppers read that as a careless store. Late-loading banners, cookie bars, review widgets and images without reserved space are the usual causes, and apps add more of them than themes do.
Because the shift happens in the first seconds of a visit, it often goes unnoticed by the people who run the store, who never see the page load cold.
What the audit looks at
The audit reports layout shift for your pages from Google PageSpeed Insights, using real-visitor data when Google has it, and names the element that moves.
What usually causes it
- Images and embeds with no width and height, so the browser cannot reserve their space
- Announcement bars, cookie banners and app widgets injected above existing content after load
- Web fonts that swap in with different metrics than the fallback font
- Product recommendations or review stars that load late and push the content below
How to fix it
Reserve space for the element that moves so nothing is pushed down while the page loads. The effort is medium, a theme or template edit that takes an afternoon.
- Give every image and video explicit width and height attributes, or an aspect-ratio in CSS.
- Reserve a min-height for anything added late: reviews, banners, announcement bars, embeds.
- Avoid inserting content above what the visitor is already reading.
On Shopify
- Online Store > Themes > Customize: open the template named in the finding and find the section that moves.
- Set fixed image dimensions (or a fixed aspect ratio) in that section, and give it a min-height.
- If an app fills the section in late, remove the app from this template or switch its app embed off; you cannot change how it loads.
On WooCommerce
- Add width and height to the images in your theme templates, and an aspect-ratio rule in the theme CSS.
- Reserve a min-height for late-loading plugin output (reviews, popups) in your child theme or Customizer CSS.
How to check it yourself
- Open PageSpeed Insights for your home page and find "Avoid large layout shifts" in the diagnostics. It lists the elements and their shift scores.
- In Chrome DevTools, open Rendering and switch on "Layout Shift Regions" to see blue flashes where content moves.
- Reload the page with the network throttled to Slow 4G and watch what moves.
Frequently asked questions
What is a good CLS score?
Google rates a CLS of 0.1 or lower as good, between 0.1 and 0.25 as needing improvement, and above 0.25 as poor.
Can an app cause layout shift even if my theme is fine?
Yes. Apps that inject banners, badges or widgets after the page loads are among the most common causes, because the theme cannot reserve space for something it does not know is coming.
Related checks
- Largest Contentful Paint (LCP): how to get under 2.5 seconds
- Interaction to Next Paint (INP): what a good score is and how to improve it
- Slow product and collection pages: how to compare templates against the rest of your site
Further reading
Check your own store
See whether your store passes this check
Paste your store URL. The audit loads your pages in a real browser and shows the result for this check with the evidence behind it.