INP (Interaction to Next Paint)

Что такое INP и почему он заменил FID

INP (Interaction to Next Paint) — это метрика, которая оценивает, насколько быстро сайт реагирует на действия пользователя. Она появилась в 2022 году как экспериментальный показатель, а с марта 2024 года официально заменила First Input Delay (FID) в наборе Core Web Vitals. Главное отличие от FID: INP измеряет не только первое взаимодействие, а все значимые взаимодействия на странице (клики, ввод текста, тапы), и выбирает наихудшее значение. Это даёт более реальную картину — если сайт быстро отвечает на первый клик, но потом начинает тормозить при скролле или наборе текста, INP это покажет.

Как работает измерение INP

INP считается так: когда пользователь совершает действие (например, кликает по кнопке), браузер должен обработать событие, выполнить необходимый JavaScript, обновить DOM и отрисовать новый кадр. Время от момента действия до отрисовки следующего кадра — это и есть задержка. Метрика суммирует все этапы: обработка обработчиков событий, выполнение скриптов, пересчёт стилей, layout и paint. Если основной поток занят тяжёлыми задачами, отклик будет медленным. INP фиксирует все взаимодействия, но некоторые, например, скролл или наведение мыши, не учитываются — только те, что требуют визуальной реакции.

Влияние INP на SEO и разработку

Google использует INP как один из сигналов ранжирования. Плохой INP (больше 500 мс) может снизить позиции, особенно для мобильного трафика, где пользователи чаще взаимодействуют с интерфейсом. Для разработчика это означает, что нужно следить за длительностью выполнения JavaScript на главном потоке. Частые виновники — сторонние скрипты, анимации на CSS, слишком большие обработчики событий, синхронные запросы к серверу. Ещё одна проблема — чрезмерная работа с DOM: когда клик вызывает изменение большого количества элементов, браузер тратит время на обновление layout. INP также страдает от рендеринга, который блокирует отрисовку — например, когда шрифт загружается с большим блоком FOIT (Flash of Invisible Text).

Практический пример: почему INP важен

Представьте интернет-магазин на React: пользователь открывает страницу, кликает «В корзину». Если при клике выполняется тяжёлый скрипт, который обрабатывает все товары на странице, браузер зависает на 600 мс — INP будет плохим. Пользователь может не увидеть реакцию и кликнуть ещё раз, что только усилит проблему. В итоге Google понижает рейтинг страницы, и магазин теряет трафик. Решение — разбить скрипты на чанки, использовать делегирование событий и отложить не критичные задачи. В другом случае, на сайте новостей, INP может страдать из-за автоматической подгрузки статей при скролле: каждый новый блок запускает тяжёлые обработчики. Оптимизация через requestIdleCallback или Web Worker позволит сохранить отзывчивость.

Типичное заблуждение: INP — это то же самое, что FID, только с другим названием

Многие думают, что INP — это просто переименованный FID, и достаточно исправить первую задержку. Но это не так. FID измерял только первую задержку от первого взаимодействия, поэтому сайт, который быстро загружался, но потом начинал тормозить при каждом клике, имел хороший FID. INP учитывает все взаимодействия, поэтому даже если первый клик мгновенный, а второй — с задержкой 400 мс, INP будет плохим. Ещё одно заблуждение — что INP не влияет на SEO, если сайт уже хорошо оптимизирован по другим метрикам. Однако Google напрямую заявляет о включении INP в Core Web Vitals, так что игнорировать его нельзя. Разработчикам нужно пересмотреть подход: не ограничиваться оптимизацией загрузки, а следить за отзывчивостью на всём протяжении сессии.