Что такое CLS — смещения макета?
CLS (Cumulative Layout Shift — «смещения макета») — метрика, которая показывает, насколько неожиданно и сильно элементы страницы сдвигаются во время загрузки.
CLS расшифровывается как «совокупное смещение макета»: браузер измеряет, как далеко «уезжают» блоки, которые пользователь уже начал читать или на которые собирался нажать. Метрика нужна бизнесу потому, что прыгающий контент под курсором — это потерянные клики, отказы и недоверие к сайту. Входит в Core Web Vitals, а значит влияет и на оценку качества страницы поисковыми системами.
Как считается CLS и какой порог считается нормой
Метрика учитывает не сам факт сдвига, а его «заметность»: берётся площадь сместившегося элемента и расстояние, на которое он уехал. Произведение этих значений даёт величину сдвига для конкретного кадра; если элемент сдвинулся несколько раз, в зачёт идёт самое крупное смещение в рамках одного кадра. Сумма таких значений по всей загрузке и есть CLS.
Оценка пороговая: до 0,1 — хорошо, от 0,1 до 0,25 — требует улучшения, выше 0,25 — плохо. Важная деталь: сдвиги, вызванные действием самого пользователя (клик, свайп, открытие меню), не считаются — наказывают только неожиданные смещения. Метрику измеряют в лаборатории (Lighthouse, DevTools) и в поле — по реальным визитам через Яндекс Метрику, Google Search Console и отчёты о скорости загрузки.
Почему элементы «прыгают»: частые причины
- Изображения и видео без размеров. Классика: в HTML не указаны width/height или aspect-ratio, браузер узнаёт габариты только после загрузки файла и перестраивает страницу.
- Шрифты. Пока грузится веб-шрифт, текст рисуется системным — с другой шириной строк. После подмены строки переразбиваются, и контент ниже съезжает.
- Реклама, баннеры и виджеты. Вставки сторонних скриптов появляются в потоке в последний момент и раздвигают вёрстку.
- Динамические блоки. Персонализированные баннеры, cookie-плашки, всплывающие промо и блоки рекомендаций, которые вставляются через JS над уже отрисованным контентом.
Как исправлять: практический чек-лист
- Пропишите размеры всем медиа: width и height в разметке или aspect-ratio в CSS — браузер зарезервирует место заранее.
- Задайте фиксированную высоту или min-height контейнерам рекламы, баннеров и встроенных блоков — тогда их подгрузка не сдвинет текст.
- Подключайте шрифты с font-display: swap и preload, а фолбэк подбирайте с близкими метриками, чтобы подмена не меняла ширину строк.
- Не вставляйте новые элементы над уже видимым контентом после загрузки — переносите их ниже или показывайте в оверлее.
- Анимируйте через transform, а не через top/left/height — такие изменения в CLS не засчитываются.
- Проверяйте результат на мобильных: там вес элементов другой, и CLS часто хуже, чем на десктопе.
Держите в голове, что CLS — не единственная метрика. Она работает в связке с LCP — отрисовкой крупного контента: страница может быстро показать главный блок и при этом «прыгать».
Типичные ошибки и что изменилось к 2026 году
Частая ошибка — смотреть только на средний CLS по всему сайту и не разбирать отдельные шаблоны: смещения обычно живут в одном-двух типах страниц (карточка товара, статья с рекламным блоком). Вторая ошибка — «обнулять» метрику хитростями вроде скрытия сдвигающегося блока на время загрузки: пользователь всё равно видит скачок, а вместе с ним — раздражение.
К 2026 году картина усложнилась: ИИ-поиск и ассистенты всё чаще разбирают страницу на лету, а в выдаче конкурируют не только тексты, но и качество интерфейса. Мобильный трафик стал основным, поэтому CLS измеряют в первую очередь на смартфонах, где реклама и тяжёлые медиа дают самые заметные скачки. Растёт и доля сайтов на JS-фреймворках: там смещения возникают не при загрузке документа, а при гидратации — уже после первого рендера.
Коротко о главном
CLS — способ измерить, насколько неожиданно «переезжает» интерфейс, и удерживать показатель до 0,1. Управляется он просто: размеры у медиа, зарезервированные контейнеры, аккуратные шрифты и никаких внезапных блоков над контентом. Это одна из немногих метрик, которую можно улучшить за день работы верстальщика — и сразу увидеть эффект в поведении пользователей.
