CLS (Cumulative Layout Shift)
Краткое определение
CLS - это показатель стабильности Core Web Vitals, измеряющий, насколько неожиданно смещаются визуальные элементы во время загрузки страницы.
Когда изображение или рекламный блок загружается с задержкой и сдвигает текст вниз во время отрисовки страницы, это смещение учитывается в CLS. Показатель равен размеру сместившейся области, умноженному на расстояние сдвига, цель - значение, близкое к нулю.
Он отображается в PageSpeed Insights и Search Console. Официальный порог - 0,1: ниже - хорошо, от 0,1 до 0,25 - требует улучшения, выше - плохо. Резервирование места под изображения заранее в основном предотвращает такие сдвиги.
Его часто путают со скоростью страницы, но CLS касается стабильности, а не скорости; страница может загружаться быстро и все равно получить плохой показатель, если элементы двигаются во время отрисовки.
Самая частая ошибка: вставлять баннер согласия на использование файлов cookie или рекламный баннер в верхнюю часть страницы уже после того, как она отрисована, из-за чего весь контент ниже сдвигается вниз и CLS сильно ухудшается. Правильный подход: заранее зарезервировать фиксированную высоту под такие элементы или накладывать их поверх, так чтобы Вы никогда не сдвигали уже показанный контент.
Почему это важно
Если кнопка сдвигается именно в тот момент, когда посетитель собирается по ней нажать, он попадает не туда, что порождает недоверие и уход с сайта. Низкий CLS предотвращает ошибочные клики в формах, корзине и при оформлении заказа.
Условный пример
На странице тарифов сети спа-салонов поздно загружавшийся баннер сдвигал текст вниз, и посетители по ошибке нажимали на другой пакет; фиксированная высота для баннера остановила сдвиг.
