Что изменилось
В марте 2024 Google заменил First Input Delay (FID) на Interaction to Next Paint (INP) как один из трёх Core Web Vitals — теперь это часть оценки страницы для ранжирования. Если у вас был зелёный FID, ничего о вас не говорит — INP может быть в красной зоне, потому что это принципиально другая метрика. FID мерял задержку до начала обработки первого клика. INP измеряет время от клика до того, как браузер реально нарисовал результат на экране — для всех взаимодействий, не только первого.
Целевые значения
- INP ≤ 200 мс — хорошо
- INP 200–500 мс — нужны улучшения
- INP > 500 мс — плохо
Как мерять на проде
Lighthouse в DevTools — это синтетика, INP она оценивает приближённо. Реальные данные приходят только из field — то есть от настоящих пользователей. Два главных источника: CrUX (Chrome User Experience Report, попадает в PageSpeed Insights и GSC) и собственный RUM. Site Metrics Tool вытягивает CrUX автоматически по подключённому к проекту домену и показывает 75-й перцентиль за последние 28 дней — те же цифры, что Google использует для ранжирования.
Топ-5 причин плохого INP
- Долгий main-thread на клик: тяжёлые обработчики, синхронный setState с большим деревом, неоптимизированный React render.
- Третьи скрипты (аналитика, чаты): они блокируют main thread, ставьте через `defer` или web worker.
- Большие списки без виртуализации: вместо 1000 строк рисуйте 30 видимых через react-window или TanStack Virtual.
- Переключение тяжёлых табов: используйте `startTransition` чтобы переход не блокировал UI.
- Slow CSS animations на elements with high paint cost: упростите selectors, используйте transform/opacity вместо top/left.
Next.js специфика
В Next 15+ App Router включил Server Components по умолчанию — это сразу режет JS-bundle и улучшает INP. Если вы всё ещё на Pages Router, миграция на App Router даёт средне 30–50% улучшение INP без изменений в коде. Дополнительно: используйте `next/dynamic` с `ssr: false` для виджетов, не критичных для первого рендера, и предзагружайте критичные роуты через `prefetch`.
Частые вопросы
INP влияет на SEO?
Да. С марта 2024 INP — официальный сигнал ранжирования Google как часть Page Experience. Влияние не катастрофическое (одно из десятков), но при прочих равных страница с зелёным INP обходит страницу с красным.
Можно ли симулировать INP в тестах?
В Lighthouse — приближённо, в Chrome DevTools Performance — точно для отдельных взаимодействий. Но для оптимизации опирайтесь на field-данные (CrUX), потому что у реальных пользователей более слабые устройства, чем в CI.