Что измеряет CLS
CLS — суммарная оценка неожиданных сдвигов элементов страницы во время её жизни. Чем больше и заметнее сдвиги, тем выше значение. Хорошим считается результат до 0,1. Пользователь видит проблему как «прыгающий» текст, кнопки, уезжающие из-под пальца, и случайные нажатия не на то.
Частые причины и решения
| Причина | Что происходит | Решение |
|---|---|---|
| Изображения без заданных размеров | Место под них резервируется только после загрузки | Указывать ширину и высоту или соотношение сторон |
| Реклама и встраиваемые блоки | Блок появляется позже и сдвигает содержимое | Резервировать место фиксированной высоты |
| Веб-шрифты | Текст меняет размер при подмене шрифта | Подбирать запасной шрифт, настраивать отображение шрифта |
| Динамические вставки сверху | Баннер или плашка появляется над уже показанным текстом | Показывать в зарезервированном месте или ниже видимой области |
| Анимации | Изменение размеров и положения сдвигает соседей | Использовать преобразования, не влияющие на макет |
Изображения: главное правило
Для каждого изображения задавайте размеры: браузер зарезервирует нужное место ещё до загрузки файла и вёрстка не «дёрнется».
<img src="/img/sofa.webp" width="800" height="600"
alt="Диван «Альфа»" loading="lazy">Для адаптивных изображений браузер сам вычисляет высоту по соотношению сторон, заданному атрибутами ширины и высоты.
Как увидеть смещения
- Откройте страницу с замедленной сетью и понаблюдайте за загрузкой.
- Воспользуйтесь лабораторным тестом: он показывает, какие элементы смещались и насколько.
- Проверьте и мобильную версию: на узких экранах смещения нередко заметнее.
Реклама, встраивания и шрифты
Самые упрямые источники смещений — то, что подгружается сторонними скриптами. Для рекламных блоков и виджетов заранее выделяйте контейнер нужной высоты и не убирайте его, если реклама не загрузилась. Про шрифты, которые тоже вызывают смещения, подробнее в статье про подключение шрифтов.
Связь с другими метриками: общий разбор — в статье про Core Web Vitals. Стабильный макет — не только вопрос метрики: он напрямую влияет на удобство и доверие посетителей.
Как возникает смещение из-за изображения
Как исправить типовую страницу
- Задайте размеры всем изображениям и встраиваемым блокам.
- Зарезервируйте место под рекламу и виджеты фиксированной высотой.
- Подберите запасной шрифт и режим его отображения.
- Вставки, появляющиеся динамически, размещайте в заранее выделенных областях.
- Проверьте результат на медленной сети и на мобильном устройстве.
Частые вопросы
Что вызывает смещения макета чаще всего?
Изображения без заданных размеров, реклама и сторонние виджеты, веб-шрифты и динамические вставки над уже показанным содержимым.
Как предотвратить смещение из-за изображений?
Указывать для каждого изображения ширину и высоту, чтобы браузер заранее зарезервировал нужное место.
Какой CLS считается хорошим?
До 0,1 по значению, которое не превышают 75% посещений; выше 0,25 — плохой результат.
Готовый адрес можно собрать прямо сейчас: откройте генератор ЧПУ — он транслитерирует фразу по таблице Яндекса, уберёт служебные слова и покажет длину адреса.