CLS: почему страница «прыгает» при загрузке и как это исправить

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

Как считается CLS

Каждый сдвиг оценивается по двум параметрам: какая доля экрана сдвинулась и на какое расстояние. Сдвиги группируются в окна, и в итог идёт самое неудачное окно за время визита. Сдвиги, которые происходят сразу после действия пользователя, например раскрытие аккордеона по нажатию, не учитываются: их посетитель ожидает.

Пороги

Хорошим считается CLS не выше 0,1, плохим — выше 0,25. Значение безразмерное. Оценка идёт по реальным посетителям, данные видны в Search Console и PageSpeed Insights.

Главные причины сдвигов

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

Если у изображения не указаны ширина и высота, браузер не знает, сколько места под него оставить. Сначала показывается текст, потом картинка загружается и сталкивает его вниз. Решение — атрибуты width и height у каждого img или свойство aspect-ratio в стилях. Адаптивность при этом сохраняется: браузер просто резервирует место нужной пропорции.

Встроенные элементы

Видео с YouTube, карты, виджеты отзывов, формы из сторонних сервисов загружаются позже основного контента. Задайте для их контейнеров фиксированную высоту или пропорцию заранее.

Баннеры и уведомления

Полоса «Скидка на доставку» или уведомление о cookie, которые появляются сверху и сдвигают страницу, — частый источник CLS. Показывайте их поверх контента или резервируйте место заранее.

Веб-шрифты

Когда загружается фирменный шрифт, текст перерисовывается, и если метрики шрифта отличаются от запасного, строки меняют длину и сдвигают блоки. Помогают предзагрузка основного шрифта, подбор запасного шрифта с похожими размерами и настройки отображения шрифтов.

Контент, вставляемый скриптом

Блоки «Похожие товары», рекомендации, рекламные вставки, которые скрипт добавляет в середину страницы после загрузки, сдвигают всё, что ниже. Резервируйте для них место или выводите ниже первого экрана.

Анимации

Анимации, которые меняют высоту, ширину или отступы элементов, вызывают сдвиги. Для анимаций используйте трансформации — они не влияют на раскладку соседних элементов.

Как найти источник

1. В PageSpeed Insights посмотрите раздел диагностики: там перечислены элементы, которые сдвигались
2. В инструментах разработчика Chrome на вкладке производительности сдвиги отмечены на шкале, можно увидеть затронутые элементы
3. Откройте страницу с замедленной сетью и смотрите, что появляется позже остального
4. Проверьте страницу на телефоне: на узком экране сдвиги заметнее

Сдвиги, которых нет в лабораторном замере

Иногда лабораторная проверка показывает хороший CLS, а Search Console — плохой. Причины: сдвиги происходят при прокрутке, после согласия на cookie, при подгрузке ленты товаров или у посетителей с медленным интернетом. Полевые данные учитывают весь визит, а не только загрузку.

Чек-лист для разработчика

• У всех изображений и видео есть размеры или пропорции
• Для iframe и виджетов зарезервировано место
• Баннеры и уведомления не сдвигают контент
• Шрифты предзагружены, запасной шрифт подобран
• Динамические блоки не вставляются над уже видимым контентом
• Анимации сделаны через трансформации

Где это особенно важно

Карточки товаров интернет-магазинов, где кнопка «В корзину» соседствует с подгружаемыми блоками, и страницы услуг с формой заявки. Если форма прыгает, человек начинает вводить телефон не в то поле или бросает попытку. Стабильный макет — это не только метрика для Google, но и прямое влияние на заявки.