Три Core Web Vitals в 2026 году

Google измеряет три основные полевые метрики опыта работы со страницей. У каждой есть порог для «Хорошей» производительности:

• Largest Contentful Paint (LCP) — время отрисовки самого крупного видимого элемента. Хорошо: менее 2,5 секунд.
• Interaction to Next Paint (INP) — отзывчивость на все взаимодействия пользователя (заменила FID в марте 2024 года). Хорошо: менее 200 мс.
• Cumulative Layout Shift (CLS) — визуальная стабильность во время загрузки. Хорошо: менее 0,1.

Баннер согласия, который блокирует отрисовку, запускает тяжёлый JavaScript при загрузке или вносит поздние изменения макета, может перевести любую из этих метрик в зону «Требует улучшения» или «Плохо» — а Google использует 28-дневные полевые данные от реальных пользователей Chrome, поэтому временные проблемы становятся постоянными сигналами ранжирования.

Как баннеры согласия вредят LCP

Largest Contentful Paint обычно срабатывает на главном изображении или заголовке. Несколько паттернов согласия задерживают его без необходимости:

Блокирующие отрисовку скрипты CMP

Синхронная загрузка CMP из заголовка документа останавливает парсинг HTML, пока скрипт не загрузится и не выполнится. Если CMP размещена на медленном CDN или имеет холодный кэш, вы можете добавить 200-800 мс к LCP глобально.

Баннер, закрывающий главный элемент

Если баннер согласия позиционируется как модальное наложение, закрывающее элемент LCP, браузеры всё равно будут измерять LCP по закрытому элементу. Однако если баннер является самым крупным отрисованным элементом, он становится кандидатом на LCP — и если он отрисовывается через JavaScript после загрузки страницы, LCP искусственно высок.

Решение: асинхронная загрузка с крошечным встроенным загрузчиком

Загружайте полную CMP асинхронно (`async` или `defer`), только с крошечным встроенным скриптом для первоначального отображения баннера. Стремитесь к загрузчику меньше 5КБ в gzip. Полная логика поведения, списки поставщиков и UI-обвязка могут лениво загружаться после первой отрисовки.

Как баннеры согласия вредят INP

Interaction to Next Paint измеряет худшее время отклика по всем кликам, нажатиям и нажатиям клавиш во время сессии. Взаимодействия с согласием на cookie часто являются первым взаимодействием пользователя — поэтому медленная кнопка «Принять» портит оценку.

Тяжёлая работа при нажатии «Принять»

Многие CMP выполняют синхронную работу при нажатии «Принять»: загрузку 40+ скриптов поставщиков, запись в localStorage, запуск событий dataLayer, обновления Google Consent Mode. Если это превышает 200 мс, INP страдает.

Решение: ставьте работу в очередь после отрисовки

При нажатии «Принять» немедленно скройте баннер и запланируйте тяжёлую работу с `requestIdleCallback` или `setTimeout(0)`. Пользователь видит мгновенное исчезновение баннера; скрипты поставщиков загружаются в фоне, не блокируя взаимодействие.

Как баннеры согласия вредят CLS

Cumulative Layout Shift отслеживает неожиданное визуальное движение. Баннеры являются классическим источником CLS, когда они внедряются в DOM после того, как контент отрисован.

Позднее внедрение баннера

Если баннер появляется через 800 мс после LCP, он отодвигает контент вниз и генерирует сдвиг макета. Даже небольшой баннер может вызвать оценку CLS 0,1+, если он затрагивает большую часть области просмотра.

Повторная отрисовка виджета настроек cookie

Виджеты настроек в подвале, загружающие логотипы поставщиков асинхронно, могут переформатировать весь подвал несколько раз, усугубляя CLS.

Решение: резервируйте место заранее

Используйте CSS для резервирования места баннера с самой первой отрисовки — заполнитель фиксированной высоты, `min-height` на подвале или зафиксированный снизу баннер, который не отодвигает контент. Современные CMP должны предлагать конфигурацию без CLS «из коробки».

Google Consent Mode V2 и производительность

Consent Mode V2 позволяет тегам Google работать в состоянии без cookie до согласия, передавая сигналы через `gtag('consent', 'default', {...})`. Это отлично для непрерывности измерений, но сама библиотека gtag.js занимает 50-90КБ. Загружайте её асинхронно и устанавливайте значения по умолчанию как можно раньше, чтобы избежать гонки состояний.

• Устанавливайте значения по умолчанию до загрузки gtag — поместите вызов согласия по умолчанию в заголовок, до скрипта gtag.js.
• Используйте `analytics_storage: 'denied'` как значение по умолчанию — минимизирует данные, собираемые до согласия.
• Обновляйте при нажатии «Принять» через requestIdleCallback — избегайте блокировки основного потока.

Измерение влияния CMP на Core Web Vitals

Не угадывайте — измеряйте. Используйте эти инструменты для количественной оценки влияния вашего баннера:

• PageSpeed Insights — полевые данные из Chrome UX Report плюс лабораторный аудит Lighthouse. Сравните оценки со скриптом CMP и без него.
• Расширение Web Vitals для Chrome — наложение LCP, INP, CLS в реальном времени во время локального тестирования.
• WebPageTest.org — представление filmstrip и waterfall, показывающее точно, когда баннер отрисовывается и что он блокирует.
• Отчёт Core Web Vitals в Search Console — 28-дневные полевые данные, сгруппированные по шаблону URL. Проверьте, отличаются ли оценки целевых страниц с вашим баннером от страниц без него.

Как FlexyConsent остаётся быстрым