INP

Как работает

INP замеряет время от момента взаимодействия (клик, тап, нажатие клавиши) до момента, когда браузер отрисовывает следующий кадр в ответ. Единица — миллисекунды. Google учитывает 98-й перцентиль всех взаимодействий за визит, чтобы редкие тяжёлые действия не терялись в среднем.

Пороговые значения: хорошо — INP ≤ 200 мс, требует улучшения — до 500 мс, плохо — больше 500 мс. Метрика собирается у реальных пользователей Chrome через CrUX. В отличие от предшественника FID, который смотрел только на первое взаимодействие, INP берёт худшее из всех — включая клики по фильтрам, открытие мобильного меню, разворачивание аккордеонов.

Замер в JavaScript через PerformanceObserver:

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log("INP-кандидат:", entry.duration, "мс");
  }
}).observe({ type: "event", buffered: true, durationThreshold: 40 });

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

INP — самая свежая из тройки Core Web Vitals: в марте 2024 года Google заменил ею FID, и требования стали строже. Теперь любое медленное взаимодействие в течение визита портит метрику — не только первый клик после загрузки.

Плохой INP — почти всегда следствие тяжёлого JavaScript на главном потоке: сторонние скрипты аналитики, чат-виджеты, рекламные сети, огромные React-бандлы без code-splitting. Пользователь тапает по кнопке — экран замирает на 400-500 мс, потом дёргается — и всё это до отрисовки результата.

Для Google плохой INP — прямой сигнал Page Experience и падение позиций в мобильной выдаче. Для Яндекса — рост отказов и падение поведенческих, что тоже прилетает в ранжирование, только косвенно.

Частые ошибки

• Обработчик клика делает синхронный запрос или тяжёлый пересчёт DOM в главном потоке.
• Сторонние скрипты чата, аналитики, антифрода загружаются без async и блокируют главный поток на 300-800 мс каждый.
• Рекламный SDK инициализируется в DOMContentLoaded и «съедает» первые секунды после загрузки.
• Открытие мобильного меню перерисовывает весь layout вместо изолированного контейнера.
• Аккордеон и tabs используют document.querySelectorAll('*') при каждом клике.
• React-бандл монолитный, без разбиения по маршрутам — все взаимодействия ждут гидрации всего дерева.

Как проверить

В Chrome DevTools вкладка Performance → запись сессии со взаимодействиями → блок Interactions показывает длительность каждого события. PageSpeed Insights выводит INP из полевых данных CrUX и подсказывает, какой скрипт занимает главный поток дольше всего. Расширение Web Vitals для Chrome фиксирует INP в реальном времени и подсвечивает элементы, вызвавшие худшее взаимодействие.

SEO Crawler забирает INP из CrUX API для каждой обходимой страницы и подсвечивает URL с плохими значениями. В отчёте это часть блока «Производительность» — с разбивкой по типам страниц (каталог, карточки, формы) и приоритизацией по трафику.

Вывод

INP — метрика отзывчивости, и главный её враг — сторонние JS-скрипты, забивающие главный поток. Разгружайте главный поток через async/defer на неблокирующих скриптах, откладывайте инициализацию чатов и рекламы до requestIdleCallback, делайте code-splitting крупных бандлов. Порог 200 мс на десктопе достижим почти всегда, на мобильном требует ревизии всего третьесторонного JS.