CLS сайта: как найти и убрать сдвиги макета
CLS показывает, насколько заметно страница смещается после начала загрузки. Пользователь собирается нажать кнопку, но над ней появляется баннер; читает абзац, а изображение сдвигает текст вниз; открывает меню, а поздно загруженный шрифт меняет размеры строк. Такие перемещения мешают взаимодействию даже тогда, когда страница загружается быстро.
Исправление CLS сайта сводится не к ускорению всех ресурсов подряд, а к поиску элементов, которые меняют положение без действия пользователя. Главный принцип — заранее резервировать место для динамического содержимого и не вставлять новые блоки над уже показанной областью.
Что именно измеряет CLS
CLS, или Cumulative Layout Shift, оценивает неожиданные сдвиги видимых элементов в течение жизни страницы. В расчёте учитываются площадь затронутой части экрана и расстояние перемещения. Несколько близких по времени сдвигов объединяются в сессию, а итоговым становится наиболее проблемный набор событий.
Ориентир для хорошего результата — CLS не выше 0,1. Значение от 0,1 до 0,25 требует внимания, выше 0,25 считается неудовлетворительным. Эти границы полезны как проверяемые критерии, но одно число не указывает виновника: одинаковый итог могут дать крупный единичный сдвиг или последовательность небольших перемещений.
Не каждое изменение макета является ошибкой. Если блок сдвинулся вскоре после клика, касания или нажатия клавиши, браузер может считать изменение ожидаемым. Прокрутка и наведение сами по себе не дают такого исключения. Поэтому раскрывающийся блок по клику и внезапно появившаяся панель при прокрутке оцениваются по-разному.
Как диагностировать источник сдвига
1. Сначала воспроизведите проблему
Откройте страницу в приватном окне, включите ограничение скорости сети и процессора в инструментах разработчика, затем перезагрузите её. Проверьте мобильную и широкую ширину экрана. Холодная загрузка без кэша чаще показывает поздние изображения, шрифты, рекламные контейнеры и виджеты.
Не ограничивайтесь первым экраном. Медленно прокрутите страницу, откройте меню, форму и раскрывающиеся секции, дождитесь отложенной загрузки. CLS может накапливаться после первоначального рендеринга, когда автоматический тест уже завершил наблюдение.
2. Запишите события Layout Shift
В Chrome DevTools откройте панель Performance, начните запись, перезагрузите страницу и выполните проблемный сценарий. В дорожке Experience найдите события Layout Shift. Выбор события показывает величину сдвига и затронутые узлы. Визуальная подсветка помогает отличить элемент, который действительно переместился, от блока, который освободил или занял пространство выше него.
Важно проверять родительскую структуру. Если заголовок уехал вниз, причиной может быть не сам заголовок, а изображение без заданной высоты, пустой контейнер виджета или изменившийся после загрузки шрифт.
3. Сопоставьте лабораторные и полевые данные
Лабораторный запуск воспроизводим и удобен для отладки конкретного сценария. Полевые данные отражают реальные устройства, соединения, размеры экранов и более длинные сессии. Расхождение между ними нормально: тест может не увидеть баннер для отдельного региона, персонализированный блок, позднее согласие на cookie или сдвиг после прокрутки.
Если полевой CLS плохой, а локально проблема не повторяется, проверьте варианты страницы: авторизованный и гостевой режим, разные размеры экрана, медленную сеть, отсутствие кэша, появление уведомлений и работу сторонних скриптов.
Типовые причины и способы исправления
| Источник | Как распознать | Что исправить |
|---|---|---|
| Изображение или видео | Контейнер получает высоту только после загрузки файла | Задать width и height либо CSS-свойство aspect-ratio |
| Баннер, реклама, виджет | Новый блок появляется между уже отрисованными элементами | Заранее выделить контейнер с минимальной высотой или показывать блок поверх макета |
| Веб-шрифт | После загрузки меняются переносы строк и высота текста | Подобрать близкий резервный шрифт, настроить метрики и загрузить критичный файл заранее |
| Динамический ответ | Карточка, цена или статус сначала отсутствуют, затем раздвигают страницу | Использовать скелетон или заполнитель той же ожидаемой геометрии |
| Анимация | Движение меняет координаты соседних блоков | Анимировать transform и opacity, а не размеры и внешние отступы |
Изображения и адаптивные медиа
Указывайте реальные пропорции файла в атрибутах изображения:
<img src="/img/report.webp"
width="1200"
height="800"
alt="Фрагмент технического отчёта">Браузер зарезервирует область с пропорцией 3:2 ещё до получения файла. При адаптивной ширине достаточно сохранить height: auto. Для обложек с обрезкой задайте контейнеру aspect-ratio, а изображению — width: 100%, height: 100% и object-fit: cover.
Встраиваемые блоки и сторонние скрипты
Карта, видео, форма, чат или рекламный слот должны иметь предсказуемый контейнер. Если точная высота неизвестна, выберите устойчивый минимальный размер для каждого брейкпоинта. Не схлопывайте слот при отсутствии содержимого во время активного просмотра: исчезновение блока тоже сдвигает макет.
Cookie-панель и уведомления безопаснее размещать фиксированно поверх содержимого либо резервировать под них место до первого рендера. Вставка панели в начало уже показанного документа почти неизбежно перемещает весь первый экран.
Шрифты
Запасной и основной шрифты могут иметь разную ширину символов, высоту строки и базовую линию. Из-за этого после замены меняются переносы и размеры блоков. Для критичного шрифта применяйте предварительную загрузку только при реальной необходимости, настройте font-display и рассмотрите дескрипторы size-adjust, ascent-override, descent-override и line-gap-override у резервного начертания.
Проверка после изменений
Исправление следует принимать по повторяемому сценарию, а не по одному удачному запуску. Используйте такой чек-лист:
- у всех изображений, видео и iframe зарезервированы корректные пропорции;
- отложенные блоки имеют заполнитель ожидаемой высоты;
- уведомления не вставляются над уже показанным содержимым;
- замена шрифта не меняет заметно переносы и высоту строк;
- анимации не запускают перерасчёт расположения соседних элементов;
- мобильный и десктопный сценарии проверены без кэша;
- после прокрутки и открытия интерактивных элементов не возникают неожиданные сдвиги;
- лабораторное значение стабильно не превышает 0,1, а полевые данные наблюдаются после публикации.
Одновременно убедитесь, что фиксированные размеры не создали новую проблему: обрезанный текст, пустую область, наложение элементов или горизонтальную прокрутку. Жёсткая высота подходит не всегда; для переменного текста обычно безопаснее min-height и корректное поведение при переносах.
Ошибки при оптимизации CLS
Поиск самого заметного элемента вместо источника. Переместившийся текст часто только реагирует на изменение выше. В записи Performance нужно анализировать затронутый узел и его предшествующих соседей.
Фиксация высоты всего подряд. Значение в пикселях может скрыть сдвиг на одном экране и сломать адаптивность на другом. Сначала используйте естественные пропорции, aspect-ratio, min-height и брейкпоинты.
Проверка только первоначальной загрузки. Поздние виджеты, бесконечная лента и интерфейс после авторизации проявляются во время использования страницы.
Ориентация на единичный тест. Результат зависит от сети, кэша и порядка ответа ресурсов. Повторите измерение несколько раз в одинаковых условиях и сравнивайте не только балл, но и список событий.
Границы метода
CLS описывает визуальную стабильность, но не скорость появления основного содержимого, отклик интерфейса или корректность бизнес-логики. Хорошее значение не означает, что страница в целом быстрая и удобная. Поэтому CLS нужно рассматривать как узкую метрику внутри более широкой технической проверки, не смешивая её диагностику с обзором всех Core Web Vitals.
Проверка публичного URL также не раскрывает внутреннюю причину автоматически: для окончательного исправления может потребоваться доступ к шаблону, CSS, JavaScript, настройкам CMS или стороннего виджета. SiteVisor проверяет публичный URL без доступа к CMS и помогает оценить технические, SEO/GEO и конверсионные сигналы. Это отправная точка для анализа, а конкретный источник CLS подтверждают средствами браузера и повторным тестированием.
Итог
Чтобы уменьшить CLS сайта, воспроизведите сдвиг на медленном соединении, запишите события Layout Shift, найдите элемент, изменивший доступное пространство, и заранее закрепите геометрию динамического блока. Особое внимание требуется изображениям, iframe, виджетам, уведомлениям и веб-шрифтам.
После правок повторите весь пользовательский сценарий на разных ширинах экрана и сопоставьте лабораторные результаты с полевыми. Другие практические материалы по техническому состоянию страниц собраны в блоге SiteVisor.