INP (Interaction to Next Paint) — это метрика, которая измеряет задержку между взаимодействием пользователя с сайтом (клик, тап, нажатие клавиши) и отрисовкой следующего кадра в браузере. Низкий INP обеспечивает мгновенную обратную связь и воспринимается как высокая отзывчивость интерфейса. Оптимизация INP требует контроля за выполнением JavaScript, избегания блокировки основного потока и сокращения времени обработки событий.
Что такое INP и почему это важно
INP стал частью Core Web Vitals в 2024 году, заменив FID (First Input Delay). Метрика оценивает всю цепочку обработки взаимодействия, а не только задержку ввода. INP учитывает время от первого события до завершения отрисовки следующего кадра. Целевое значение — ниже 200 миллисекунд. Превышение приводит к ощущению «зависания» интерфейса.
Как измерить INP
INP можно измерить с помощью инструментов Google: PageSpeed Insights, Search Console (отчет Core Web Vitals) и Chrome DevTools. В полевых данных метрика агрегируется по 75-му перцентилю для всех пользовательских сессий. Для лабораторных тестов подходит симуляция в DevTools или WebPageTest.
| Инструмент | Тип данных | Точность |
|---|---|---|
| Лабораторные и полевые | Высокая | |
| Лабораторные | Точная диагностика | |
| Полевые | Агрегированная по сайту |
Основные причины высокого INP
Высокий INP обычно вызван длительным выполнением JavaScript в основном потоке браузера. Типичные проблемы: тяжелые обработчики событий, неоптимизированные анимации, частые перерисовки DOM и микрозадачи (например, Promises). Блокировка основного потока на время более 50 мс уже создает заметную задержку.
Как оптимизировать INP: практические методы
Оптимизация начинается с анализа самых медленных взаимодействий через DevTools (вкладка Performance). Разбейте длинные задачи на меньшие с помощью или . Перенесите тяжелые вычисления в Web Workers. Минимизируйте работу в обработчиках событий — делегируйте события, используйте пассивные слушатели для скролла.
Типовые ошибки и ограничения оптимизации
Распространенная ошибка — попытка оптимизировать INP без полевых данных. Лабораторные тесты не всегда отражают реальные устройства пользователей. Другая проблема — избыточная оптимизация редких взаимодействий вместо частых. Учтите, что на слабых устройствах INP всегда выше, и это нормально.
Чек-лист по оптимизации INP
— Анализируйте полевыми данными из Search Console.
— Выявляйте самые частые взаимодействия с высоким INP.
— Разделяйте длинные задачи на асинхронные chunks.
— Используйте Web Workers для тяжелой логики.
— Тестируйте на средних и слабых устройствах.
