CLS сайта: почему страница прыгает и как это исправить

Что такое CLS и при чём тут заявки

CLS (Cumulative Layout Shift) — метрика из набора Core Web Vitals, которая оценивает визуальную стабильность страницы. Она фиксирует, когда элементы смещаются без действий пользователя: текст уехал вниз, потому что сверху догрузилась картинка, форма опустилась из-за появившегося баннера.

Для бизнеса это не абстракция. Посетитель из Instagram или рекламы Meta чаще всего приходит с телефона и нередко на нестабильном мобильном интернете. Если в момент нажатия блок прыгнул, человек промахивается мимо кнопки, вводит номер не в то поле или закрывает вкладку. Клик вы оплатили, а заявку страница потеряла. Дополнительно Core Web Vitals входят в сигналы пользовательского опыта, поэтому стабильность важна и для SEO.

CLS сайта: как считается и какие значения хорошие

Каждый сдвиг оценивается по двум параметрам: какая часть экрана сместилась и на какое расстояние. Сдвиги группируются в окна, а в итог идёт самое неудачное окно за визит. Значение безразмерное.

Хорошим считается CLS не выше 0,1, плохим — выше 0,25, между ними зона «нужно улучшить». Сдвиги, которые происходят сразу после действия посетителя, например раскрытие аккордеона по нажатию, не учитываются: человек их ожидает. Считаются именно сюрпризы.

Оценка строится по реальным пользователям, поэтому итоговые цифры видны в Search Console и PageSpeed Insights.

Шесть главных причин прыжков и что с ними делать

В большинстве случаев причина одна из шести. Сначала определите, какая именно, потом чините точечно.

• Картинки без размеров. Браузер не знает, сколько места оставить, и текст сталкивается вниз, когда фото загрузится. Укажите width и height у каждого img или задайте aspect-ratio в стилях: адаптивность сохранится.
• Встроенные элементы. Видео, карты, виджеты отзывов, сторонние формы приходят позже основного контента. Дайте их контейнерам фиксированную высоту или пропорцию заранее.
• Баннеры и уведомления. Плашка «Скидка на доставку» или окно о cookie, которые выталкивают страницу вниз, — классика. Показывайте их поверх контента или резервируйте место.
• Веб-шрифты. Фирменный шрифт подменяет запасной, строки меняют длину, блоки едут. Предзагрузите основной шрифт и подберите запасной с похожими размерами.
• Контент от скриптов. Блоки «Похожие товары», рекомендации, рекламные вставки добавляются в середину страницы и сдвигают всё ниже. Резервируйте место или выводите их ниже первого экрана.
• Анимации. Если анимация меняет высоту, ширину или отступы, соседние элементы смещаются. Анимируйте через transform: раскладка не страдает.

Как найти источник: пошаговая инструкция

Общее «сайт прыгает» разработчику не поможет. Нужна конкретика, и собрать её можно за час.

• Откройте PageSpeed Insights для нужного адреса и посмотрите диагностику: там перечислены элементы, которые сдвигались.
• Проверьте отдельно мобильную версию. На узком экране сдвиги заметнее, а мобильных посетителей у большинства местных сайтов больше.
• В Chrome DevTools откройте вкладку Performance, запишите загрузку и найдите отметки сдвигов на шкале: видно, какие элементы затронуты.
• Включите замедление сети и смотрите, что появляется позже остального. Это почти всегда виновник.
• Запишите короткое видео с экрана телефона: момент прыжка лучше любого описания.
• Зафиксируйте результат: страница, устройство, элемент, причина. С такой заявкой правка занимает меньше времени.

Почему в лаборатории хорошо, а в Search Console плохо

Частая ситуация: тест показывает зелёный результат, а отчёт Core Web Vitals в Search Console ругает группу страниц. Лабораторный замер смотрит в основном на загрузку, полевые данные охватывают весь визит.

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

Типичные ошибки при исправлении CLS

Первая ошибка — чинить только главную. Сдвиги живут на шаблонах: карточка товара, статья блога, страница услуги. Исправление шаблона лечит сразу сотни адресов.

Вторая — проверять только на компьютере. Третья — добавить размеры картинкам в коде, но забыть про изображения, которые контент-менеджер вставляет через редактор: они снова приходят без размеров. Четвёртая — скрыть баннер на время теста и вернуть после. Пятая — ждать мгновенного эффекта: в Search Console данные накапливаются по реальным визитам, поэтому изменения отражаются с задержкой.

Пример: интернет-магазин и страница услуги

Представим магазин электроники в Ташкенте, который продаёт через сайт и Telegram. На карточке товара сверху фото без заданных пропорций, ниже цена и кнопка «Купить в один клик», а ещё ниже скрипт подгружает блок «Вам может понравиться». Пока фото грузится, кнопка оказывается на одном месте, затем уезжает. Покупатель нажимает, попадает на пустое место или на соседний элемент и уходит к конкуренту на Uzum или OLX.

Исправление скромное: задать пропорцию галерее, дать блоку рекомендаций минимальную высоту и вынести его под основной контент. То же с клиникой или студией, где на странице услуги форма заявки: если над ней появляется полоса с акцией, человек начинает вводить телефон в одно поле, а попадает в другое.

Чек-лист и следующий шаг

Перед релизом любой правки дизайна пройдите по списку и проверьте основные типы страниц на телефоне. Отчёт Search Console просматривайте регулярно, потому что CLS обычно появляется после добавления нового блока или виджета.

Если хотите, чтобы это сделали за вас, команда markdev включает такие проверки в SEO-оптимизацию сайта: находим элементы, которые двигают страницу, и формулируем понятные задачи для разработчика. Расскажите о своём сайте, и мы обсудим, с чего начать.

• У всех изображений и видео есть размеры или пропорции
• Для iframe, карт и виджетов зарезервировано место
• Баннеры и уведомления не сдвигают контент
• Основной шрифт предзагружен, запасной подобран
• Динамические блоки не вставляются над видимым контентом
• Анимации сделаны через transform
• Мобильная версия проверена после каждого изменения