Let me guess — you clicked a button, and then, at the exact wrong millisecond, the whole page jumped and you ended up clicking something else. An ad. A “subscribe” popup you never wanted. Maybe even a delete button. If that sounds familiar, congratulations, you’ve just met Cumulative Layout Shift, or CLS, in the wild.
I want to walk you through this metric the way I wish someone had explained it to me the first time — no jargon overload, just the stuff that actually matters.
So What Is CLS, Really?
In plain terms, CLS measures how much stuff on your page moves around after it’s already loaded and visible. Not the initial render — the annoying stuff that happens after, when you’re already trying to read or click.
Google folded it into Core Web Vitals back in 2020, and honestly, I think that was one of the smartest moves they’ve made in the performance space. Because before CLS existed as a metric, “the page feels janky” was just a vibe nobody could put a number on. Now we can.
Here’s the thing though — CLS isn’t measuring speed. A page can load in 0.8 seconds and still have a terrible CLS score if things keep shuffling around. Speed and stability are two completely different problems, and in my experience, stability is the one teams forget to test for.
The Formula (Don’t Worry, It’s Not That Scary)
CLS is calculated using two components multiplied together:
Layout Shift Score = Impact Fraction × Distance Fraction
- Impact Fraction — how much of the visible screen was affected by the shift
- Distance Fraction — how far the elements actually moved, relative to the viewport
Multiply those, add up every unexpected shift during the page’s lifetime, and you get your CLS score. Simple in theory, brutal in practice, because a single fat banner ad loading late can tank your score in one move.
What Counts as a “Good” Score?
Here’s a quick reference table I keep coming back to:
| CLS Score | Rating | What It Means |
|---|---|---|
| 0.00 – 0.10 | Good | Users barely notice anything moving |
| 0.10 – 0.25 | Needs Improvement | Noticeable, occasionally annoying |
| 0.25+ | Poor | Frustrating, likely hurting conversions |
I’ll be honest — hitting 0.00 is basically a myth for real-world sites with ads, embeds, and dynamic content. But staying under 0.1 is a very achievable, very worthwhile goal.
How Do You Actually Measure It?
You’ve got two main flavors of tools here, and I think it’s worth knowing the difference:
Lab Data (Simulated)
- Lighthouse (built into Chrome DevTools)
- PageSpeed Insights
- WebPageTest
These run a simulated page load in a controlled environment. Great for debugging, but they don’t reflect real users on real devices with real network conditions.
Field Data (Real Users)
- Chrome User Experience Report (CrUX)
- Google Search Console → Core Web Vitals report
- Real User Monitoring (RUM) tools plugged into your own analytics
My honest take? Lab data is for finding problems during development. Field data is for proving whether your fixes actually worked for real people. You kind of need both.
The Usual Suspects Behind a Bad CLS Score
From everything I’ve debugged over the years, layout shifts almost always trace back to one of these:
- Images or videos without dimensions set in the HTML
- Ads or embeds injected after the initial page load
- Web fonts swapping in and reflowing text (hello, FOUT)
- Content injected above existing content (banners, cookie notices)
- Animations that trigger layout instead of just transform/opacity
We’re going to tackle every single one of these in future posts, so consider this your map of what’s coming.
Wrapping Up
CLS isn’t some abstract SEO checkbox — it’s literally about respecting your visitor’s attention. Every time your layout jumps, you’re asking someone to re-orient themselves on a page they already trusted to stay put. I genuinely believe that fixing layout shift is one of the highest-leverage, lowest-effort improvements you can make to a site.
Next up, we’ll get hands-on with aspect-ratio in CSS — probably the single most useful property for killing image-related shifts. See you there.