INP (Interaction to Next Paint) — метрика Core Web Vitals, которая измеряет задержку между действием пользователя (клик, нажатие клавиши, тап) и визуальным откликом страницы. С марта 2024 года она полностью заменила FID. Хороший показатель — до 200 мс, проблемный — свыше 500 мс.
Почему INP жёстче FID
FID считал только задержку первого взаимодействия. INP учитывает все взаимодействия за сессию и берёт худшее (98-й перцентиль). Если у вас тяжёлая форма фильтрации в каталоге, именно она определит итоговый балл.
Основные причины плохого INP
- Тяжёлый JavaScript в Main Thread. Скрипты аналитики, чат-виджеты, слайдеры.
- Большой DOM. Страницы с 3000+ элементов перерисовываются медленно.
- Синхронные обработчики событий. onClick запускает тяжёлые вычисления.
- Сторонние скрипты. Рекламные сети, пиксели ретаргетинга.
Как улучшить INP: практический план
- Диагностика. PageSpeed Insights → раздел «Диагностика». Chrome DevTools → вкладка Performance.
- Разбейте длинные задачи. Любой блок JS дольше 50 мс — кандидат на разбивку.
- Отложите некритичные скрипты. Чат-виджеты, аналитику загружайте с атрибутом defer.
- Сократите DOM. Используйте виртуализацию списков для каталогов.
INP чаще всего проваливают интернет-магазины с тяжёлыми фильтрами. Начните с аудита сторонних скриптов — в 70% случаев проблема именно в них.
Для улучшения INP рекомендую начать с анализа производительности через инструменты вроде Lighthouse или Chrome DevTools. Они помогут выявить узкие места в обработке JavaScript и рендеринге. Убедитесь, что ваш код оптимизирован: используйте ленивую загрузку для не критичных скриптов, минимизируйте перерисовку DOM и избегайте длительных задач в Main Thread. Также стоит обратить внимание на оптимизацию анимаций и переходов — они не должны блокировать основной поток. Если на сайте много интерактивных элементов, попробуйте разделить их на более мелкие задачи с помощью Web Workers или асинхронных функций. Это снизит нагрузку на Main Thread и улучшит отклик.