CLS практически: убираем «прыжки» вёрстки

CLS — самая «бытовая» метрика Core Web Vitals: её эффект видно невооружённым глазом. Пользователь жмёт «Добавить в корзину», а под пальцем вдруг оказывается «Удалить аккаунт» — потому что баннер сверху подгрузился и сдвинул контент. CLS считает такие происшествия и оценивает в долях единицы.

01Что такое CLS и какой считается «зелёным»

CLS (Cumulative Layout Shift) — сумма неожиданных смещений элементов на странице за время сессии. Учитываются только те сдвиги, которые произошли БЕЗ действия пользователя. Если человек сам нажал кнопку и контент развернулся — это нормально и в CLS не идёт.

Пороги Google:

• До 0,1 — хорошо.
• 0,1–0,25 — требует улучшения.
• Больше 0,25 — плохо.

Метрика входит в Core Web Vitals и косвенно влияет на позиции в поиске. Общий разбор всех трёх — в статье Core Web Vitals: как пройти проверку скорости сайта.

02Откуда берутся прыжки

В девяти случаях из десяти причины — стандартные.

Картинки без размеров

В вёрстке у img нет width и height. Браузер сначала отрисовывает текст, потом догружает картинку и резервирует под неё место — текст съезжает вниз.

Реклама и баннеры

Блок «Реклама» подгружается асинхронно. Пока его нет, контента нет; когда он появляется — всё ниже улетает вниз.

Шрифты

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

Динамические виджеты

Чат, форма подписки, плашка cookie, плашка «акция» появляются сверху или внутри контента и сдвигают всё, что было ниже.

Поздний JS

Скрипт «привет, я акция» вставляет себя сверху уже после первой отрисовки страницы. CLS уезжает в красную зону.

03Как починить картинки

Главное правило: у любой картинки и видео в разметке всегда заданы атрибуты width и height. Это нужно даже если размер потом переопределяется через CSS — браузер использует соотношение сторон для резервирования места.

• В HTML: <img src=”…” width=”800″ height=”450″>.
• В CSS обычно достаточно img { max-width: 100%; height: auto; }.
• Для адаптивных картинок используйте picture с srcset и теми же width/height.
• Lazy-loading — да, но только для картинок ниже первого экрана.

Картинки в первом экране лучше вообще не лениться: задайте им явные размеры и грузите сразу — это одновременно лечит CLS и LCP.

04Шрифты и FOUT

Прыжок шрифтов называется FOUT (Flash of Unstyled Text). Чтобы свести его к минимуму:

• Подключайте шрифты с font-display: swap — текст показывается сразу системным.
• Используйте подсказку preload для основных весов шрифта.
• Подбирайте системный fallback с близкими метриками. В современных браузерах доступны свойства size-adjust, ascent-override и descent-override — они выравнивают высоты строк системного и кастомного шрифтов.
• Не подгружайте 6 весов одного шрифта, если реально нужно 2.

Чем ближе fallback к финальному шрифту по ширине и высоте — тем меньше CLS при подмене.

05Реклама, баннеры и плашки

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

• Для рекламных блоков задавайте min-height по типичному размеру баннера.
• Cookie-плашки лучше показывать снизу фиксированной позицией, а не вставлять сверху страницы.
• Поп-апы и виджеты с задержкой — overlay поверх контента, а не «втиснутый» в поток.
• Сообщения вида «новый комментарий» лучше отрисовывать сверху как уведомления, не сдвигая основной контент.

Этот же подход напрямую помогает и с метрикой INP практически: меньше сдвигов — меньше перерисовок — быстрее отклик.

06WordPress и CLS

На WP-сайтах CLS чаще всего портят три вещи.

• Тяжёлые слайдеры на главной с асинхронной инициализацией. Первый кадр без слайдера, потом «бах» — большой блок встаёт на место.
• Виджеты «недавние записи / похожие товары», которые подгружаются с задержкой.
• Старые темы, где у картинок нет атрибутов width и height в шаблонах.

План правок: проверить шаблоны, добавить размеры картинок, заменить «прыгающий» слайдер на более лёгкий вариант, перенести второстепенные виджеты в подвал. Подробнее о работе с WP — в статье как ускорить сайт на WordPress.

07Что и чем измерять

Для CLS особенно важны полевые данные — лабораторные тесты не всегда видят сдвиги, которые случаются в реальном использовании.

• PageSpeed Insights — показывает CLS и для теста, и для реальных пользователей (если хватает данных CrUX).
• Web Vitals в Яндекс.Метрике — реальные значения CLS по страницам.
• Layout Shift Highlight в Chrome DevTools — подсвечивает сдвиги прямо на странице.
• Lighthouse в Chrome — даёт подсказки, какие именно элементы виноваты.

Если CLS «зелёный» на ПК, но «красный» на мобильных — это нормальная ситуация: на мобильных больше плашек, тяжелее шрифты и больше тяжёлых картинок. Лечится теми же правками, начинать стоит с мобильной версии.

Официальная документация по теме — Справка Яндекс.Вебмастера.