Cumulative Layout Shift (CLS): Why Buttons Jump and How to Fix It
Quick answer
Cumulative Layout Shift (CLS) measures how much the content of a page unexpectedly moves around while it loads and while people use it. A good CLS score is 0.1 or less; 0.1 to 0.25 needs improvement; above 0.25 is poor. The most common causes are images without set dimensions, ads or embeds that load without reserved space, banners and pop-ups pushed in at the top, and web fonts that swap in late.
You’re reading an article on your phone. You reach for the “Next” button. Just as your thumb lands, an ad loads above it, everything slides down, and you’ve tapped something else entirely.
Annoying for a news site. On a business website, it can mean someone accidentally leaves, mis-taps a call button, or simply decides the site feels broken. That jumpiness has a name and a score: Cumulative Layout Shift.
What is Cumulative Layout Shift?
CLS is one of Google’s three Core Web Vitals. It measures visual stability: how much visible content moves without the user doing anything to cause it.
Each unexpected movement gets a score based on how much of the screen moved and how far. Google then takes the worst burst of shifts during a visit as your CLS. Movements that happen right after someone taps or clicks (like an accordion opening) don’t count, because the user expected them.
What is a good CLS score?
| CLS score | Google’s rating |
|---|---|
| 0.1 or less | Good |
| 0.1 to 0.25 | Needs improvement |
| Above 0.25 | Poor |
Unlike loading metrics, CLS isn’t measured in seconds. It’s a unitless number. A score of 0 means nothing moved at all, which is entirely achievable. Our own homepage scores 0 on both mobile and desktop.
Why does layout shift matter?
Visitors rarely complain about layout shift. They just trust the site a little less. A page that twitches while loading feels cheap, unfinished or even suspicious, especially when someone is about to enter card details or contact information.
It also causes real mistakes. Imagine a customer on a car dealership’s site in Montague Gardens trying to tap “Book a test drive”, and a late-loading finance banner shoves the button down so they hit “Back to listings” instead. They might not try again.
And like LCP, CLS feeds into Google’s page experience signals. It won’t outrank great content, but it’s part of how Google judges whether a page is pleasant to use.
What causes layout shift?
Images and videos without dimensions
If the browser doesn’t know how big an image will be, it reserves no space. When the image arrives, everything below gets pushed down. This is the most common cause on WordPress sites, especially with older themes or images inserted by page builders.
Ads, embeds and iframes
Google Maps embeds, YouTube videos, social feeds and ad slots often load late and expand. Without a reserved container, they shove content aside.
Content injected at the top
Cookie banners, promo bars (“Free delivery this weekend!”), newsletter sign-ups and chat prompts that appear above existing content push everything down.
Web fonts swapping in
The page first shows text in a fallback font, then switches to your custom font. If the two fonts are different sizes, lines reflow and content jumps.
Animations that move layout
Animations that change an element’s size or position in the layout (rather than using transforms) can register as shifts.
How to fix CLS
Set width and height on every image and video. Modern browsers use these to reserve the right space even on responsive layouts. Most modern WordPress themes do this automatically; older themes and some page builders don’t.
Reserve space for embeds and ads. Wrap maps, videos and ad slots in a container with a fixed minimum height or aspect ratio.
Overlay banners rather than insert them. Cookie notices and promo messages should float over content (for example, fixed to the bottom of the screen), not push it down.
Handle fonts carefully. Preload your main font, and choose a fallback font with similar sizing. Some font services offer size-adjusted fallbacks for exactly this reason.
Animate with transforms. Ask your developer to use CSS transform and opacity for movement, which don’t shift layout.
How to find what’s shifting
Run your page through our foundation checker or PageSpeed Insights. In the full Google report, the diagnostic “Avoid large layout shifts” lists the elements that moved. That’s your fix list.
You can also simply watch. Load your site on your phone over mobile data (not Wi-Fi), and pay attention to the first five seconds. Anything that jumps is a candidate.
Remember that lab tests only catch shifts during loading. Shifts that happen later, like a pop-up after 20 seconds, show up in real-user field data. Our article on lab data vs field data explains why your numbers can differ.
Common mistakes
Adding a “sticky” promo bar at the top of every page. If it loads after the content, it pushes everything down on every visit.
Embedding several social feeds on the homepage. They’re slow, they shift, and few people interact with them.
Assuming the theme handles it. Many do, but page builders and plugins can undo good theme behaviour.
When to get help
Setting image dimensions and moving a cookie banner are usually quick wins. Font loading and theme-level fixes may need a developer. If CLS problems come from the way the site was built, it’s often part of a broader website rebuild conversation, where we’d make stability part of the foundation from day one.
Key takeaways
- CLS measures unexpected movement of page content.
- Good is 0.1 or less, and 0 is achievable.
- Main causes: images without dimensions, late embeds and ads, injected banners, font swaps.
- Reserve space for everything that loads late.
- Test on a real phone on mobile data, not just on desktop.
Frequently asked questions
What does CLS stand for?
Cumulative Layout Shift, a Core Web Vitals metric that measures how much page content unexpectedly moves.
What is a good CLS score?
0.1 or less is good, between 0.1 and 0.25 needs improvement, and above 0.25 is poor.
Does a cookie banner cause layout shift?
It can, if it’s inserted at the top and pushes content down. Banners that overlay the page, for example fixed to the bottom, avoid the problem.
Why is my CLS different in PageSpeed Insights field and lab data?
The lab test only measures shifts during page load. Real-user data includes shifts that happen later while people scroll and interact.
Check your CLS score in about a minute with our free foundation checker.
Check my foundation