What Is CLS?
CLS measures how much visible content unexpectedly shifts while loading. Common causes, easy fixes, and a real example.
CLS (Cumulative Layout Shift) is a Core Web Vitals metric that measures how much visible content unexpectedly moves around while a page is loading. Google considers a score below 0.1 good, measured at the 75th percentile of real users.
Why CLS matters
Layout shifts are one of the most visible and frustrating user experience problems, often causing accidental clicks, mis-taps on ads instead of intended buttons, or lost reading position when text jumps mid-sentence. Unlike LCP or INP, which measure speed, CLS measures a purely visual annoyance that visitors notice immediately and viscerally, even if they can’t name what’s technically wrong. It’s also one of the most straightforward Core Web Vitals to fix, mostly a matter of explicit sizing rather than a deep architectural change, making it a relatively cheap win once identified.
What causes poor CLS
- Images and videos without explicit dimensions. The browser doesn’t reserve space until the file loads, causing surrounding content to shift once it does.
- Ads or embeds injected dynamically. Content that loads in above existing text pushes everything below it down unexpectedly.
- Web fonts causing a flash of unstyled or different-sized text. Swapping from a fallback font to a custom web font can shift line lengths and heights.
- Content inserted above the fold after initial render. Notification banners or cookie consent boxes that appear after the page has already rendered.
How to improve CLS
- Set explicit width and height attributes on every image, video, and iframe, so the browser reserves the correct space before the file loads.
- Reserve space for ad slots in advance rather than letting them inject and push content around dynamically.
- Use font-display: swap carefully, and consider preloading key web fonts to reduce the visual jump between fallback and final fonts.
- Avoid inserting new content above existing content unless it’s in response to a direct user interaction.
- Test with Chrome DevTools’ layout shift regions to visually identify exactly which elements are causing shifts.
CLS thresholds
| Score | Threshold |
|---|---|
| Good | Under 0.1 |
| Needs improvement | 0.1 to 0.25 |
| Poor | Over 0.25 |
Real example
For example, if a visitor starts reading an article and an ad suddenly loads above it, pushing the text down and causing a mis-click on something they didn’t intend to tap, that jump counts toward a high CLS score, exactly the kind of frustrating experience the metric was designed to catch and penalize.
CLS and AI search
CLS has no bearing on AI Overview citation eligibility, but a visitor who clicks through from an AI-generated answer and immediately experiences a jarring layout shift forms a poor first impression of the source, exactly the kind of friction that undermines whatever trust the AI citation itself was lending the page.
FAQ
Is CLS the easiest Core Web Vital to fix?
Generally, yes. Most CLS issues trace back to missing explicit dimensions on images, ads, or embeds, a straightforward fix compared to INP’s deeper JavaScript architecture problems.
Do cookie consent banners hurt CLS?
They can, if they load after the initial render and push existing content down. Reserving space for them upfront, or overlaying rather than pushing, avoids counting against your CLS score.
Does a layout shift caused by user interaction count against CLS?
No. Shifts that occur within 500 milliseconds of a genuine user interaction, like clicking a button that expands a section, are excluded from the CLS calculation.
How do I find which elements are causing my CLS issues?
Chrome DevTools’ Performance panel can visually highlight layout shift regions during a recorded session, showing exactly which elements moved and when.
Related terms
Every image without a set height is a future layout shift waiting to happen. Fix this one first, it’s the cheapest win of the three Core Web Vitals.