Оптимизация CLS

«Проблема с CLS: значение показателя выше порогового» — такое сообщение в Google Search Console означает, что часть страниц сайта ведет себя нестабильно во время загрузки. Контент уже появился на экране, пользователь начал читать или собирается нажать кнопку — и тут сверху загружается картинка, баннер или виджет. Весь макет внезапно уезжает вниз.Именно подобные случаи и берется измерять CLS — Cumulative Layout Shift, или совокупный сдвиг макета.Если говорить проще, эта метрика отражает, насколько сильно и внезапно смещаются видимые блоки страницы. Когда заголовки, текст, кнопки, картинки и формы остаются на своих местах — значение будет низким. Если же страница то и дело «прыгает» во время прогрузки или работы — CLS растет.CLS входит в Google Core Web Vitals и отвечает за визуальную стабильность страницы. Хорошим считается значение до 0,1. Диапазон от 0,1 до 0,25 говорит о том, что страницу желательно доработать, а показатель выше 0,25 уже считается плохим.Но сама цифра — только следствие. Высокий CLS обычно появляется потому, что браузер заранее не понимает, сколько места займет какой-либо элемент. Например, изображение еще не загрузилось и не имеет заданной высоты. Браузер размещает текст выше, а через секунду получает картинку и вынужден срочно освободить для нее место. В результате все содержимое ниже резко сдвигается.Для пользователя это выглядит как обычный «прыжок» страницы. Для разработчика — как конкретная техническая проблема, которую можно найти и исправить.

Почему CLS становится высоким

Высокий CLS почти всегда связан с тем, что часть страницы получает окончательный размер уже после первой отрисовки. Пользователь видит готовый экран, а браузер еще продолжает добавлять или перестраивать элементы.Чаще всего проблема возникает из-за нескольких вещей.Размер изображения. Если у изображения не указаны ширина и высота, браузер не может определить, сколько места для него выделить. Пока img загружается, соседний блок занимает свободную область, а затем резко смещается.iframe и видео. Встроенный ролик, карта или внешний виджет работают по тому же принципу. Если блок не имеет заранее заданной высоты, после загрузки фрейма макет начинает «плыть».Динамические элементы. Всплывающая реклама, пуш-уведомления, блоки с рекомендациями, а также баннеры о файлах cookie — все эти компоненты, подгружаемые скриптами, часто провоцируют скачки CLS. Наихудший сценарий — это внезапное появление нового блока прямо над текстом, который пользователь уже начал читать.Шрифтовые нагрузки. При загрузке сайта браузер сперва отображает системную гарнитуру, а лишь затем подменяет ее на брендовую. Если метрики этих шрифтов существенно разнятся, это приводит к перерасчету переносов строк, изменению высоты заголовков и смещению всех соседних элементов.Слайдеры и карусели. Иногда первый слайд отрисовывается с одной высотой, а после инициализации скрипта контейнер получает другую. Визуально это выглядит как резкий скачок всей верхней части страницы.Важно понимать: CLS — это не просто «медленная загрузка». Страница может открываться быстро и при этом иметь плохую визуальную стабильность. И наоборот, тяжелый сайт не обязательно будет страдать от CLS, если под все элементы заранее зарезервировано место.

Как считается CLS и какое значение считается нормальным

CLS оценивает не просто факт сдвига, а его заметность для пользователя. Чем большую часть экрана затронуло изменение и чем дальше переместился контент, тем выше вклад события в итоговый показатель.При этом современные браузеры не складывают сдвиги за все время просмотра страницы в одну бесконечную сумму. События объединяются в короткие сессионные окна, а для оценки берется наиболее проблемный период.Ориентиры Google простые:

• до 0,1 — хороший CLS;
• от 0,1 до 0,25 — требуется улучшение;
• выше 0,25 — плохой показатель.

Идеальное значение — 0, но на практике важнее не добиться абсолютной неподвижности страницы, а исключить именно неожиданные сдвиги.Не каждое изменение макета ухудшает CLS. Если пользователь сам нажал кнопку, раскрыл меню или открыл форму и интерфейс сразу изменился в ответ на это действие, такой сдвиг может не учитываться. Проблемой становятся прежде всего изменения, которых пользователь не ожидал: внезапно появившийся баннер, погрузившийся блок или изображение, которое вытолкнуло текст вниз.

Как проверить CLS сайта и найти источник

Начать проще всего с PageSpeed Insights. Сервис отображает CLS наряду с другими ключевыми показателями Core Web Vitals, а также отдельно предоставляет лабораторные и полевые данные.Лабораторный тест удобен для быстрой проверки после правок. Полевые данные важнее для SEO, потому что они основаны на реальном опыте пользователей Chrome. Поэтому значения могут отличаться: в тесте страница выглядит стабильной, а у посетителей CLS оказывается выше из-за медленного интернета, поздней загрузки виджета или действий во время просмотра.Если нужно понять, что именно сдвигает страницу, открываем Chrome DevTools:

• Нажимаем F12.
• Переходим во вкладку Performance.
• Запускаем запись и перезагружаем страницу.
• Находим события Layout Shift.
• Смотрим, какие элементы участвовали в смещении.

