Лучшие советы по устранению проблем CLS в Search Console

Table of contents

CLS: предыстория

Cumulative Layout Shift измеряет неожиданные смещения макета. Каждый раз, когда видимый элемент меняет положение во время загрузки страницы или взаимодействия с ней, вычисляется оценка смещения макета. Накопленная оценка и есть CLS.

Распространённые причины:

• Изображения или iframe без явных атрибутов width и height
• Реклама, которая расширяется после того, как окружающий контент уже отрисован
• Динамически внедрённый контент (баннеры, уведомления о cookies, виджеты чата), вставленный поверх существующего контента
• Веб-шрифты, вызывающие мигание и перекомпоновку при загрузке (FOUT/FOIT)
• JavaScript сторонних сервисов, добавляющий элементы интерфейса после первоначальной отрисовки

По теме: Как устранить проблемы LCP в Search Console

Измерение CLS

Google Search Console

Отчёт Core Web Vitals в Search Console — отправная точка. Он отображает страницы, помеченные как «Плохо» (CLS ≥ 0,25) или «Требует улучшения» (0,1–0,25), сгруппированные по типу проблемы. Используйте этот отчёт, чтобы получить список затронутых URL.

PageSpeed Insights

PageSpeed Insights (PSI) показывает как лабораторные данные (симуляция Lighthouse), так и полевые данные от реальных пользователей через Chrome UX Report (CrUX). Полевые данные важнее для ранжирования — они отражают реальный опыт пользователей, а не только синтетический тест.

PSI симулирует только начальную область просмотра при загрузке, поэтому может не фиксировать CLS, вызванный прокруткой или взаимодействием пользователя. Для таких случаев используйте Chrome DevTools.

Chrome DevTools и расширение Web Vitals

Расширение Web Vitals для Chrome (поддерживается Google) отображает показатели CLS в реальном времени по мере прокрутки и взаимодействия со страницей. Это самый быстрый способ вручную воспроизвести смещения макета. Панель Performance в Chrome DevTools также выделяет записи смещений макета с аннотациями, показывающими, какие элементы сдвинулись и насколько.

Устранение проблем CLS

Добавление width и height ко всем изображениям и iframe

Это наиболее эффективное исправление для большинства сайтов. Без явных размеров браузер не знает, сколько места зарезервировать, пока изображение загружается, поэтому контент ниже сдвигается вниз, когда изображение появляется.

<!-- Плохо: нет размеров -->
<img src="photo.jpg" alt="…">

<!-- Хорошо: явные размеры позволяют браузеру зарезервировать место -->
<img src="photo.jpg" alt="…" width="800" height="450">

Современный CSS (aspect-ratio) даёт тот же эффект для адаптивных изображений, но явная установка атрибутов width и height в HTML — наиболее надёжный подход; большинство современных фреймворков и CMS-пайплайнов обрабатывают это автоматически.

Резервирование места для рекламы

Реклама — наиболее распространённая причина высокого CLS на монетизируемых сайтах. Рекламные сети отдают динамические размеры, и если место не зарезервировано, страница перекомпоновывается при загрузке объявления.

1. Зарезервируйте фиксированный контейнер (min-height, соответствующий наиболее распространённому размеру рекламы), прежде чем загружается рекламный тег.
2. Не сворачивайте контейнер, если реклама не показывается — пустой заполнитель предотвращает повторную перекомпоновку.
3. Особое внимание уделите рекламе, размещённой в верхней части области просмотра. Нефиксированные объявления, вставленные выше линии сгиба, дают худшие показатели CLS.
4. Используйте исторические данные о показах из вашей рекламной сети, чтобы определить наиболее распространённые размеры для каждого слота, и подберите размер контейнера соответственно.

Избегание вставки контента поверх существующего

Баннеры с согласием на использование cookies, запросы на уведомления и виджеты чата, которые загружаются асинхронно и появляются поверх существующего контента, — частый источник CLS. Варианты решения:

• Загружайте их в оверлей с фиксированным позиционированием (они не влияют на поток документа).
• Заранее выделите место в макете, если они должны появляться inline.
• Для баннеров с cookie особенно рассмотрите размещение внизу экрана — это полностью устраняет CLS и не менее соответствует требованиям.

Исправление загрузки веб-шрифтов (FOIT и FOUT)

FOIT (Flash of Invisible Text) возникает, когда браузер скрывает текст до загрузки пользовательского шрифта. FOUT (Flash of Unstyled Text) возникает, когда сначала отображается резервный шрифт, а затем он заменяется — разница в метриках шрифтов вызывает смещение макета.

Решение: font-display: swap в сочетании с <link rel="preload"> для критически важных шрифтов:

<link rel="preload" href="/fonts/my-font.woff2" as="font" type="font/woff2" crossorigin>

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/my-font.woff2') format('woff2');
  font-display: swap;
}

