INP: как измеряется отзывчивость страницы 🤨 Иногда сайт загружается быстро, контент появляется почти сразу, но пользоваться им всё равно не очень приятно. Клик срабатывает с задержкой, поле ввода реагирует не сразу, интерфейс как будто «думает». Формально всё загрузилось, но ощущение отзывчивости — так себе. 😥 Именно такие ситуации описывает 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