Как резервировать место для изображений?

Браузер не знает размеры изображений до загрузки страницы. Когда картинка появляется, весь макет прыгает и сдвигается. Добавьте width и height в теге img или используйте CSS aspect-ratio (16/9). Браузер резервирует место в потоке документа. Когда изображение загружается, место уже зарезервировано. CLS остается нулевым.

Как предотвратить сдвиги из-за рекламы и шрифтов?

Рекламные баннеры создают самый большой CLS из всех источников. Резервируйте место контейнером (width: 300px; height: 250px). Веб-шрифты вызывают аналогичную проблему: браузер показывает fallback-шрифт, потом подменяет нужный. Текст меняет размер. Используйте font-display: swap или preload для критичных шрифтов. Оба способа уменьшают CLS от этих элементов.

Когда использовать CSS-трансформации для динамического контента?

Изменение width, height, top, left пересчитывает весь layout браузером. Это создает CLS. Вместо этого применяйте transform: translateX() и transform: scale() — они работают без пересчета макета. Модальные окна и pop-ups ставьте на position: fixed, чтобы не влияли на основной документ. Каждое решение улучшает метрику CLS и показатели Web Vitals для Google.

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

Что такое CLS и почему это важно

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

Высокий CLS означает, что макет часто меняется непредвиденно. Это раздражает посетителей, заставляет их совершать ошибки при клике и в итоге уходить со страницы. Для Google это показатель плохого пользовательского опыта, поэтому сайты с высоким CLS теряют позиции в выдаче.

Конкретный пример: как CLS влияет на реального пользователя

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

Раздражение гарантировано. Пользователь закроет вкладку. Конверсия упала. Это происходит потому, что браузер пересчитывает размеры элементов по мере загрузки нового контента. Каждый такой непредвиденный сдвиг добавляет к итоговому показателю CLS на странице.

Почему Google штрафует CLS в ранжировании

В 2021 году Google официально включила CLS в Core Web Vitals — это три главные метрики визуальной стабильности и производительности, которые прямо влияют на позиции в выдаче. CLS стала частью Page Experience signal.

Что это значит практически:

Высокий CLS на сайте → Google видит плохой пользовательский опыт → страница теряет позиции в поиске → сайт теряет органический трафик и конверсии.

Для SEO-специалистов оптимизация CLS стала обязательной задачей. Улучшение этой метрики, даже на 0,05 единицы, может дать видимый прирост трафика, особенно на конкурентных запросах.

Из-за чего происходят сдвиги элементов

Сдвиг макета возникает по пяти основным причинам. Понимание каждой поможет быстро найти и исправить проблему на вашем сайте.

Изображения без атрибутов width, height или aspect-ratio

Самая частая причина высокого CLS. Когда вы вставляете изображение в HTML без указания ширины и высоты, браузер не знает, сколько места нужно зарезервировать. Сначала браузер отводит место под текст, а когда загружается картинка, всё переоформляется и прыгает.

Проблема особенно заметна при медленной загрузке. Пользователь скроллит, видит текст, потом вдруг появляется огромное изображение, и всё сдвигается вверх.

Решение: всегда указывайте width и height в теге img или используйте CSS-свойство aspect-ratio для сохранения пропорций до загрузки картинки.

Веб-шрифты с fallback-шрифтами разного размера

Когда загружается собственный веб-шрифт, браузер какое-то время показывает текст другим шрифтом (fallback). Новый шрифт часто имеет иные размеры — он шире или уже запасного. Когда браузер переключается на основной шрифт, весь текст и элементы вокруг него сдвигаются. Каждый такой переход добавляет к значению CLS.

Решение: используйте CSS-свойство font-display: swap. Это говорит браузеру сразу показать запасной шрифт и заменить его после загрузки; проверьте, не вызывает ли замена сдвиг макета. Также помогает preload для шрифтов — браузер начнёт их загружать раньше.

Рекламные блоки и виджеты загружаются асинхронно

Реклама, чаты поддержки, социальные виджеты — это динамический контент, который загружается после HTML. Если вы не резервируете место для рекламного баннера заранее, когда он появляется, всё на странице сдвигается.

Кроме того, реклама часто имеет непредсказуемый размер. В один момент баннер 300×600 пикселей, в другой — 320×50. Браузер пересчитывает макет каждый раз.

Решение: всегда резервируйте место под рекламные блоки и виджеты, указывая фиксированный width и height контейнера. Даже если реальный размер немного отличается, это лучше полного переформатирования страницы.

Динамический контент: модальные окна, уведомления, всплывающие окна

На странице появляются уведомления о скидках, modal-окна с просьбой подписаться, сообщения о доставке. Если это загружается неожиданно для пользователя, это добавляет сдвиг макета.

То же с бесконечной прокруткой. Когда добавляются новые элементы в feed, если они загружаются в видимую область, происходит сдвиг.

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

Анимации и переходы, которые меняют размер элементов

Некоторые CSS-анимации меняют размеры элементов или их позицию. Например, кнопка при наведении увеличивается и сдвигает соседние элементы. Если такие изменения происходят в видимой области, они добавляют к CLS.

Решение: используйте transform вместо изменения width/height — transform не влияет на поток документа и не вызывает переформатирования макета.

Как измерить CLS на своем сайте

Перед исправлениями нужно понять текущее значение CLS и где именно происходят главные сдвиги.

Что означают значения CLS: • 0–0,1 — хорошо, пользователь практически не заметит сдвигов • 0,1–0,25 — нужно улучшить, есть заметные проблемы • выше 0,25 — плохое значение CLS; найдите и устраните причины сдвигов

Проверка CLS через PageSpeed Insights

Это самый быстрый способ получить первичную оценку. Откройте pagespeed.web.dev, вставьте адрес сайта и нажмите Enter. Дождитесь анализа (30–60 секунд). Скролльте вниз до секции «Core Web Vitals» и найдите «Cumulative Layout Shift».

Вы увидите число от 0 до 1 с цветным индикатором. Красный — плохо, оранжевый — нужно улучшить, зелёный — в норме. Под каждым показателем Google покажет конкретные проблемы, вызывающие сдвиги, и рекомендации по исправлению.

Проверка CLS в Chrome DevTools

Откройте страницу в браузере Chrome, нажмите F12 для DevTools, перейдите на вкладку Performance. Нажмите красную кнопку Record и дождитесь полной загрузки страницы. Остановите запись.

В графике загрузки вы увидите красные полосы — это CLS-события. Каждая полоса показывает момент, когда произошёл сдвиг. Наведите мышку на красную полосу — Chrome покажет величину сдвига и какие элементы двигались. Внизу в разделе Summary отображается общее значение CLS для сессии.

В боковой панели DevTools откройте «Rendering» — там видны все события изменения размеров и перестроения макета, что помогает точно определить источник проблемы.

Google Search Console для мониторинга на реальных пользователях

В Google Search Console найдите раздел «Основной веб-контент». Здесь отображается, какой процент страниц сайта имеет хороший, нужно улучшить или плохой CLS, основываясь на поведении реальных пользователей Chrome.

Красный флаг в Search Console — это серьезный сигнал. Когда видите его, CLS точно нужно исправлять в приоритетном порядке.