Разработка
CLS
Также говорят: смещение макета
CLS — показатель стабильности страницы при загрузке: насколько сильно смещаются элементы, пока страница загружается. Если человек хотел нажать на кнопку, а она «уехала» вниз из-за загрузившейся картинки, — это и есть сдвиг макета. Хорошим считается значение CLS не выше 0,1.
Почему это важно
Сдвиги раздражают: человек начинает читать, а текст уезжает; хочет нажать на ссылку, а попадает на рекламу. Это ухудшает впечатление от сайта и может приводить к случайным кликам. CLS входит в набор показателей скорости и удобства, которые поисковые системы учитывают при оценке страниц.
Какие значения считаются хорошими
| Значение CLS | Оценка |
|---|---|
| До 0,1 | Хорошо |
| 0,1–0,25 | Требует улучшения |
| Больше 0,25 | Плохо |
Частые причины сдвигов
- Картинки и видео без размеров. Браузер не знает, сколько места под них оставить, и сдвигает текст, когда они загружаются.
- Рекламные блоки и виджеты, которые загружаются позже и вставляются в страницу.
- Шрифты, при загрузке которых текст меняет размер.
- Баннеры и уведомления, которые появляются вверху страницы и сдвигают всё вниз.
- Контент, добавляемый скриптами над уже видимой частью страницы.
Как исправить
- Указывайте ширину и высоту для всех изображений и видео или задавайте соотношение сторон в стилях.
- Резервируйте место под рекламные блоки и виджеты заранее.
- Используйте настройки загрузки шрифтов, которые не меняют размер текста.
- Показывайте уведомления и баннеры поверх страницы, а не вставляя их в поток.
- Не добавляйте контент над тем, что пользователь уже видит, без его действия.
Как проверить
- Сервисы проверки скорости страниц показывают CLS и элементы, которые сдвигаются.
- В панели для вебмастеров есть отчёты о показателях удобства по данным реальных пользователей.
- Откройте сайт на медленном мобильном интернете и посмотрите, что происходит при загрузке.
Лабораторные и реальные данные
Показатель, измеренный сервисом проверки, может отличаться от данных реальных пользователей: у людей разные устройства и скорость связи. Ориентируйтесь на реальные данные в панели для вебмастеров, а сервисы используйте для поиска конкретных причин.
Где проверять в первую очередь
Сдвиги чаще всего возникают на первом экране: баннеры, слайдеры, всплывающие уведомления о файлах cookie, блоки с отзывами, которые подгружаются позже. Начните с них и с мобильной версии — на маленьких экранах сдвиги заметнее и мешают сильнее.
Если сайт сделан на готовом шаблоне, сдвиги часто вызывают модули и виджеты, установленные поверх него. Отключите их по одному и проверьте, как меняется показатель, — так быстрее найти источник проблемы.
Где термин используется на практике
Ниже — материалы, где понятие участвует в расчёте, настройке или принятии решения, а не просто упоминается.
