Главная → Все проверки → Стабильность раскладки (CLS)
Стабильность раскладки (CLS): что проверяется
CLS — «прыгучесть» страницы: текст и кнопки съезжают во время загрузки, и палец попадает не туда. Бесит людей, и Google это измеряет.
Почему это важно
Пользователь целится пальцем в кнопку, но за долю секунды до тапа сверху догружается картинка без заданных размеров, макет уезжает вниз, и палец попадает по рекламному баннеру или не туда. Это и есть CLS, а не абстрактная метрика: Google документирует пороги как часть Core Web Vitals, хорошим результатом считается 0,1 и ниже, плохим — выше 0,25, и меряется это не в лаборатории, а по реальным данным пользователей за период. Чаще всего причина одна из трёх: картинки без прописанных width и height, из-за чего браузер не резервирует место заранее, шрифт, который подгружается позже и переставляет текст, или реклама, вставленная в поток без выделенного места под неё. Каждая правка по отдельности небольшая: атрибуты в тег или CSS aspect-ratio, но найти все асинхронные блоки на странице занимает больше времени, чем сама правка.
Откуда взялись требования
Пороги CLS документированы Google: хорошо ≤0,1, плохо >0,25 по p75 полевых данных. Полевые данные предпочитаются лабораторному замеру; источник указан в фактах. Первоисточник ↗
Категория проверки: Скорость и Core Web Vitals. Вес в оценке: 7/10.
Какие результаты возможны
Сдвиги контента измерены только на компьютере
CLS показывает, насколько контент прыгает при загрузке: хорошо до 0.1, плохо выше 0.25. Google оценивает страницы по телефону. Повторите проверку позже, чтобы получить мобильный замер.
Контент не прыгает при загрузке
Картинки и кнопки остаются на местах, палец попадает туда, куда целился.
Контент сдвигается при загрузке
Обычно виноваты картинки без атрибутов width и height, рекламные блоки без зарезервированного места и веб-шрифты, которые подменяют системный после загрузки. Начните с картинок: пропишите им размеры в теге img.
Контент сильно прыгает при загрузке
Задайте размеры картинкам (атрибуты width и height в теге img), зарезервируйте место под рекламные блоки и баннеры, а веб-шрифтам задайте запасной системный шрифт близкого размера.
Пороговые значения
Числа, по которым проверка выносит вердикт. Они зашиты в движок и одинаковы для всех сайтов.
- Порог «хорошо»
- 0.1
- Порог «плохо»
- 0.25
Кто исправляет
Правку по этой проверке обычно поручают разработчику.
Другие проверки категории «Скорость и Core Web Vitals»
Частые вопросы: стабильность раскладки (CLS)
Что такое хороший показатель CLS по мнению Google?
Google документирует порог 0,1 и ниже как хороший результат, выше 0,25 — как плохой, а промежуточные значения требуют улучшения. Оценка идёт по p75 полевых данных реальных пользователей за период, а не по разовому лабораторному замеру, поэтому на результат влияет весь трафик сайта, а не один тестовый запуск.
Почему макет сайта прыгает при загрузке страницы на телефоне?
Самая частая причина: картинки без прописанных атрибутов width и height, из-за которых браузер не резервирует им место заранее и сдвигает контент вниз, когда изображение наконец загружается. На втором месте — веб-шрифты, которые подгружаются с задержкой и переставляют уже отрисованный текст на другой шрифт с другой шириной букв.
Как реклама на странице влияет на CLS?
Рекламные блоки и виджеты, которые подгружаются через скрипт после первичной отрисовки страницы, обычно не имеют зарезервированного места в макете, и когда баннер наконец приходит, весь контент под ним сдвигается вниз. Решение — задать блоку фиксированную высоту или минимальные размеры контейнера ещё до того, как реклама успеет загрузиться.
Проверить страницу целиком
Эта проверка — одна из 52. Полный анализ показывает оценку от 0 до 100, разбор по категориям и список того, что чинить первым.