font-display: swap вызывает FOUT (видимый, но неоформленный текст), а не FOIT (невидимый текст), что лучше для CLS, поскольку текст виден сразу. Чтобы дополнительно снизить влияние замены на метрику, используйте CSS-свойство size-adjust для согласования метрик резервного шрифта с пользовательским — это минимизирует перекомпоновку при активации пользовательского шрифта.

JavaScript сторонних сервисов

Скрипты сторонних сервисов (кнопки «Поделиться», виджеты комментариев, онлайн-чат, попапы аналитики) загружаются асинхронно и нередко внедряют элементы интерфейса уже после первоначальной отрисовки страницы. Чтобы минимизировать их влияние на CLS:

• По возможности размещайте визуальные элементы сторонних сервисов ниже начальной области просмотра — контент внизу страницы успевает загрузиться до того, как пользователь до него добирается.
• Заранее задайте размеры контейнера перед запуском скрипта, чтобы браузер уже знал, сколько места зарезервировать.
• Используйте вкладку Network в Chrome DevTools с фильтром по сторонним источникам, чтобы выявить скрипты, вносящие вклад в смещения макета.

Отложенная загрузка и заполнители

Отложенная загрузка откладывает загрузку изображений до момента приближения к области просмотра, экономя трафик. Но если заполнитель не задан, контейнер изображения сворачивается до нулевой высоты, а затем резко раскрывается при загрузке изображения.

Всегда убеждайтесь, что элементы с отложенной загрузкой имеют явные размеры или aspect-ratio, заданный через CSS, — браузер должен зарезервировать правильное место ещё до загрузки изображения. Это актуально как для нативного loading="lazy", так и для JavaScript-загрузчиков.

CLS — Вопросы и ответы 2026

Является ли FID сигналом ранжирования в 2026 году?

Нет. Google официально вывел FID (First Input Delay) из состава Core Web Vitals в марте 2024 года и заменил его INP (Interaction to Next Paint). Текущая тройка CWV: LCP, INP и CLS. Обновите всю внутреннюю документацию или инструменты, в которых ещё упоминается FID.

Какой показатель CLS считается хорошим?

Пороги Google: ниже 0,1 — «хорошо», 0,1–0,25 — «требует улучшения», выше 0,25 — «плохо». Стремитесь к значению ниже 0,1. Показатель измеряется на 75-м процентиле загрузок страниц в полевых данных CrUX.

Влияет ли CLS на ранжирование?

Да, но это один сигнал среди многих. Core Web Vitals являются фактором ранжирования, связанным с качеством страницы, с середины 2021 года. Плохой CLS не обрушит сильную страницу, но может стать решающим при равных условиях и напрямую ухудшит показатели взаимодействия пользователей (показатель отказов, глубина сессии).

Мой показатель PSI показывает хороший CLS, но Search Console помечает страницу как плохую — кому верить?

В случае расхождения доверяйте Search Console (полевым данным), а не лабораторным данным PSI. Лабораторные тесты PSI симулируют только начальную загрузку области просмотра; они не фиксируют CLS, вызванный прокруткой, заменой шрифтов на медленных соединениях или рекламой, загруженной после взаимодействия. Полевые данные CrUX в Search Console отражают реальных пользователей в реальных условиях.

Полезные материалы:

• Как устранить проблемы LCP в Search Console
• Как оптимизировать скорость сайта
• Технический SEO-аудит

Краткая версия

Если вы читаете это, потому что описанный рабочий процесс съедает вашу неделю, именно для таких петель я создаю ИИ-агентов. Два слота разработки открыты одновременно.

Обновлено для мая 2026 года

История Google в 2026 году — это AI Overviews повсюду: эксперимент SGE 2023 года стал стандартной функцией в мае 2024 года и теперь появляется примерно в ~60% информационных запросов в США. Для операторов SEO и рекламы:

• Органический CTR по запросам с AI Overviews снизился на 15–30% в среднем согласно опубликованным исследованиям Ahrefs, Authoritas и аналогичных компаний (данные 2024–25).
• Google Ads переименовал ряд функций PMax в AI-powered Search; интерфейс управления кампаниями теперь по умолчанию предлагает стратегии ставок на основе ИИ.
• Search Console добавил фильтр «показы AI Overview» в конце 2025 года — если в каком-либо материале здесь упоминается отчётность GSC, руководство требует обновления.
• Рекламная выручка Google превысила ~265 млрд долларов в 2024 году; Search по-прежнему составляет ~57% от общей выручки Alphabet.

Ответ на вопрос «как Google зарабатывает деньги» в 2026 году: по-прежнему реклама в поиске (доминирует), но реклама на YouTube, Cloud и подписки (YouTube Premium + Google One) теперь тоже являются существенными статьями.