Cumulative Layout Shift (CLS): совокупное смещение макета

Cumulative Layout Shift, коротко CLS, — совокупное смещение макета. Метрика показывает, насколько блоки страницы сами меняют положение, пока человек её смотрит. Это одна из Core Web Vitals. Хороший CLS — до 0,1 у 75% визитов. От 0,1 до 0,25 показатель средний, выше 0,25 — плохой. Телефон и компьютер считают отдельно.

В оценку попадает только неожиданный сдвиг. Клик, тап и ввод текста двигают страницу ожидаемо: такие смещения в ближайшие 500 миллисекунд в CLS не входят. Как метрика держит адрес в группе эффективных URL, разобрано в материале Core Web Vitals: как увеличить число эффективных URL.

Откуда берётся число

У каждого сдвига две доли. Первая — какая часть экрана затронута. Вторая — как далеко уехал самый подвижный блок относительно большей стороны экрана. Доли перемножают. Сдвиги, между которыми меньше секунды, складываются в одно окно, и окно не длиннее 5 секунд. В зачёт идёт самое тяжёлое окно за визит, а не сумма всех смещений с момента открытия.

Один баннер, выехавший над текстом на половину экрана, портит CLS сильнее, чем серия мелких движений далеко внизу. Блок за пределами экрана оценку не увеличивает: человек его смещения не видит.

Из-за чего макет смещается

• 01Картинка, видео или iframe без ширины и высоты. Браузер не знает пропорцию, рисует текст, файл доезжает — текст уезжает вниз.
• 02Реклама, карта, плеер и чужой виджет. Блок вставляют туда, где контент уже стоит, и всё под ним опускается.
• 03Шрифт. Страница сначала рисуется запасным шрифтом, затем приезжает свой. Строка становится выше или шире, заголовок переносится, блоки под ним смещаются.
• 04Скрипт дорисовывает шапку, полоску согласия, слайдер или блок рекомендаций над уже видимым текстом. Шапка меняет высоту после загрузки меню — прыгает весь первый экран.
• 05Стили приходят поздно. Сначала страница в голом HTML, потом CSS задаёт другие отступы, размеры карточек и сетку колонок.
• 06Анимация через top, height, margin или width. Эти свойства двигают соседей. Transform и opacity документ не перестраивают.

Как снизить по шагам

1. У каждой картинки, видео и iframe в HTML укажите width и height — реальные пропорции файла. В CSS оставьте height: auto и ограничение по ширине. Место будет занято ещё до загрузки файла. То же для кадров слайдера: пустой слайд не должен иметь нулевую высоту.
2. Под рекламу и вставки заранее поставьте контейнер с min-height того размера, который блок займёт. Если объявления нет, контейнер не схлопывайте: схлопывание — такой же сдвиг.
3. Новые блоки ставьте ниже уже показанного содержимого или поверх страницы. Полоска согласия, чат и кнопка «наверх» — с position: fixed. Они не должны отодвигать заголовок.
4. Для первого экрана оставьте один файл шрифта и предзагрузите его. Запасной шрифт подберите близким по ширине букв и высоте строки. Текст не прячьте, пока файл едет: пустой блок, который потом заполняется, тоже толкает соседей.
5. Стили первого экрана отдавайте сразу вместе со страницей. Файл CSS, который меняет высоты и сетку, не должен приезжать после текста.
6. Появление блоков анимируйте через transform и opacity. Меню, вынутое из потока, не раздвигает документ, когда открывается.
7. Ищите ошибку в шаблоне, а не на одной странице. Если прыгают все карточки, все статьи или все посадочные, общий источник один: галерея, шапка, рекламное место или шрифт.
8. Сверяйтесь с полевыми данными. В отчёте Core Web Vitals цель — CLS до 0,1 у большинства визитов, отдельно на телефоне и на компьютере. Лабораторный прогон показывает, какой блок дёрнулся. В зачёт поисковика идут визиты людей.

Что проверить после правки

Откройте страницу как новый посетитель, без кэша, на той ширине, где сдвиг заметнее. Обычно это телефон. Найдите блок, который дёрнулся первым: картинка, шапка, баннер или заголовок после подмены шрифта. Зарезервируйте место именно ему. После выкладки шаблона нужны новый обход и новые визиты: старые заходы ещё держат прежний CLS, и цифра в отчёте меняется не в минуту публикации.

Крупный элемент первого экрана, из-за которого часто страдают и скорость отрисовки, и стабильность макета, разобран отдельно: Largest Contentful Paint (LCP): как снизить.