Оптимизация / Web Vitals / INP (Interaction to Next Paint) Обязательно знать для: ⭐junior⭐ INP — это метрика, которая показывает время отклика страницы на все пользовательские взаимодействия, а не только на первое, как FID. Пользователь кликает, скроллит или взаимодействует с сайтом — INP измеряет, насколько быстро страница реагирует на каждое взаимодействие, и берёт самое худшее значение из всех взаимодействий за сессию. FID хорошо показывает только первое взаимодействие, но сайт может быть отзывчивым сначала, а потом тормозить при последующих действиях. INP даёт более полную картину реальной интерактивности страницы. Google использует INP для оценки Core Web Vitals с 2024 года как более "правдоподобную" метрику UX. 💡 Интересный факт: INP заменил FID в Core Web Vitals в марте 2024 года. Google объяснил это тем, что FID измеряет только первое взаимодействие, а сайт может быть отзывчивым сначала, но затем замедляться. INP учитывает все взаимодействия за сессию, что даёт более точную картину реального пользовательского опыта. Исследования Google показали, что INP лучше коррелирует с пользовательским восприятием отзывчивости сайта. Ключевые моменты: 1. Измеряется в миллисекундах (мс): < 200 мс → отлично, 200–500 мс → нужно оптимизировать, > 500 мс → плохой UX, страница кажется "тяжёлой" 2. Фокусируется на всех user interactions: включает клики, нажатия клавиш, скроллы, а не только первое взаимодействие 3. Показывает плохой опыт даже если LCP и CLS хорошие: страница может быстро загружаться и быть стабильной, но плохо реагировать на действия пользователя 4. Берёт худшее значение за сессию: если одно взаимодействие было медленным, это влияет на общий INP 5. Замена FID в Core Web Vitals: с 2024 года Google использует INP вместо FID, так как он лучше отражает реальный пользовательский опыт INP измеряет полный цикл взаимодействия: от момента действия пользователя (клик, тач, нажатие клавиши) до момента, когда браузер отрисовывает следующий кадр. Это включает обработку события, выполнение JavaScript, обновление DOM и рендеринг. В отличие от FID, который учитывает только первое взаимодействие, INP отслеживает все взаимодействия за сессию и берёт худшее значение, что даёт более реалистичную оценку отзывчивости интерфейса. Примеры: Пример высокого INP // Пользователь кликает несколько раз button1.addEventListener('click', () => { // Долгая задача блокирует поток heavyComputation(); // 300мс }); button2.addEventListener('click', () => { // Ещё одна долгая задача processLargeData(); // 500мс }); // INP = 500мс (плохо) - худшее значение из всех взаимодействий #junior #optimization #web_vitals #performance #metrics #web_vitals #inp #interactivity #responsiveness 📖 Читать полную версию на сайте