Что такое INP
Interaction to Next Paint (INP) — метрика производительности, которая измеряет, насколько быстро страница визуально реагирует на действия пользователя: клики, нажатия клавиш, тапы.
Конкретнее: INP фиксирует время от момента взаимодействия до следующего отрисованного фрейма. Причём даже если видимых изменений на экране нет — браузер всё равно получает свой INP-балл, отражающий, сколько времени он был занят обработкой события.
Важный нюанс: метрика работает не только для кнопок и полей ввода. Под прицел попадают любые элементы страницы — включая заголовки и картинки.
С марта 2024 года INP официально входит в тройку Core Web Vitals вместе с LCP и CLS и учитывается в ранжировании Google.
Из чего складывается INP
Метрика делится на три составляющие:
- Input Delay — ожидание, пока фоновые задачи освободят главный поток и обработчик события наконец запустится.
- Processing Time — время выполнения JavaScript-обработчиков (их может быть несколько, например
keydown+keyup). - Presentation Delay — обработка очереди других взаимодействий, пересчёт layout и непосредственная отрисовка.
Пороговые значения
- ✅ < 200 мс — хорошо
- ⚠️ 200–500 мс — нужно улучшать
- ❌ > 500 мс — плохо, вероятно негативное влияние на позиции в поиске
Как оптимизировать INP: общий план
- Найти, какие именно взаимодействия дают плохой результат.
- Собрать дополнительные данные о производительности.
- Выявить точки роста и применить оптимизации.
Шаг 1: найти виновника
Главная сложность — пользователи взаимодействуют с разными элементами, часть из которых вообще не видна при загрузке (например, корзина, которая появляется после выбора товара).
Здесь помогает Real User Monitoring: он покажет, какие элементы чаще всего вызывают медленный отклик и как выглядит типичная задержка для каждого из них. Имея такие данные, можно найти конкретный пример медленного page view и изучить разбивку по компонентам и скриптам.
Шаг 2: профилировать в Chrome DevTools
Если данные RUM уже дают подсказку — хорошо. Но DevTools позволяет копнуть значительно глубже.
Как записать профиль:
- Правой кнопкой → Inspect, переходи на вкладку Performance.
- Кликни на шестерёнку (настройки записи) — там в правом верхнем углу второй строки.
- Если у тебя быстрая машина — включи CPU throttling → 4x slowdown, чтобы симулировать мобильное устройство.
- Нажми Record, воспроизведи нужное взаимодействие, нажми Stop.
В треке Interaction будет видно момент ввода и разбивку по компонентам. На Main thread — конкретные функции из твоего кода, которые выполнялись в ответ на событие. Это позволяет понять, что именно тормозит и можно ли сократить время выполнения.
Шаг 3: снизить Input Delay
Высокий Input Delay означает, что в момент взаимодействия главный поток занят чем-то посторонним. Решение — разбивать длинные задачи на короткие чанки, чтобы браузер успевал обработать ввод между ними.
Для этого используй scheduler.yield() — браузерный API, позволяющий явно уступить управление главному потоку.
INP — это не абстрактная цифра, а ощущение от интерфейса. Если страница висит полсекунды после клика, пользователь это чувствует 🦆