В мире, где пользователь принимает решение за доли секунды, интерфейс не имеет права на хаос. А именно хаос — это то, что приносит с собой метрика CLS (Cumulative Layout Shift). Это не просто одна из трёх метрик Core Web Vitals от Google. Это — убийца доверия, разрушитель конверсий и немой крик «почему у нас никто не покупает?!» в аналитике. Если LCP — про скорость, а FID — про отзывчивость, то CLS — про стабильность и визуальный порядок. Про то, чтобы элементы не прыгали, не съезжали и не вели себя как испуганные тараканы под светом UX-фонарика.

И в этой статье — без лирики, но с характером IRШ — мы распотрошим CLS, разложим по полкам причины, найдем виновных и вооружим тебя конкретными техническими решениями. Если ты создаёшь сайты, отвечаешь за продукт, или просто не хочешь терять деньги из-за прыгающих кнопок — с этого текста начинается твоя санитарная зачистка.

Что такое CLS — и почему он рвёт твой UX в клочья

CLS (кумулятивный сдвиг макета) — это метрика, которая измеряет насколько сильно и часто двигаются элементы страницы после того, как начинается загрузка. Иными словами: пользователь зашёл, начал читать, тянуться к кнопке — а кнопка в этот момент уехала. Не навсегда, конечно. Просто на 50 пикселей вниз. А вместе с ней — ушло и намерение кликнуть.

Визуальная стабильность — один из краеугольных UX-факторов. Google знает это, и потому CLS встроен в Core Web Vitals: если у тебя показатель выше 0.1 — ты уже в красной зоне. А если выше 0.25 — добро пожаловать в цифровой аналог мусорной свалки.

Почему CLS — это не баг, а системный провал

Когда сайт визуально нестабилен, пользователь чувствует себя обманутым. Он наводит мышку — а кнопка исчезает. Начинает читать — а текст прыгает вниз. Его намерение взаимодействовать рушится, потому что интерфейс ведёт себя непредсказуемо.

Это не просто раздражает. Это снижает конверсию, повышает bounce rate, и формирует негативный паттерн восприятия. Даже если остальное — идеально. Потому что восприятие не делится на «объективно полезно» и «субъективно удобно». Оно либо комфортно, либо нет. И всё.

Механика подсчета CLS

CLS рассчитывается по формуле, которая учитывает:

  1. Impact Fraction — какую часть экрана занимает сдвинутый элемент.
  2. Distance Fraction — насколько далеко он сдвинулся.

CLS = Impact Fraction × Distance Fraction

Пример: если большой блок (например, баннер или заголовок) сдвинулся на 25% экрана, и занимает 50% площади — CLS будет 0.25 × 0.5 = 0.125.

А теперь представь, если таких сдвигов несколько — итоговый CLS может легко пробить планку в 0.3–0.5. Это уже цифровой позор.

Топ-7 причин высокого CLS

Вот где начинается вскрытие. Вот кто виноват:

1. Изображения без заданных размеров

Браузер не знает, сколько места они займут. И сначала зарендерит текст, а потом — когда подтянется картинка — всё съедет вниз.

2. Встраиваемые элементы без размеров

Фреймы YouTube, карты, рекламные блоки, соц.виджеты — если ты не задал width и height, интерфейс будет прыгать при их загрузке.

3. Динамический контент, вставляемый позже

Любая подгрузка отзывов, баннеров, рекомендаций — если не зарезервировано пространство, вся верстка пойдёт по одному месту.

4. Шрифты без font-display: swap

Сначала браузер покажет system font, а потом, при загрузке веб-шрифта — изменится межстрочный интервал, ширина блоков и т.д.

5. Анимации, вызывающие layout shift

Анимации на top, left, width, height вызывают перерасчёт потока. Используй transform, если не хочешь лупить себя по лбу.

6. Lazy Load на первом экране

Ты решил, что всё «lazy» — это круто. А теперь баннер на первом экране грузится позже, и интерфейс прыгает. Браво.

7. Скрипты, которые вставляют элементы

Чаты, триггеры, попапы. Они часто появляются уже после загрузки. И ломают макет, потому что никто не зарезервировал под них место.

Как диагностировать CLS

Тебе нужно видеть движение, а не просто цифру. Вот инструменты:

  • PageSpeed Insights — показывает текущий CLS и что его вызывает.
  • Lighthouse — в DevTools, вкладка «Performance». Запусти запись и смотри график.
  • WebPageTest — водопад ресурсов, что когда грузится.
  • Chrome DevTools → Rendering → Layout Shift Regions — включи и увидишь прямоугольники, где был сдвиг.

Как исправить CLS — конкретно и без воды

Если ты хочешь результат, а не оправдания — вот твой чеклист:

📌 Всегда задавай размеры для изображений

<img src="banner.jpg" width="600" height="400" alt="Banner">

📌 То же самое — для iframe, video, embed

<iframe width="560" height="315" src="..."></iframe>

📌 Используй aspect-ratio в CSS

img {
  aspect-ratio: 3 / 2;
  width: 100%;
  height: auto;
}

📌 Добавляй font-display: swap в @font-face

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}

📌 Зарезервируй место под баннеры и динамику

Используй скелетоны, min-height, placeholder-блоки.

📌 Не вставляй блоки без контейнеров

Если скрипт вставит баннер — выдели под него заранее div с размерами.

📌 Избегай layout-ломающих анимаций

transform: translateY() вместо top, scale вместо width.

CLS и мобильные устройства

На мобилках ситуация в 10 раз хуже:

  • Экран меньше → любые сдвиги кажутся масштабнее.
  • Процессор слабее → рендеринг медленнее.
  • Часто используется медленный интернет → ресурсы приходят поздно.

CLS на мобильных — это драма UX. Поэтому там — оптимизация в первую очередь.

Как встроить CLS в процесс

Ты не должен бороться с CLS вручную каждый раз. Вот как это автоматизировать:

  • Добавь Lighthouse в CI/CD — пусть отчёты генерируются на каждом пуше.
  • Используй Web Vitals Report в Google Analytics 4.
  • Поставь alerts на PageSpeed drops через API.
  • Проводи A/B-тесты по CLS-устойчивости.

CLS и SEO: это влияет на ранжирование

Да. CLS — часть Core Web Vitals, которые с 2021 года учитываются в алгоритмах поиска Google. Если ты в красной зоне — твою страницу вытеснят те, у кого всё стабильно и не прыгает.

Ты можешь писать тексты лучше всех. Но если твоя верстка прыгает, как загнанный лось — ты вне выдачи.

Финальный разбор

CLS — это не про пиксели. Это про восприятие стабильности. Это про то, как один сдвинувшийся блок рушит всю воронку продаж.

И ты либо это понимаешь и делаешь как надо, либо продолжаешь спрашивать в понедельник: «А почему у нас опять нет заявок?»

Визуальный сдвиг — это удар по доверию.

А доверие — это то, чего ты точно не можешь терять. Ни на первом экране. Ни на втором. Ни вообще.