performance
Cumulative Layout Shift (CLS)
CLS measures how much your page jumps around as it loads. Google's 'good' threshold is 0.1 — higher than that, your readers misclick buttons and bounce.
What this check does
Reads CLS from PageSpeed Insights. CLS is a unitless score — the cumulative sum of every unexpected layout shift during page load, weighted by how much of the viewport moved and how far.
| CLS value | Verdict |
|---|---|
| ≤ 0.1 | Good |
| 0.1–0.25 | Needs improvement |
| > 0.25 | Poor |
Why it matters
A jumpy page is a frustrating page. You click a button, the page shifts, you click the wrong thing. You’re reading a paragraph, an ad loads, the paragraph moves. Layout shifts are one of the highest-correlated metrics with bounce rate.
CLS is the third Core Web Vital alongside LCP and INP. It’s also the easiest to fix once you find the offending elements — most CLS comes from a handful of specific patterns.
How to fix it
1. Reserve space for images and embeds. Always set width and height attributes (or aspect-ratio in CSS):
<img src="/hero.webp" width="1200" height="600" alt="..." />The browser reserves the box before the image loads. Without it, the image appears, the text below jumps down.
2. Reserve space for ads. If you run AdSense or similar, set a minimum height on the ad container that matches the most common ad size:
.ad-slot {
min-height: 250px;
}3. Avoid late-loading webfonts. Use font-display: swap (text renders in fallback first, swaps when webfont arrives — small CLS) or font-display: optional (no swap; better CLS, worse branding). Self-hosted woff2 with preload minimizes the swap window.
4. Don’t insert content above existing content. Cookie banners, “subscribe” prompts, and “you have a new notification” toasts that push down the page = guaranteed CLS. Position them as overlays (position: fixed).
5. Use CSS transforms for animation, not top/left. transform: translateY() doesn’t trigger layout shifts. Animating top does.
Frequently asked questions
How is CLS scored?
The score is the worst 5-second window of layout shifts during the page session, not the lifetime sum. Google updated this in 2021 to avoid penalizing long pages disproportionately.
What about user-initiated shifts?
Clicks, taps, and form submissions that cause layout changes are excluded from CLS for 500 ms after the interaction. So expanding an accordion doesn’t count — only “surprise” shifts do.
Why does my CLS spike on mobile but not desktop?
Mobile viewports are narrower, so a shift of N pixels is a larger fraction of the screen. Same root cause, larger penalty. Always test on the mobile profile in PageSpeed.
Sources
Last updated 2026-05-11