Продолжаю серию заметок про метрики Core Web Vitals. Сегодня расскажу про INP (Interaction to Next Paint).

👉 Interaction to Next Paint (INP) — отзывчивость интерфейса. Отражает время от момента взаимодействия пользователя с интерфейсом (клик, таб) до момента, когда браузер обновляет следующий кадр и показывает визуальный результат. Нормально, когда не более 200 миллисекунд.

👉 Замер INP начинается, когда срабатывает браузерное событие mousedown, pointerdown, keydown, touchstart и т. д., то есть те события, которые связаны с физическим взаимодействием пользователя с браузером (мышь, палец, клавиатура). ВАЖНО!!! Не измеряются continuous events (непрерывные события) — это события, которые генерируются многократно в течение одного продолжительного действия пользователя. Например, скролл, зум, hover и т. д.

Одно взаимодействие пользователя с браузером может состоять из нескольких событий. Например, взаимодействие клика мышью по кнопке в браузере запускает цепочку событий: pointerdown → pointerup → click. В результат замера записывается время обработки того события, которое заняло больше всего времени между Hardware Timestamp и next paint.

Для каждого события / группы событий замер включает три фазы:

- Input Delay (задержка ввода) Время от момента ввода пользователя до начала выполнения обработчиков событий (когда main thread свободен и может начать обработку).

- Processing Duration (время обработки) Время выполнения всех callback-обработчиков событий, связанных с этим взаимодействием. Берётся самое длинное событие в группе.

- Presentation Delay (задержка презентации) Время после завершения обработчиков до следующей перерисовки кадра браузером (paint).

Общее время взаимодействия = Input Delay + Processing Duration + Presentation Delay.

👉 Измерение заканчивается, когда заканчивается перерисовка (обновление) интерфейса. С точки зрения браузера окончание замера INP выглядит как завершение шага «Update the rendering», который включает:

- Выполнение всех style/layout/paint задач в этом кадре. - Фактический Paint (перерисовка).

Документация по теме:

1. Interaction to Next Paint (INP) — Основная и самая полная документация Google (https://web.dev/articles/inp)

2. MDN Web Docs — Interaction to Next Paint (https://developer.mozilla.org/en-US/docs/Glossary/Interaction_to_next_paint)