Что такое INP?
INP (Interaction to Next Paint) — это задержка до следующей отрисовки после взаимодействия: сколько миллисекунд проходит между кликом, нажатием или касанием и моментом, когда страница визуально отреагировала. Метрика из Core Web Vitals, с 2024 года она заменила First Input Delay (FID).
Смысл прост: пользователь нажал на кнопку, ссылку или фильтр и ждёт любую реакцию: подсветку, открытие меню, смену блока. Если страница «думает» дольше пары сотен миллисекунд, она ощущается зависшей, даже если контент уже загрузился быстро.
Чем INP отличается от FID?
FID измерял только первый клик на странице и только до начала обработчика. INP смотрит все взаимодействия за весь визит и учитывает время до фактической отрисовки ответа. То есть новая метрика заметно честнее: медленный обработчик на десятой кнопке теперь тоже попадает в оценку, и обмануть её отрисовкой «пустышки» сложнее.
Какой INP считается хорошим?
- до 200 миллисекунд: хорошо, целевой ориентир;
- 200–500 миллисекунд: требует улучшения;
- более 500 миллисекунд: плохо, интерфейс ощутимо тормозит.
Где смотреть: полевые данные в PageSpeed Insights (INP из Chrome UX Report) и вкладка Performance в инструментах разработчика. В лабораторных замерах метрика моделируется по худшему сценарию, поэтому доверяйте полевым цифрам.
Что ухудшает INP?
- тяжёлые JavaScript-обработчики: длинные вычисления прямо в ответе на клик;
- большие DOM-деревья: каждая операция пересчёта стилей и вёрстки дольше;
- сторонние скрипты: чаты, виджеты, аналитика, обрабатывающие клики раньше страницы;
- всё, что выполняется в момент взаимодействия: макротаски браузер не прерывает.
Как улучшить INP?
- разбивать длинные задачи: вместо одного обработчика на 600 миллисекунд: несколько коротких или отложенная тяжёлая часть;
- сначала нарисовать реакцию (класс активности, блокировку), потом делать вычисления;
- уменьшать количество сторонних скриптов и проверять их на тормоза;
- упрощать DOM: тяжёлые меню и виджеты выносить в отдельные файлы и подгружать по требованию;
- не ставить обработчики на всё подряд: наведение и скролл не взаимодействия, но они тоже конкурируют за главный поток.
Связь INP с другими показателями
INP замыкает Core Web Vitals со стороны интерактивности: LCP отвечает за загрузку, CLS за стабильность, INP за отзывчивость. Он связан и с конверсией: «залипающая» форма или фильтр теряет заявки даже при отличной скорости загрузки.
Итоги
INP показывает, насколько быстро страница отвечает на действия. Ориентир — 200 миллисекунд. Основные виновники: тяжёлый JavaScript и раздутый DOM; лечение: короткие задачи, быстрая визуальная реакция, чистка сторонних скриптов.