Cumulative Layout Shift (CLS) measures how much the content on a page jumps around unexpectedly. You've probably seen it: you go to tap a link, an ad loads above it, the text drops, and you tap the wrong thing. CLS turns that experience into a score. It's one of Google's three Core Web Vitals.
For businesses, layout shifts are more than an annoyance. They cause misclicks, lost reading position and accidental taps on the wrong button, which chip away at trust and conversions. The good news is that they're often among the more fixable page speed and experience problems once you know the cause.
What is Cumulative Layout Shift?
web.dev's CLS guide describes it as a measure of the largest burst of layout shift scores for unexpected shifts during a page's lifetime. A layout shift happens when a visible element changes position from one rendered frame to the next.
Not every movement counts. Shifts that happen within 500 milliseconds of a discrete user input, like a tap, click or key press, are excluded, since people expect a page to change when they interact with it. Scrolling, dragging and pinch-zooming don't count as that kind of input.
The thresholds are:
- Good: 0.1 or less
- Needs improvement: more than 0.1, up to 0.25
- Poor: more than 0.25
As with the other Core Web Vitals, Google measures at the 75th percentile of page loads, split by mobile and desktop. Unlike Largest Contentful Paint and Interaction to Next Paint, CLS has no unit. It's a score, not a time.
Why CLS matters
It affects how trustworthy a page feels. A page that shifts while someone reads or taps feels broken, even if it loaded quickly. On checkout and lead forms, a shift at the wrong moment can mean a wrong selection or an abandoned session.
It's part of Google's page experience signals. Google's page experience documentation says "Core Web Vitals are used by our ranking systems," though good scores alone don't guarantee top placement.
Marketing additions often cause it. web.dev's list of common causes includes third-party ads and widgets that resize after loading and content added above existing content. Promo bars, cookie banners and embedded social posts can fall into those groups, which makes CLS a shared job between marketing and development.
How CLS works
Scoring a single shift
Each layout shift gets a score calculated as impact fraction multiplied by distance fraction. The impact fraction is how much of the viewport the moving elements cover, across the before and after frames combined. The distance fraction is the greatest distance any of those elements moved, divided by the viewport's largest dimension. A big element moving a long way scores high; a small nudge scores low.
Session windows
Shifts are grouped into session windows. A window is a burst of shifts with less than one second between each, lasting no more than five seconds in total. The page's CLS is the score of the window with the highest total. So a page that stays open for a long time isn't penalized just for being open, while a cluster of jumps during loading still counts in full.
Common causes
web.dev lists the usual suspects:
- Images or videos with unknown dimensions
- Web fonts that render larger or smaller than their fallback
- Third-party ads or widgets that resize themselves after loading
- Content inserted dynamically above existing content
How to improve CLS
- Set width and height on images and videos. web.dev's guide to optimizing CLS says to "always include width and height size attributes on your images and video elements," or reserve space with CSS aspect-ratio. This matters even more when you use lazy loading.
- Reserve space for ads and embeds. Use a min-height so the slot doesn't grow when content arrives, and avoid collapsing the space if no ad is returned.
- Don't push content down. Show banners and promo bars in reserved space or as overlays, rather than inserting them above content after the page loads.
- Tame web fonts. Preload key fonts, and consider font-display: optional or font metric overrides like size-adjust to reduce the size difference between fallback and web fonts.
- Animate with transform. Moving elements with transform avoids layout shifts, while animating properties like top and left can cause them.
- Keep pages bfcache-eligible. web.dev calls back/forward cache eligibility a highly effective way to keep CLS low, because restored pages don't repeat their shifts.
Common mistakes and misconceptions
"CLS only happens during loading." It's measured across the whole visit. Shifts from late-loading ads, infinite scroll or sticky elements can count too.
"Any movement hurts CLS." Changes right after a tap, click or key press are excluded, and animations that use transform don't count as layout shifts.
"Our lab score is zero, so we're fine." Lab tools usually measure only the initial load, without scrolling or interaction. Field data in Search Console shows what real visitors experience.
"Removing the ad slot fixed it." web.dev notes that collapsing reserved space when no ad loads can cause as much shift as inserting content. Plan for empty slots too.
How Butter approaches CLS
At Butter, we look at Core Web Vitals as part of technical health, alongside crawlability and indexing, rather than as a standalone vanity score. We start with field data from Search Console, because that is what reflects your real visitors, then use lab tools to find the cause.
On our GEO+SEO plan, technical SEO fixes and unlimited on-page optimization give us room to address issues like layout shifts from embeds, oversized hero images and heavy scripts on key templates. The Butter Analytics dashboard connects to Google Search Console and Google Analytics, so you can see whether changes hold up over time. On the GEO plan, we include performance issues in our monthly on-page recommendations. A steadier page improves the experience for every visitor and can help in search, but we never promise rankings from speed work alone. Our SEO services page has the details.
Frequently asked questions
What is a good CLS score?
Google considers a CLS of 0.1 or less good, more than 0.1 and up to 0.25 needs improvement, and more than 0.25 poor. Aim for 0.1 or less for at least 75% of page visits on mobile and desktop.
What causes layout shifts?
The most common causes are images and videos without set dimensions, ads and embeds that resize after loading, content inserted above existing content, and web fonts that render at a different size than their fallback.
Does CLS affect SEO?
Google says Core Web Vitals, including CLS, are used by its ranking systems. Good scores alone don't guarantee top rankings, but fixing layout shifts improves the experience for every visitor.
Why is my CLS different in Search Console and Lighthouse?
Search Console uses field data from real Chrome users over the last 28 days, including shifts that happen after the page loads. Lighthouse runs a simulated page load in a lab, so it can miss shifts caused by scrolling, late ads or interactions.