AM.SALESCLS: как убрать прыжки контента на сайте
ДаниилТехнический директор AmSales
Отвечает за разработку: сайты, веб-приложения, ИИ-интеграции, приложения для Битрикс24 и бэкенд.
Коротко: Cumulative Layout Shift (CLS) - это метрика визуальной стабильности, которая измеряет, насколько сильно контент «прыгает» на экране во время загрузки или взаимодействия. Чтобы уменьшить CLS, необходимо заранее резервировать место под изображения, шрифты и динамические блоки, а также учитывать новые правила измерения для мягких навигаций (soft navigations).
Кстати, в AmSales мы делаем разработку сайтов под ключ и ИИ-интеграцию и анализ звонков под ключ. Если нужна помощь - напишите нам.
Что такое CLS и почему он важен
Визуальная стабильность страницы - это не просто вопрос эстетики, а критический фактор пользовательского опыта. Когда пользователь пытается кликнуть на кнопку, а в этот момент сверху подгружается баннер и кнопка внезапно смещается вниз, происходит «непреднамеренное действие». Это раздражает, вызывает ошибки при вводе данных и напрямую влияет на конверсию. Если ваш сайт «дергается», пользователь просто уйдет к конкурентам, где чтение текста не превращается в лотерею по попаданию в нужную область экрана.
Для поисковых систем, в частности для Google, стабильность верстки является одним из ключевых сигналов качества. CLS входит в состав Core Web Vitals - набора метрик, которые напрямую влияют на позиции сайта в поисковой выдаче. Если ваш показатель нестабильности высок, Google может снизить ранжирование сайта, так как он помечает такие ресурсы как неудобные для пользователей. В 2026 году это правило работает еще жестче, так как поисковик учитывает не только первичную загрузку, но и плавность переходов между разделами.
Технически CLS вычисляется как произведение двух параметров: impact fraction (доля площади экрана, затронутая сдвигом) и distance fraction (величина смещения относительно размера вьюпорта). Простыми словами: чем больше область, которая «прыгнула», и чем дальше она сместилась, тем выше значение метрики. Это не просто сумма всех сдвигов, а математически точный показатель того, насколько сильно верстка нарушает планы пользователя.
Важно понимать, что CLS - это не разовая метрика загрузки. Это динамический показатель, который отслеживает поведение страницы в течение всего времени, пока пользователь на ней находится. Если на сайте есть рекламные блоки, которые подгружаются через 10 секунд после открытия, они могут «уронить» ваш показатель CLS, даже если сама страница загрузилась идеально. Поэтому работа над стабильностью - это непрерывный процесс оптимизации кода и контента.
Актуальные нормы CLS в 2026 году
Многие разработчики по старой памяти пытаются добиться идеального нуля. Однако в современной практике Google установил вполне конкретные пороги, ориентируясь на реальное восприятие пользователя. Согласно актуальной документации Chrome UX Report и Search Central, показатели делятся на три категории:
| Категория | Значение CLS | Вердикт для SEO |
| Good | менее 0,1 | Отлично, метрика в норме |
| Needs Improvement | 0,1 - 0,25 | Требует доработки |
| Poor | более 0,25 | Критическая ошибка, риск падения позиций |
Важный нюанс: если ваш показатель составляет, например, 0,05, это не значит, что у вас «идеальный» сайт. Это значит, что вы входите в зону Good. Не стоит тратить сотни часов разработки на борьбу за снижение CLS с 0,02 до 0,005, если это не критически важный лендинг. Фокусируйтесь на тех страницах, где значение заходит за порог 0,1. Именно этот порог является водоразделом между качественным сайтом и ресурсом, который поисковые системы считают нестабильным.
Стоит отметить, что в 2026 году акценты сместились. Если раньше все внимание было сосредоточено на первой загрузке (LCP и CLS при старте), то теперь Google уделяет огромное внимание тому, как страница ведет себя в процессе использования. Если ваш основной CLS в норме, но при клике на фильтр в каталоге контент резко смещается, это все равно будет негативно сказываться на общих метриках Core Web Vitals. Порог 0,1 остается золотым стандартом для всех сценариев взаимодействия.
Как работает сессионная модель измерения
Это важнейшее обновление, которое часто путает даже опытных SEO-специалистов. Раньше считалось, что CLS - это сумма всех сдвигов, произошедших за всё время жизни страницы. Но такая модель была неточной. Представьте, что пользователь открыл статью, пролистал ее (произошел сдвиг), посидел на ней 5 минут, а потом кликнул на меню и снова произошел сдвиг. Суммирование этих сдвигов давало огромные, неадекватные реальности цифры.
Сейчас используется сессионная модель. Измерение разбивается на «сессионные окна». Окно длится максимум 5 секунд. Если в течение этой секунды не происходит новых сдвигов, окно закрывается. Из всех таких окон в отчет идет только то, где зафиксирован самый большой суммарный сдвиг. Это позволяет более точно оценивать реальный опыт пользователя: мы смотрим не на общую сумму «дерганий» за весь визит, а на самый тяжелый эпизод нестабильности.
Зачем это сделали? Чтобы разделить эффект от загрузки страницы и эффект от действий пользователя. Если пользователь долго читает статью без сдвигов, а потом в самом конце случайно кликнул на кнопку, которая вызвала сдвиг - это один эпизод. Если сайт постоянно «дергается» мелкими частями в течение минуты, это будет выглядеть как одна длинная серия сдвигов. Сессионная модель позволяет не накапливать ошибки, которые на самом деле не мешают пользователю в конкретный момент времени.
Для разработчиков это означает, что теперь нельзя просто «подправить» верстку на загрузке и забыть. Нужно проверять стабильность при взаимодействии. Если ваш сайт - это SPA (Single Page Application), где переходы между страницами происходят без перезагрузки, старые методы проверки могут не работать. Современные инструменты анализа смотрят именно на эти переходы, оценивая их как отдельные view/URL.
Основные причины прыжков контента на сайте
Проблемы с CLS редко возникают из-за какой-то одной фатальной ошибки. Чаще это совокупность мелких недочетов в верстке и порядке загрузки ресурсов. Основная причина - отсутствие зарезервированного пространства. Когда браузер не знает, какого размера будет элемент (картинка, баннер, блок с текстом), он считает его размером 0x0 пикселей. Как только ресурс загружается, браузер вынужден «раздвинуть» контент, чтобы вставить его на место, и все, что было ниже, улетает вниз.
Ключевые виновники хаоса на странице:
- Изображения и видео без указанных атрибутов width и height.
- Рекламные блоки (AdSense и другие), которые вставляются динамически.
- Шрифты, которые меняют размер или начертание после загрузки.
- Динамический контент, который подгружается через JS (например, уведомления о куки или чат-боты).
- Интроспекция DOM-дерева, когда скрипты меняют высоту элементов в процессе работы.
Рассмотрим пример с баннером. Это классика. На макете дизайнер нарисовал баннер высотой 250px. В коде это просто
Еще одна частая проблема - это внедрение элементов в уже загруженную страницу. Например, когда пользователь прокручивает страницу, и вверху внезапно появляется плавающая панель (sticky header) или сообщение о подписке. Если этот элемент не зарезервирован в верстке заранее, он вызовет скачок контента. В 2026 году, когда важно учитывать soft navigations, такие динамические изменения стали еще более критичными для оценки стабильности.
Как исправить ошибки с размерами изображений
Это самый простой и эффективный способ уменьшить CLS. Правило номер один: всегда указывайте атрибуты width и height для всех изображений, которые не имеют фиксированного размера через CSS. Даже если вы используете адаптивные изображения с `max-width: 100%`, браузер должен знать соотношение сторон (aspect ratio) до того, как картинка загрузится. В современных стандартах это решается через CSS-свойство `aspect-ratio` или через использование атрибутов в HTML.
Когда вы указываете `width="800" height="600"`, браузер заранее вычисляет пропорции. Даже если картинка будет сжиматься под мобильный экран, браузер «забронирует» место под нее в пропорциях 4:3. Это предотвращает ситуацию, когда пустое место внезапно превращается в блок контента. Для видео ситуация аналогичная: всегда задавайте контейнеру для видео фиксированное соотношение сторон, чтобы плеер не «прыгал» при инициализации.
Если вы используете современные форматы изображений (WebP, AVIF), это не меняет правила. Атрибуты размеров остаются обязательными. При работе с `srcset` (для адаптивных картинок) браузер сам поймет, какой файл скачать, но информация о пропорциях должна быть доступна ему мгновенно из HTML-разметки. Это позволяет избежать «мерцания» контента при загрузке тяжелых медиафайлов.
Пример из практики: если у вас есть интернет-магазин с карточками товаров, убедитесь, что контейнер для фото товара имеет заданную высоту. Если фото не загрузится, пользователь все равно увидит пустую область нужного размера, а не «схлопнутый» блок. Это сохранит стабильность верстки и предотвратит резкое смещение цен и названий товаров при загрузке фото.
Оптимизация шрифтов и динамического контента
Шрифты - это скрытый убийца CLS. Проблема в эффекте FOIT (Flash of Invisible Text) или FOUT (Flash of Unstyled Text). Когда браузер находит текст, но еще не загрузил кастомный шрифт, он либо показывает пустую область, либо использует стандартный системный шрифт. Когда кастомный шрифт наконец загружается, он часто имеет другие метрики (ширину букв, высоту строки). Текст пересчитывается, и всё, что находится под ним, сдвигается.
Чтобы это исправить, используйте свойство `font-display: swap;`. Оно заставляет браузер сначала показать текст системным шрифтом, а затем заменить его на кастомный. Но чтобы не было «прыжка» при замене, используйте современные возможности CSS для подбора похожих системных шрифтов (font fallback) или задавайте `size-adjust` в `@font-face`. Это позволит сделать системный шрифт максимально похожим по размерам на ваш основной шрифт, минимизируя смещение при переключении.
С динамическим контентом (баннеры, чаты, уведомления) ситуация сложнее. Главный совет: никогда не вставляйте элементы, которые меняют высоту страницы, без предварительного резервирования места. Если вы знаете, что вверху появится плашка с куки, зарезервируйте под нее место в CSS (например, через `min-height`). Если это рекламный блок, используйте контейнер с фиксированной минимальной высотой. Это может оставить пустое место, но пустое место - это не прыжок контента.
Также стоит уделить внимание скриптам, которые вставляют элементы в DOM. Если скрипт работает через `appendChild` или `insertBefore` без предварительного резервирования места, он гарантированно вызовет CLS. Лучшая стратегия - это создание "скелетов" (skeleton screens) или пустых блоков с заданными размерами, которые заполняются контентом только после полной загрузки данных.
Влияние soft navigation на стабильность страницы
В 2026 году мы вступили в эру, когда классическая модель «одна страница - один запрос» уходит в прошлое. Современные сайты - это чаще всего SPA (Single Page Applications) на базе React, Vue или Angular. В таких приложениях переход между страницами происходит без полной перезагрузки браузера. Это называется soft navigation (мягкая навигация). И это создает новые вызовы для CLS.
Раньше Google оценивал CLS только при загрузке страницы. Теперь, благодаря внедрению метрики `experimental_cumulative_layout_shift_with_softnavs`, поисковик видит сдвиги контента внутри таких переходов. Если пользователь переходит из каталога в карточку товара, и при этом контент на странице начинает «прыгать» (например, из-за подгрузки новых элементов), это теперь учитывается как нарушение стабильности. Теперь CLS оценивается не только по полной загрузке, но и по отдельным view/URL внутри одной сессии.
Почему это важно для бизнеса? Потому что разработчики часто забывают оптимизировать переходы. Они фокусируются на скорости первой загрузки, но забывают, что при переходе по внутренним ссылкам страница может вести себя нестабильно. Это может быть связано с тем, что компоненты подгружаются асинхронно и не имеют заданных размеров. В итоге, пользователь получает ощущение «дерганого» интерфейса, даже если первая загрузка сайта была идеальной.
Для борьбы с проблемами мягкой навигации необходимо использовать специализированные методы рендеринга. Например, в React можно использовать `Suspense` для управления состояниями загрузки, создавая стабильные заглушки. Важно, чтобы структура DOM-дерева при переходе между состояниями оставалась максимально предсказуемой. Если при смене маршрута (route) меняется корневой контейнер или его размеры, это неминуемо приведет к высокому CLS в рамках новой сессии.
Чек-лист проверки Core Web Vitals
Чтобы ваш сайт соответствовал стандартам Google и не терял позиции, необходимо регулярно проводить аудит. CLS - это метрика, которую нельзя оценить разовым тестом в Chrome DevTools, так как она зависит от реального поведения пользователей. Используйте данные из Google Search Console и CrUX (Chrome UX Report) для получения реальной картины.
Проверьте следующие пункты:
- Все ли изображения и видео имеют атрибуты width и height или заданные через CSS aspect-ratio?
- Зарезервированы ли места под рекламные блоки и динамические вставки (баннеры, чаты)?
- Используется ли `font-display: swap` и настроены ли fallback-шрифты для минимизации сдвига?
- Нет ли в верстке элементов, которые меняют свою высоту без участия пользователя (например, из-за подгрузки контента)?
- Как ведут себя переходы между разделами сайта (soft navigations) - нет ли резких сдвигов при смене контента?
Если вы обнаружили проблемы, начните с самых очевидных - размеров изображений. Это дает самый быстрый и заметный результат. Затем переходите к шрифтам и динамическим блокам. Помните, что цель - не достижение нуля, а удержание показателя в зоне "Good" (менее 0,1). Регулярный мониторинг этих метрик - это залог стабильного SEO и высокого удержания пользователей.
Что запомнить:
- Порог CLS в норме - менее 0,1.
- Измеряется сессионная модель: учитывается худшее окно в 5 секунд, а не сумма за весь визит.
- Всегда резервируйте место под изображения, видео и рекламные блоки.
- В 2026 году важно учитывать CLS не только при загрузке, но и при переходах внутри SPA (soft navigations).
/ Поможем с этим
Подходящие услуги AmSales
/ Читайте также
Хотите так же?
Начнём с бесплатной диагностики: покажем, где теряются деньги и как система продаж, AI и автоматизация ускорят рост.