Interaction to Next Paint (INP): Полный разбор взаимодействия

Введение: Эволюция метрик пользовательского опыта

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

Google, стремясь стандартизировать оценку UX, представил Core Web Vitals — набор метрик, отражающих ключевые аспекты взаимодействия пользователя с сайтом. Среди них были:

LCP (Largest Contentful Paint) — время загрузки основного содержимого;
FID (First Input Delay) — время реакции на первое взаимодействие;
CLS (Cumulative Layout Shift) — стабильность макета страницы.

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

Определение INP: что это за метрика?

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

Формула INP включает три компонента:

Input Delay — время между взаимодействием и началом его обработки.
Processing Time — время выполнения callback-функций.
Presentation Delay — время до следующего визуального обновления (рендера).

Итоговая метрика рассчитывается как:

INP = Input Delay + Processing Time + Presentation Delay

Как измеряется INP: технические детали

Измерение INP происходит с помощью Event Timing API, поддерживаемого современными браузерами. API отслеживает все пользовательские взаимодействия, фиксирует начало, конец и точку визуального отклика.

Типы событий, отслеживаемые INP:

click
keydown
pointerdown
pointerup

Для каждого события браузер регистрирует:

startTime — момент взаимодействия;
processingStart — момент запуска обработчика;
processingEnd — момент завершения;
nextPaintTime — когда изменения стали видимыми на экране.

Важно: INP отслеживает не одно взаимодействие, а множество, выбирая самое «тяжелое» по времени. Это делает метрику особенно ценной для сложных интерфейсов, где пользователь активно взаимодействует с DOM.

Почему INP важнее FID

FID ограничен: он учитывает только первое взаимодействие пользователя. Если пользователь нажал кнопку спустя 5 секунд после загрузки — это уже не попадает в FID, даже если сайт тормозит. INP же регистрирует все взаимодействия и берет самое медленное, отражающее наихудший UX момент за сессию.

Преимущества INP:

Показывает реальное восприятие скорости сайта.
Сильнее коррелирует с показателями удержания и конверсии.
Учитывает влияние тяжелого JavaScript и рендера.
Привязан к визуальной части взаимодействия, а не только к технической.

Хороший, удовлетворительный и плохой INP

Google классифицирует значения INP следующим образом:

INP (в мс)	Качество
<= 200 ms	Отлично (Good)
200-500 ms	Нормально (Needs improvement)
> 500 ms	Плохо (Poor)

Метрика 500+ мс означает, что сайт визуально «задумывается» после клика или касания, что разрушает ощущение отзывчивости.

Причины плохого INP: откуда берётся задержка?

1. Перегруженный main thread

Heavy JavaScript blocking
Синхронные вызовы и циклы
Устаревшие библиотеки (jQuery, Moment.js и др.)

2. Плохая организация обработчиков событий

Длинные onClick
Тяжелые setState() в React
Вложенные циклы в UI callback’ах

3. Сложный reflow / layout

Манипуляции с DOM во время событий
Сложные таблицы, grid-сетки
Модификация размеров, padding и margin в рантайме

4. Анимации и переходы

Неплавные анимации на :active
Использование JavaScript-анимаций вместо CSS
Отсутствие will-change

5. Блокирующий рендер

Шрифты без font-display: swap
Отсутствие lazy-loading
Гигантские изображения без размеров

Как диагностировать плохой INP

1. Chrome DevTools

Вкладка «Performance» → запустить запись → отметить «Interactions».
Найти длинные задержки после событий.

2. PageSpeed Insights / Lighthouse

Отображает INP в секции Field Data.

3. Web Vitals Extension

Показывает INP в реальном времени.

4. Real User Monitoring (RUM)

Интеграция Event Timing API в аналитику (Google Analytics 4, Yandex Metrica, Amplitude).

Стратегии оптимизации INP

1. Делегируйте JS-обработчики

Избегайте сложной логики в onclick. Делайте отложенную загрузку тяжёлых блоков и переносите неважные действия во requestIdleCallback().

2. Используйте `passive` слушатели

Для событий scroll и touch обязательно добавляйте passive: true, чтобы избежать блокировки рендера.

3. Делите большие задачи на микротаски

Вместо больших блоков синхронного кода используйте setTimeout(fn, 0), queueMicrotask или requestIdleCallback.

4. Оптимизируйте визуальные отклики

Используйте :active и CSS transitions.
Заранее подготавливайте стили через will-change.
Избегайте принудительных reflow (offsetHeight, getComputedStyle).

5. Сократите JavaScript

Удалите неиспользуемый код.
Разбейте бандлы.
Используйте динамический импорт.

6. Профилируйте и измеряйте

Непрерывно тестируйте производительность. Используйте инструменты CI для Lighthouse, веб-аналитику и метрики на реальных пользователях.

Частые ошибки разработчиков

Сложная логика в событиях click и submit.
Задержка между действием и визуальным ответом (нет «эффекта нажатия»).
Блокировка главного потока большим JavaScript.
Вставка новых DOM-узлов до анимаций.
Использование setTimeout вместо requestAnimationFrame.

Роль фреймворков: React, Vue, Angular

В React медленный INP часто связан с:

useEffect() без дебаунса
Глобальными re-render’ами
Обновлением большого количества компонентов

Советы:

Используйте React.memo, useMemo, useCallback
Сократите глубину компонентов
Разбивайте состояние (split state)

Во Vue и Angular — аналогично: следите за производительностью в реактивных циклах и используйте профайлеры.

Будущее INP и Core Web Vitals

Google планирует сделать INP ещё более важной метрикой в ранжировании. Уже с 2024 года INP заменил FID как основной показатель интерактивности.

Ожидается:

Улучшенная поддержка в Lighthouse
INP-бейджи в Search Console
Новые средства анализа в Chrome DevTools
Более широкое распространение RUM-аналитики

INP — это отражение настоящего пользовательского опыта. Она соединяет фронтенд-архитектуру, производительность браузера и восприятие интерфейса в единый числовой показатель. Успешная оптимизация INP требует осознанного подхода к архитектуре, UI-дизайну, JavaScript и рендер-процессу.

Если вы хотите, чтобы ваш сайт не просто загружался, а ощущался молниеносным — работайте с INP. Это инвестиция не в абстрактные цифры, а в удержание аудитории, рост конверсии и высокие позиции в поиске.

06.04.2025 toxadab

ToxaDab

Web разработка