Иногда сайт загружается быстро, контент появляется почти сразу, но пользоваться им всё равно не очень приятно. Клик срабатывает с задержкой, поле ввода реагирует не сразу, интерфейс как будто «думает». Формально всё загрузилось, но ощущение отзывчивости — так себе. 😥
Именно такие ситуации описывает INP (Interaction to Next Paint).
INP — это метрика, которая показывает, насколько быстро интерфейс реагирует на действия пользователя. Она измеряет задержку между пользовательским действием (клик, тап, ввод) и моментом, когда браузер завершает рендеринг следующего кадра, который отражает результат этого действия. Проще говоря, сколько времени проходит от действия до визуального отклика.
Важно понимать, что INP не оценивает одно конкретное взаимодействие, а берёт 75-й перцентиль всех взаимодействий за время жизни страницы. То есть метрика показывает, какой опыт чаще всего испытывает пользователь, а не самый удачный или самый плохой единичный случай.
С 2024 года INP входит в Core Web Vitals и заменяет FID. Причина проста: FID учитывал только первое взаимодействие, а INP охватывает все действия пользователя, давая более полное представление о реальной отзывчивости страницы. ‼️
На практике высокий INP почти всегда возникает из-за перегрузки основного потока браузера. Если пользователь взаимодействует с интерфейсом, а браузер занят выполнением длинных задач, то обработка событий замедляется, и визуальный отклик появляется с задержкой.
Чаще всего INP ухудшают:
⏺️ длинные задачи в основном потоке;
⏺️ сложные обработчики событий;
⏺️ синхронные вычисления при клике или вводе;
⏺️ большое количество стороннего JavaScript;
⏺️ тяжёлые обновления DOM.
Улучшение INP обычно не требует каких-то экзотических решений — в большинстве случаев достаточно сократить и дробить длинные задачи, упростить логику обработчиков событий, вынести тяжёлые вычисления в Web Workers, отложить загрузку не критичного кода и уменьшить влияние сторонних скриптов. 👍
Полезные ссылки:
⛓ Подробнее в Web Dev
⛓ Документация MDN