Что такое CLS?
CLS (Cumulative Layout Shift) — это смещение макета, суммарная оценка нестабильности страницы при загрузке: насколько сильно и как часто видимые элементы перестраиваются и «прыгают». Значение безразмерное: чем меньше, тем лучше.
Классическая картина плохого CLS: текст читается, кнопку нажимаешь, а в этот момент над ней подгружается баннер и всё сдвигается. Клик попадает в чужой элемент, посетитель раздражается. Метрика придумана именно для таких ситуаций.
Как считается CLS?
CLS = сумма за все сдвиги (доля пострадавшей области × длина сдвига)Каждый сдвиг оценивается двумя множителями: какая часть экрана изменилась и насколько далеко элементы уехали. Сдвиги в первые 0,5 секунды после ввода пользователя не считаются (поэтому динамические фильтры, запущенные кликом, метрику не портят).
Какой CLS считается хорошим?
- до 0,1: хорошо, целевой ориентир Core Web Vitals;
- 0,1–0,25: требует улучшения;
- более 0,25: плохо, страница ощутимо «дёргается».
Где смотреть: PageSpeed Insights, GTmetrix, Lighthouse; в отчёте виден клипбор с конкретным сдвинувшимся элементом, что сильно упрощает поиск причины.
Типичные причины смещения макета
- картинки без атрибутов width и height: браузер не знает высоту заранее и оставляет место в последний момент;
- реклама и вставки без зарезервированного места;
- замена запасного шрифта фирменным: размеры букв меняются, шапка и меню перестраиваются;
- контент, добавляемый скриптом сверху существующего текста;
- анонсы и баннеры, догружаемые в середину страницы.
Как исправить CLS?
- задавать размеры всем изображениям и блокам рекламы заранее (атрибуты width/height или фиксированная высота контейнера);
- предзагрузить ключевые шрифты, чтобы запасной шрифт заменялся предсказуемо;
- не вставлять новый контент выше уже видимого без действий пользователя;
- проверить страницу на нескольких ширинах экрана: сдвиги, которые не видны на десктопе, часто есть на телефоне.
Практический пример: подмена шрифта давала странице CLS 0,16 (меню перестраивалось после загрузки фирменного шрифта); после предзагрузки двух файлов шрифта значение упало до 0,005. Поиск причины по клипу отчёта занимает минуты, а эффект на стабильность страницы заметен сразу.
Связь CLS с другими показателями
CLS вместе с LCP и INP образует Core Web Vitals; отвечает он за «после» отрисовки: даже быстрый FCP не спасает впечатление, если контент прыгает. Для бизнеса сдвиги конвертируются в ошибочные клики, испорченные формы и рост отказов.
Итоги
CLS показывает, насколько стабильна страница при загрузке. Ориентир — до 0,1. Лечится он размерами картинок, зарезервированным местом под вставки и предзагрузкой шрифтов; искать виновника удобнее всего по клипу сдвига в отчёте PageSpeed Insights.