CLS (Cumulative Layout Shift): what it is and how to fix it

What is CLS

CLS (Cumulative Layout Shift) is a Core Web Vitals metric that measures the cumulative unexpected shifts in a page’s content during loading and use. CLS evaluates visual stability—how much elements “jump” as the page loads.

Each shift is calculated using the formula:

layout shift score = impact fraction × distance fraction

• impact fraction — the proportion of the viewport occupied by the shifted element
• distance fraction — the proportion of the viewport that the element shifted by

CLS sums all shifts during the session (subject to time-window caveats).

A real-world CLS problem: You click the “Buy” button, but an ad loads just before the click and shifts the content, so you accidentally click the ad. This is a typical CLS issue.

CLS thresholds

Common causes of poor CLS

1. Images without dimensions — the browser does not reserve space for them
2. Ads and banners — inserted after the content loads
3. Web fonts (FOUT/FOIT) — the font loads and shifts the text
4. Dynamic content — cookie banners, chats, notifications
5. Animations — changing top/left instead of using transform

How to fix CLS

1. Set image dimensions

<!-- Плохо: браузер не знает размер до загрузки -->
<img src="photo.jpg" alt="Фото" />

<!-- Хорошо: место зарезервировано заранее -->
<img src="photo.jpg" alt="Фото" width="800" height="600" />

2. Reserve space for ads

/* Минимальная высота для рекламного блока */
.ad-slot {
  min-height: 250px;
  width: 300px;
}

3. Optimize font loading

/* font-display: swap показывает fallback шрифт сразу */
@font-face {
  font-family: 'MyFont';
  src: url('font.woff2') format('woff2');
  font-display: swap;
}

<!-- Предзагрузка критических шрифтов -->
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />

4. Use transform for animations

/* Плохо: вызывает layout recalculation */
.animated {
  transition: top 0.3s;
}

/* Хорошо: только compositing, не вызывает сдвигов */
.animated {
  transition: transform 0.3s;
}

5. Reserve space for dynamic content

/* Зарезервировать пространство для куки-баннера */
.cookie-banner-placeholder {
  height: 80px;
}

6. Use aspect ratio for media

/* Сохраняет пропорции изображения до его загрузки */
img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

Tools for analyzing CLS

Chrome DevTools → Performance:

1. Record a page-load session
2. Find the Layout Shift events in the Experience section
3. Click an event to see the shifted elements

PageSpeed Insights: Shows the current CLS and specific shifts, with descriptions of the issues.

Check CLS with reChecker

Use Web Vitals to analyze visual stability. The tool shows:

• The current CLS value
• The page’s stability rating
• All Core Web Vitals metrics in one place

FAQ

Does a cookie banner worsen CLS? Yes, if it appears after the content loads and shifts it. Solution: reserve space for the banner or display it over the content (overlay) instead of inserting it into the document flow.

Are CLS shifts after user interaction excluded? Partially. Google distinguishes shifts with user input (those occurring within 500 ms after a click are not counted) from shifts without user input. This avoids penalizing intentional animations triggered by interaction.

How often is CLS data updated in Search Console? Google uses a 28-day rolling window of real-world data (CrUX). After making fixes, you need to wait 28 days for improvements to be reflected. You can check sooner with Lighthouse or PageSpeed Insights.