Так можно быстро обнаружить реальную причину: изображение без размеров, рекламный блок, шрифт, слайдер, iframe или динамический элемент.Для анализа всего сайта дополнительно полезен отчет Core Web Vitals в Google Search Console. Он показывает группы URL с проблемами и помогает понять, носит высокий CLS единичный или системный характер.

Как уменьшить CLS

Когда источник сдвига найден, обычно не нужно «ускорять все подряд». Достаточно исправить элемент, который заставляет браузер перестраивать макет.1. Задавайте размеры изображений.Для тегов  обязательно прописывайте атрибуты width и height. Так браузер заранее узнает пропорции картинки и зарезервирует под нее место еще до того, как она загрузится.Если блок адаптивный, можно дополнительно использовать aspect-ratio.2. Резервируйте место под iframe, видео и виджеты.Карты, формы, онлайн-чаты и другие внешние элементы часто загружаются позже основного контента. Если контейнер сначала имеет нулевую высоту, а потом резко увеличивается, CLS растет.

.video {
aspect-ratio: 16 / 9;
width: 100%;
}
 

3. Не вставляйте динамический контент поверх готовой страницы.Реклама, уведомления, промоблоки и cookie-баннеры не должны неожиданно сдвигать уже видимый текст. Если блок обязательно появится, лучше заранее предусмотреть под него место.4. Следите за загрузкой шрифтов.Если запасной и основной шрифт сильно отличаются по размерам, после загрузки меняются переносы строк и высота блоков. Помогают предварительная загрузка критичных шрифтов и подбор близкого по метрикам fallback-шрифта.5. Проверяйте слайдеры и карусели.У контейнера должна быть понятная высота еще до инициализации JavaScript. Иначе сначала пользователь увидит один размер блока, а через долю секунды — другой.6. Анимируйте через transform.Если вы двигаете элементы с помощью top, left, width, height или margin, браузер вынужден пересчитывать всю раскладку. Куда безопаснее для производительности использовать transform и opacity — конечно, если это укладывается в задачу.Главный принцип здесь один: страница должна заранее знать, сколько места займут ее элементы. Чем меньше сюрпризов для браузера, тем ниже CLS и тем стабильнее интерфейс для пользователя.

Влияет ли CLS на SEO

Да, но здесь важно не упрощать. CLS входит в Core Web Vitals и используется Google как один из сигналов, связанных с качеством страницы. При этом низкий CLS сам по себе не выведет сайт в топ: поисковик оценивает контент, соответствие запросу, техническое состояние ресурса, ссылки и другие факторы.Зато высокий CLS способен ухудшать пользовательский опыт напрямую. Если кнопки смещаются, текст «прыгает», а форма уезжает в момент заполнения, посетителю становится неудобно работать со страницей. Это уже влияет не только на техническую оценку, но и на реальные действия пользователей.Поэтому оптимизация CLS — это не попытка «подогнать цифру под Google», а нормальная работа над качеством сайта. Особенно важно следить за показателем на страницах услуг, карточках товаров, формах заказа, лендингах и других страницах, где любое неожиданное смещение может помешать конверсии.

Ответы на частые вопросы

Что такое CLS простыми словами?

Это метрика, которая измеряет, насколько «прыгает» верстка. Простыми словами — насколько сильно элементы на экране смещаются в тот момент, когда страница еще грузится или когда вы по ней перемещаетесь.

Какое значение CLS можно считать нормальным?

Если показатель держится ниже 0,1 — все в порядке. А вот если он перевалил за 0,25, значит, у страницы проблемы с Core Web Vitals, и над этим стоит поработать.

Сайт летает, а CLS все равно высокий — почему так?

Дело в том, что быстрота загрузки и стабильность расположения блоков — это две разные истории. Страница может открыться моментально, но потом что-то (баннер, картинка, шрифт или виджет) внезапно сдвинет контент.

Где можно посмотреть CLS своего сайта?

Для быстрой оценки хватит PageSpeed Insights. Чтобы проанализировать весь проект целиком — загляните в Google Search Console. А если нужно вычислить конкретный «виновник» сдвига, лучше всего открыть Chrome DevTools и вкладку Performance.

Обязательно ли доводить CLS до нуля?

Совсем не обязательно. Главное — избавиться от непредсказуемых скачков, которые раздражают пользователя. Если же интерфейс меняется ожидаемо и в ответ на действия человека — это уже совсем другая ситуация.

Коротко о важном

CLS отражает, насколько устойчиво страница ведет себя в процессе загрузки и дальнейшего использования. Ориентир, к которому стоит стремиться, — значение до 0,1.Если же показатель высокий, виновниками чаще всего оказываются изображения без заданных размеров, iframe, динамические блоки, реклама, шрифты и блоки, появляющиеся после первой отрисовки страницы.Оптимизация сводится к простой логике: браузер должен заранее понимать, сколько места займет каждый важный элемент. Тогда контент не будет «прыгать», пользователю будет проще взаимодействовать с сайтом, а страница будет лучше соответствовать требованиям Core Web Vitals.Проверяйте CLS после изменений в шаблоне, дизайне, рекламе и подключении новых виджетов — так проблему проще поймать до того, как она начнет влиять на реальные страницы сайта.