CLS: what it is and how to improve this Core Web Vitals metric
CLS measures the visual stability of your site: how much elements shift while it loads. Google wants that value under 0.1. If you exceed it, your ranking notices.
Published on · Updated on · 9 min read
CLS (Cumulative Layout Shift) measures the visual stability of your site. That is, how much page elements shift while it loads. Google wants that value under 0.1.
If your site exceeds that limit, you have a problem. CLS is one of the three Core Web Vitals Google uses to evaluate user experience. If you fail, your ranking notices. If you’re starting from scratch, begin with what Core Web Vitals are.
Here’s what actually works to improve it.
Difference between CLS and other Core Web Vitals metrics
| Metric | What it measures | The problem it detects |
|---|---|---|
| LCP | Loading speed of the largest element | Pages that take too long to show content |
| INP | Speed of response to interactions | Buttons or links that respond with delay |
| CLS | Visual stability during loading | Elements that shift while the user tries to interact |
If you want to dive deeper into the other two metrics, here’s how to improve LCP and how to improve INP.
What’s a good CLS (Google’s thresholds)
| Status | Score | What it means |
|---|---|---|
| Good | ≤ 0.1 | The page is stable. The user doesn’t see sudden movements. |
| Needs improvement | 0.1 – 0.25 | It may be acceptable, but there are elements that shift. |
| Poor | > 0.25 | The page is unstable. The user can click in the wrong place. |
Common causes of a high CLS (and how to fix them)
1. Images without defined dimensions
The problem: when an image doesn’t have
width and height defined, the browser doesn’t
know how much space to reserve. The image appears, pushes the content
down and generates a shift.
The solution: always define width and
height on images. If you use WordPress, modern themes
do it automatically. If not, add them manually.
<!-- Bad -->
<img src="image.jpg" alt="description">
<!-- Good -->
<img src="image.jpg" alt="description" width="800" height="600">2. Ads and iframes without reserved space
The problem: ads and iframes (embedded videos, maps) usually load after the content. When they appear, they push the text and buttons down.
The solution: reserve a fixed space for them
using min-height in CSS.
.ad-slot {
min-height: 250px;
}3. Web fonts that change text size
The problem: web fonts (Google Fonts, etc.) take time to load. Meanwhile, the browser shows the text with a fallback font. When the custom font loads, the text can change size and shift other elements.
The solution: use font-display: swap to
show the text with the fallback font until the custom
one is ready. And use font sizes that don’t vary much between fonts.
@font-face{
font-family: 'MyFont';
src: url('my-font.woff2') format('woff2');
font-display: swap;
}4. Dynamic content inserted after the initial load
The problem: chat plugins, pop-ups, cookie banners or recommended content that appears after the user has started reading.
The solution: load these elements in their reserved space or trigger them only when the user interacts (for example, the chat on button click).
How to audit your CLS
| Tool | What it measures |
|---|---|
| PageSpeed Insights | Real CLS of your users (CrUX field data) |
| Google Search Console | URLs with CLS issues based on real Chrome data |
| Chrome DevTools (Performance tab) | CLS marked on the timeline with visual shifts |
How to improve CLS
On WordPress
- Use a modern theme that defines dimensions for images and videos.
- If you use Elementor, make sure sections have a defined minimum height.
- Use
loading="lazy"on images, but always withwidthandheight.
On WooCommerce
- Product images should have fixed dimensions in the catalog.
- «Add to cart» buttons shouldn’t shift while the page loads.
On blogs
- Reserve space for featured images and embedded videos.
- If you use ads, reserve the space with
min-height.
If you want to complete your Core Web Vitals strategy, check out how to improve LCP, how to improve INP and the complete Core Web Vitals guide: what they are and how to improve them.
In summary: CLS measures visual stability. To
keep it below 0.1, define dimensions on images, reserve
space for ads and iframes, use font-display: swap
and control dynamic content. Audit it with PageSpeed Insights,
Search Console and Chrome DevTools.
If you want a specialist to audit and fix your CLS, I analyze your site, detect the shifts that are penalizing your user experience and give you a clear action plan. Tell me about your project and I’ll reply in less than 48 hours.
Want your site to be visually stable?
I audit your CLS, fix the shifts and optimize your Core Web Vitals so Google and your users notice.