Interaction to Next Paint (INP)
Interaction to Next Paint (INP) - это метрика Core Web Vitals, которая измеряет, сколько времени требуется странице, чтобы визуально отреагировать после действия пользователя - клика, касания или нажатия клавиши. В марте 2024 года Google повысил INP до статуса официального фактора ранжирования, заменив им First Input Delay (FID).
Interaction to Next Paint (INP) - это метрика Core Web Vitals, которая измеряет, сколько времени требуется странице, чтобы визуально отреагировать после действия пользователя - клика, касания или нажатия клавиши. В марте 2024 года Google повысил INP до статуса официального фактора ранжирования, заменив им First Input Delay (FID).
Почему это важно
FID учитывал только задержку первого взаимодействия, тогда как INP отслеживает каждое взаимодействие на протяжении всего жизненного цикла страницы и оценивает её по самому медленному из них. Это точнее отражает то, что фактически ощущают пользователи. По данным Google, на 2026 год около 36% десктопных и 45% мобильных сайтов всё ещё не достигают порога "Good" - что делает оптимизацию INP явным преимуществом перед конкурирующими страницами.
Пороговые значения
| Оценка | Значение INP |
|---|---|
| Good | ≤ 200 мс |
| Needs Improvement | 200-500 мс |
| Poor | > 500 мс |
Оценивается по 75-му процентилю (p75) реальных пользовательских данных из Chrome User Experience Report (CrUX).
Что замедляет INP
Длительные задачи JavaScript: любая задача, удерживающая основной поток дольше 50 мс, блокирует следующее взаимодействие.
Input delay (задержка ввода): время до запуска обработчика события из-за того, что основной поток занят другой работой.
Presentation delay (задержка отрисовки): время между завершением обработки события и отрисовкой браузером следующего кадра - как правило, его вызывают сложные изменения DOM или макета.
Как оптимизировать
Разбивайте длительные задачи: используйте setTimeout, scheduler.yield() или requestIdleCallback, чтобы разделить задачи длиннее 50 мс.
Делайте обработчики событий лёгкими: не выполняйте тяжёлую работу внутри обработчика клика - откладывайте её на момент после следующего requestAnimationFrame.
Предотвращайте лишние повторные рендеры: в React используйте memo, useMemo и useCallback, чтобы избежать избыточных обновлений.
Используйте CSS contain: свойства вроде contain: content ограничивают область макета и отрисовки, делая рендеринг кадра дешевле.
Откладывайте сторонние скрипты: загружайте рекламу, аналитику и чат-виджеты с async/defer, чтобы они не блокировали взаимодействия.
Инструменты измерения: используйте PageSpeed Insights, расширение Web Vitals для Chrome и отчёт Core Web Vitals в Search Console для получения реальных данных INP.
Источники: