INP и CLS — реальные данные Core Web Vitals

Что это

INP (Interaction to Next Paint) и CLS (Cumulative Layout Shift) — два из трёх метрик Core Web Vitals, которые Google измеряет на реальных пользователях через Chrome UX Report (CrUX). INP фиксирует задержку между действием пользователя (клик, нажатие клавиши, тап) и визуальным ответом страницы. CLS измеряет суммарный сдвиг элементов страницы во время загрузки — когда кнопка «прыгает» вниз перед тем, как пользователь успел нажать. Оба показателя берутся из полевых данных (Field Data), а не лабораторных тестов.

Почему это важно для SEO

С марта 2024 года INP заменил FID в качестве официальной метрики Core Web Vitals. Google напрямую учитывает все три CWV в алгоритме ранжирования через Page Experience сигнал. Сайты с «плохими» значениями (INP > 500 мс, CLS > 0,25) теряют позиции в конкурентных нишах — особенно на мобильных устройствах, где Chrome собирает основной объём данных CrUX.

CLS критичен для поведенческих факторов: если баннер или шапка «прыгает» во время чтения, пользователь уходит. По данным исследования Google, улучшение CLS с «плохого» до «хорошего» уровня снижает отказы на 24% на мобильных страницах. Для Яндекса эти метрики напрямую в ранжирование не заведены, но косвенно влияют через поведенческие факторы (ИКС учитывает время на сайте и возвраты).

Как проверить вручную

1. Google Search Console → Основные интернет-показатели. Откройте раздел, выберите тип устройства (мобильные / ПК). GSC группирует URL по статусам: «Плохо», «Требует улучшения», «Хорошо». Скачайте список проблемных страниц через экспорт.

1. PageSpeed Insights. Вставьте URL на pagespeed.web.dev. Смотрите раздел «Field Data» — именно здесь реальные данные CrUX за 28 дней. Лабораторные данные (Lighthouse) ниже — это симуляция, она не влияет на ранжирование напрямую.

1. Chrome DevTools → Performance → INP. Откройте DevTools, вкладка Performance Insights или используйте расширение Web Vitals. Кликайте по элементам страницы — расширение покажет INP в реальном времени с разбивкой: Input Delay, Processing Time, Presentation Delay.

1. Screaming Frog + CrUX API. В настройках Screaming Frog подключите Google API и включите Core Web Vitals. Краулер добавит колонки INP и CLS к каждому просканированному URL — удобно для сайтов от 500 страниц.

1. Топвизор. В разделе «Аудит» проверяет CWV через PageSpeed API, но это лабораторные данные. Для полевых — только GSC или CrUX API напрямую.

Как исправить

INP: снижаем задержку отклика

Основные виновники высокого INP — тяжёлые JavaScript-обработчики событий. Проверяйте через DevTools → Performance → Long Tasks.

Разбивайте длинные задачи с помощью scheduler.yield():

async function handleClick() {
  processFirstPart();
  await scheduler.yield(); // уступаем главному потоку
  processSecondPart();
}

Откладывайте сторонние скрипты (чаты, пиксели, аналитику) через defer или загружайте после load:

<script src="analytics.js" defer></script>

WordPress: установите плагин Perfmatters или WP Rocket — они откладывают JS и убирают неиспользуемые скрипты. Проверьте, не блокирует ли плагин WooCommerce главный поток на страницах корзины.

Tilda: встроенный редактор не даёт тонкой настройки JS. Выносите сторонние скрипты в блок T123 с атрибутом defer. Для виджетов чата — подключайте через «After body open».

1C-Bitrix: в настройках «Производительность» включите объединение JS-файлов и отложенную загрузку. Проверьте, не грузит ли компонент главного меню синхронные AJAX-запросы.

Webflow: используйте настройку «Load in footer» для кастомных скриптов в Project Settings → Custom Code.

CLS: фиксируем размеры элементов

Всегда задавайте width и height для изображений и видео:

<img src="banner.jpg" width="800" height="400" alt="Баннер">

Резервируйте место под рекламные блоки и виджеты через CSS:

.ad-container {
  min-height: 250px;
  width: 100%;
}

Шрифты фиксируйте через font-display: optional или swap с явным указанием size-adjust:

@font-face {
  font-family: 'MyFont';
  src: url('font.woff2') format('woff2');
  font-display: swap;
  size-adjust: 98%;
}

Типичные ошибки

• Смешивать лабораторные и полевые данные. Lighthouse в DevTools и PageSpeed (лаборатория) могут показывать «хорошо», а Field Data — «плохо». Ранжирование зависит только от полевых данных CrUX.
• Игнорировать мобильные устройства. CrUX собирает данные преимущественно с Chrome на Android. Сайт может отлично работать на десктопе и провалить INP на мобильных.
• Фиксировать CLS только при первой загрузке. CLS считается на протяжении всей сессии. Сдвиги при скролле, открытии аккордеонов или подгрузке контента тоже учитываются.
• Устанавливать изображениям только один размер. width: 100% в CSS без HTML-атрибутов width/height не предотвращает CLS — браузер не знает соотношение сторон до загрузки файла.
• Не перепроверять после деплоя. CrUX обновляется каждые 28 дней. После исправлений нужно ждать цикл и следить за GSC — изменения не видны мгновенно.

Влияние на разные типы сайтов

Интернет-магазины страдают от INP на страницах каталога и корзины: фильтры, добавление в корзину, слайдеры — всё это тяжёлые обработчики событий. CLS критичен на карточках товаров, где изображения и цены подгружаются асинхронно. Для магазинов на Bitrix и WooCommerce типичный INP на мобильных — 600-900 мс, и здесь есть прямой потенциал роста позиций после оптимизации.

Контентные сайты и медиа чаще страдают от CLS из-за рекламных блоков (Google AdSense, Яндекс РСЯ) и виджетов комментариев. Лендинги обычно имеют лучшие показатели — меньше JS, но часто проваливают CLS из-за анимированных секций и шрифтов без резервирования места. SaaS-приложения с интерактивным интерфейсом — основная зона риска по INP: каждый клик по дашборду потенциально увеличивает метрику.