INP (Interaction to Next Paint): что это и как улучшить метрику

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

Опубликованные Google пороги: до 200 мс — «хорошо», 200–500 мс — «нужно улучшить», больше 500 мс — «плохо». В отличие от LCP, INP можно измерить только на реальных взаимодействиях пользователей, поэтому она не появляется в лабораторном тесте так же — нужны полевые данные (Chrome User Experience Report или собственный real-user monitoring).

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

Тяжёлые, неоптимизированные ре-рендеры React/фреймворков — частая причина на современных сайтах: взаимодействие, вызывающее ре-рендер большого дерева компонентов, может легко превысить 200 мс, даже если реальное визуальное изменение крошечное.

Разбивайте длинные задачи JavaScript (всё, что блокирует главный поток на 50+ мс) техниками вроде scheduler.yield() или разбиением работы на более мелкие куски, чтобы у браузера была возможность ответить на ввод между ними.

Сначала проверьте сторонние скрипты — это часто самое эффективное исправление, потому что удаление или отложенная загрузка одного раздутого рекламного или аналитического скрипта может решить проблему с INP быстрее, чем оптимизация собственного кода. Используйте панель Performance в Chrome DevTools или библиотеку web-vitals, чтобы найти конкретное медленное взаимодействие, а не гадать.