You've felt it: you go to tap a button, an ad or image loads above it, everything jumps down, and your tap lands on the wrong thing. That maddening jumpiness has a name and a number — CLS — and it's one of the three Core Web Vitals. Here's how to tame it.
What CLS measures
CLS (Cumulative Layout Shift) measures how much the page's content unexpectedly moves around while it loads. Every time something already on screen shifts position, that's a layout shift, and CLS adds them up into a score.
Unlike the other vitals, CLS isn't measured in seconds — it's a unitless score. Lower is better; zero means nothing moved.
What counts as good
| CLS | Verdict |
|---|---|
| ≤ 0.1 | Good |
| 0.1 – 0.25 | Needs improvement |
| Over 0.25 | Poor |
Aim for 0.1 or below. Above that, users start noticing the jumpiness.
What causes layout shift
CLS almost always comes from elements that take up space after the page has already started rendering:
| Cause | The shift it creates |
|---|---|
| Images without dimensions | The image loads and shoves content down |
| Ads / embeds | An ad slot fills in and pushes everything around |
| Web fonts | Text re-flows when a custom font swaps in |
| Injected banners | A cookie/notification bar appears at the top |
| Dynamic content | Content inserted above what the user is reading |
How to fix it
The golden rule: reserve the space before the content arrives.
- Always set width and height on images and video (or use
aspect-ratio). Then the browser reserves the right space, and the image fills it without shoving anything. - Reserve space for ads and embeds. Give ad slots a fixed size up front so filling them doesn't move the page.
- Handle fonts carefully. Use
font-displaysettings and size-matched fallbacks so swapping to a custom font doesn't re-flow text. (See web font performance.) - Insert dynamic content below the fold or in reserved space — never shove it above what someone's already reading.
- Avoid banners that push content. If you must show one, overlay it or reserve its space.
The one-line fix for most CLS: give everything that loads late a reserved size. Images, ads, embeds — if the browser knows how big they'll be, nothing jumps when they arrive.
Why it matters beyond annoyance
CLS isn't just irritating — it causes real mistakes (tapping the wrong button, mis-clicks on the wrong link) and it's a Google ranking signal. A jumpy page frustrates users and hurts SEO.
The bottom line
| In one line | |
|---|---|
| What | How much the layout unexpectedly moves while loading. |
| Good | 0.1 or below. |
| Cause | Elements that take space after render — images, ads, fonts. |
| Fix | Reserve space up front (dimensions, aspect-ratio, sized slots). |
CLS is the web's most fixable annoyance: reserve space for anything that loads late, and the page stops dancing. Your users stop mis-tapping, and your Core Web Vitals go green.
Related: Core Web Vitals explained, web font performance; test with the free Core Web Vitals checker.