Что такое CLS и почему он важен
Cumulative Layout Shift (CLS) — метрика стабильности макета. Измеряет, насколько непредвиденно смещаются элементы страницы в процессе загрузки. Хорошее значение: менее 0,1. Высокий CLS раздражает пользователей: кнопка, которую вы собирались нажать, вдруг съезжает вниз.
Основные причины CLS
Изображения без явных размеров
Браузер не знает размер изображения до его загрузки и не резервирует место. Решение: всегда указывать width и height в HTML или использовать CSS aspect-ratio.
Динамически вставляемый контент
Баннеры, уведомления о cookie, чат-боты — всё, что вставляется в DOM после загрузки и сдвигает контент. Решение: резервировать место заранее (min-height для контейнера).
Веб-шрифты без font-display
Без font-display: swap браузер сначала показывает системный шрифт, затем заменяет его веб-шрифтом. Замена вызывает сдвиг. Решение: font-display: swap + preload для критических шрифтов.
Анимации и переходы
Анимации, влияющие на layout (изменение width, height, padding), вызывают CLS. Используйте transform и opacity — они не влияют на layout.
Как измерить CLS
- Chrome DevTools → Performance → Layout Shifts (выделены синим)
- PageSpeed Insights — показывает элементы с наибольшим сдвигом
- Search Console → Основные Web-показатели
Быстрые победы для снижения CLS
- Добавить width/height всем тегам img
- Зафиксировать высоту рекламных блоков
- Добавить font-display: swap в @font-face
- Не вставлять контент над существующим без резервирования места