Вы открыли страницу, собрались нажать кнопку — и она уехала вниз, потому что сверху догрузился баннер. Вместо кнопки нажалось что-то другое. Это и есть сдвиг макета, а CLS — метрика, которая его измеряет. Из трёх Core Web Vitals она правится проще всех: часто достаточно проставить размеры изображений. Разбираем причины по частоте.
Коротко
- CLS считает, насколько элементы сдвигаются во время загрузки; хорошо — 0,1 и меньше.
- Чаще всего виноваты изображения без указанных размеров.
- Место под рекламу, виджеты и баннеры резервируют заранее.
- Сдвиг сразу после действия человека не засчитывается — этим можно пользоваться.
Что именно считается
CLS учитывает только неожиданные сдвиги — те, которых человек не просил. Значение складывается из двух множителей: какая доля экрана сдвинулась и насколько далеко.
Из этого следуют два практических вывода:
- Небольшой сдвиг крупного блока вредит сильнее, чем крупный сдвиг маленькой иконки.
- Сдвиг ниже видимой части экрана не считается, пока человек до него не долистал.
Сдвиги по воле пользователя не штрафуются. Если элементы сместились сразу после клика — раскрылся аккордеон, подгрузился следующий блок по кнопке «показать ещё» — такой сдвиг в метрику не попадает. Поэтому подгрузку контента лучше вешать на действие, а не запускать самостоятельно через несколько секунд.
Как найти виновника
Откройте отчёт в PageSpeed Insights
В диагностике есть раздел со сдвигами: он показывает конкретные элементы и их вклад.
Запишите загрузку на видео
Инструменты разработчика умеют показывать загрузку по кадрам. Прыжки видно глазами.
Проверьте с медленной сетью
При быстром соединении сдвиги незаметны: всё успевает загрузиться разом. Включите ограничение скорости.
Смотрите мобильную версию
Там сдвиги обычно сильнее: экран уже, элементы крупнее относительно него.
Проверьте не только первый экран
Сдвиги при прокрутке тоже считаются, если человек до них долистал.
Причина первая: изображения без размеров
Самая частая и самая простая в исправлении. Пока картинка не загрузилась, браузер не знает, сколько места она займёт, и показывает содержимое вплотную. Когда картинка приходит, всё ниже резко уезжает вниз.
Решение: указать размеры заранее.
- Атрибуты width и height прямо в теге. Браузер вычислит пропорцию и зарезервирует место ещё до загрузки файла.
- Свойство aspect-ratio в стилях. Удобно для адаптивных картинок, где ширина зависит от экрана.
- Контейнер с фиксированной пропорцией. Старый приём через отступ в процентах, работает везде.
Про адаптивную вёрстку. Указанные в теге width и height не мешают картинке масштабироваться: если в стилях задано max-width: 100% и height: auto, атрибуты используются только для вычисления пропорции. Это распространённое заблуждение, из-за которого размеры не проставляют.
Причина вторая: то, что появляется позже
Реклама, виджеты чатов, баннеры о куках, блоки отзывов, подгружаемые карточки — всё, что вставляется в страницу после её отрисовки, двигает содержимое.
| Что появляется | Как убрать сдвиг |
|---|---|
| Рекламный блок | Контейнер фиксированной высоты под него |
| Виджет чата | Позиционировать поверх, а не в потоке |
| Баннер о куках | Снизу поверх содержимого, не сверху в потоке |
| Блок отзывов со стороннего сервиса | Зарезервировать место под ожидаемый размер |
| Подгрузка карточек при прокрутке | Скелетон-заглушки того же размера |
| Уведомление об акции | Показывать по действию, а не по таймеру |
Общий принцип: если элемент появится — место под него должно быть занято с самого начала. Пустой контейнер нужного размера лучше, чем внезапно возникающий блок.
Причина третья: шрифты
Пока свой шрифт грузится, текст показывается системным. Когда шрифт приходит, текст перерисовывается — и если метрики шрифтов сильно расходятся, строки переносятся иначе, а блоки меняют высоту.
Предзагрузите основные начертания
Те, что используются в первом экране. Чем раньше придёт шрифт, тем меньше видна подмена.
Подберите похожий запасной
Чем ближе системный шрифт по ширине символов, тем меньше сдвиг при подмене.
Настройте font-display осознанно
Значение swap улучшает LCP, но допускает заметную подмену. Для CLS иногда удобнее optional.
Не грузите лишние начертания
Каждое дополнительное — отдельный файл и отдельный шанс на сдвиг.
Чек-лист проверки
Должно быть так
- У всех изображений заданы размеры или пропорция
- Под рекламу и виджеты зарезервировано место
- Всплывающие блоки поверх содержимого
- Шрифты первого экрана предзагружены
- Подгрузка контента по действию человека
Признаки проблем
- Картинки без width и height
- Баннер вставляется над содержимым
- Виджеты в обычном потоке страницы
- Уведомление выскакивает по таймеру
- Блоки появляются при прокрутке без заглушек
Проверять результат нужно на медленном соединении и на мобильном: именно там сдвиги проявляются сильнее всего, а при быстрой сети их можно вообще не заметить.
Частые вопросы
Какое значение CLS считается хорошим?
0,1 и меньше. До 0,25 — «требует улучшения», выше — «плохо». Метрика безразмерная: она отражает произведение доли сдвинувшейся площади на расстояние сдвига.
Считаются ли сдвиги, которые вызвал сам пользователь?
Нет. Если элементы сместились сразу после действия — клика, разворачивания блока, нажатия «показать ещё» — такой сдвиг в метрику не попадает. Поэтому подгрузку лучше вешать на действие, а не на таймер.
Мешают ли атрибуты width и height адаптивной вёрстке?
Нет, если в стилях заданы max-width: 100% и height: auto. Тогда атрибуты используются только для вычисления пропорции и резервирования места, а картинка нормально масштабируется.
Почему CLS плохой только на мобильных?
Экран уже, элементы занимают большую его долю, и тот же сдвиг даёт больший вклад. Плюс сеть обычно медленнее, поэтому отложенные блоки появляются заметно позже основного содержимого.
Сделаем сайт, который приносит заявки
Спроектируем структуру под запросы, соберём и запустим — с учётом SEO с первого дня.
Обсудить разработку
