Что означает CLS простыми словами
Сдвиг происходит, когда уже показанная кнопка, текст или карточка меняет положение без ожидаемого действия пользователя. Метрика учитывает размер затронутой области и расстояние перемещения. Хороший ориентир — CLS не выше 0,1 у 75% посещений отдельно на мобильных и компьютерах.
Высокий CLS заставляет человека промахиваться по кнопке и терять место чтения. Причина часто не в анимации, а в изображении без размеров, позднем баннере, рекламе или замене шрифта.
Пример
Покупатель собирается нажать «Оформить заказ», но сверху появляется баннер и сдвигает кнопку. После резервирования места под баннер интерфейс перестаёт прыгать.
Как применять на практике
- Найдите элементы, участвующие в сдвигах, по полевой диагностике и записи загрузки.
- Задайте размеры изображениям, видео, рекламе и другим поздно загружаемым блокам.
- Проверьте шрифты и динамические вставки на разных ширинах экрана после исправления.
Частые ошибки
- Считать любой переход или пользовательскую анимацию ошибкой CLS.
- Убирать баннер, не резервируя место для его следующего появления.
- Оценивать стабильность только на быстром компьютере разработчика.