CLS (Cumulative Layout Shift)

Что такое CLS и почему он появился

Метрика Cumulative Layout Shift была введена Google в 2020 году как часть набора Core Web Vitals — сигналов, которые оценивают, насколько быстро и удобно открывается сайт на реальных устройствах. До этого внимание уделялось в основном скорости загрузки и интерактивности, но пользователи часто сталкивались с другой проблемой: страница загружается, а элементы на ней хаотично перескакивают. Это не просто раздражает — это приводит к случайным кликам по неверным ссылкам или кнопкам, что особенно критично на мобильных устройствах, где экран маленький. Поэтому Google решил измерять визуальную стабильность как отдельный фактор, влияющий на позиции в поисковой выдаче.

Как работает расчёт CLS

CLS рассчитывается на основе двух параметров каждого неожиданного сдвига: distance fraction — насколько далеко переместился элемент относительно вьюпорта, и impact fraction — какую часть экрана затронуло перемещение. Формула умножает эти значения и суммирует результаты для всех сдвигов, произошедших без действия пользователя. Если посетитель сам нажимает на кнопку или скроллит — такие движения не считаются. Также игнорируются анимации, которые длятся менее 500 миллисекунд и начинаются после реакции пользователя. Итоговое значение от 0 до 0.1 считается хорошим, от 0.1 до 0.25 — требует улучшения, а выше 0.25 — провальным. Google использует данные реальных пользователей Chrome (CrUX), поэтому даже если в ваших тестах всё идеально, реальная картина может отличаться.

Влияние на SEO и разработку

Так как CLS напрямую входит в Core Web Vitals, его значение влияет на ранжирование в мобильном поиске. Страницы с плохим CLS теряют позиции, но не так катастрофично, как при медленной загрузке — всё же это сигнал, который учитывается вместе с другими факторами. Для разработки CLS важен тем, что требует внимания к вёрстке и планированию контента. Основные причины плохих сдвигов — изображения и видео без заданных размеров, рекламные блоки, которые подгружаются после текста, и динамические элементы, появляющиеся с задержкой. Решение — всегда указывать width и height для медиа, использовать атрибут loading="lazy" с зарезервированной областью, и для шрифтов применять font-display: swap, чтобы не было скачка текста при смене шрифта.

Практический пример

Представьте интернет-магазин. На странице товара пользователь читает описание и собирается нажать кнопку «Купить». Внезапно сверху подгружается баннер с акцией, который сдвигает весь контент вниз на 200 пикселей. Пользователь промахивается и попадает на ссылку «Отзывы». Это классический сдвиг. В инструменте PageSpeed Insights вы увидите красную оценку CLS, например 0.45. Чтобы исправить, разработчик должен задать баннеру фиксированную высоту и ширину, а лучше — загружать его в зарезервированный контейнер ещё при загрузке страницы, даже если он будет показываться через несколько секунд.

Типичное заблуждение

Многие думают, что CLS измеряет только то, как страница дёргается при загрузке в браузере. На самом деле метрика учитывает все неожиданные сдвиги, которые происходят в течение всего времени, пока пользователь находится на странице — вплоть до закрытия вкладки. Если вы добавили на страницу всплывающее окно через 10 секунд после открытия, и оно сдвинуло содержимое, это тоже увеличит CLS. Ещё одно распространённое заблуждение — что CLS можно «обмануть», установив анимацию на сдвиг. Но Google считает только те перемещения, где пользователь не взаимодействует со страницей, поэтому анимация с задержкой всё равно будет засчитана. Не пытайтесь скрыть проблему — лучше исправить причину: стабилизировать макет и заранее резервировать место под все динамические элементы.