INP (взаимодействие до следващото изобразяване)
Какво е INP (взаимодействие до следващото изобразяване)?
INP (взаимодействие до следващото изобразяване) е показателят, който измерва колко бързо страницата реагира видимо на клик, докосване или натискане на клавиш. Браузърът записва забавянето при взаимодействията през цялото посещение и отчита едно от най-бавните. Добро е до 200 милисекунди, а над 500 е лошо. От март 2024 г. INP, на английски Interaction to Next Paint, е един от трите Core Web Vitals на мястото на по-стария FID и в PageSpeed Insights се вижда само в данните от реални посетители.
Пример
В категория на онлайн магазин за спортни стоки клиентът натиска филтъра „Само налични“. Страницата се променя чак след 450 милисекунди. Забавянето има три части:
- 80 ms — браузърът е зает с кода на чат приложение и още не може да приеме докосването;
- 250 ms — филтърът прерисува наведнъж 400 продукта;
- 120 ms — изчертаване на новия екран.
450 ms е в средната зона, между 200 и 500. Чатът започва да се зарежда при първо докосване на иконата му, а не при отваряне на страницата, и забавянето пада на 20 ms. Филтърът показва първите 24 продукта, а останалите — при превъртане, и обработката става 90 ms. С по-малко за изчертаване остават 50 ms. Новият сбор е 20 + 90 + 50 = 160 ms — в добрата зона.
Защо има значение за бизнеса
Слабият INP се усеща като сайт, който не слуша. Бутонът „Добави в кошницата“ не реагира, човекът натиска втори път и поръчва два броя, или решава, че магазинът не работи. Причината почти никога не е хостингът, а кодът в браузъра — тежки теми, приставки и скриптове на трети страни, натрупани с годините, почти изцяло на JavaScript. Показателят се влошава тихо, с всяка нова добавка, затова го следим и след поправката.
Как се подобрява
- По-малко JavaScript при зареждането: всичко, което не е нужно веднага, се отлага.
- Чат, видео и карти се зареждат при първо използване, не при отваряне на страницата.
- Дългите задачи в кода се разделят, за да може браузърът да отговори на клика между тях.
- Страниците с много елементи — категории, таблици, конфигуратори — се показват на части.
Лабораторният тест не кликва, затова INP се вижда в данните от реални посетители, а в тестовете следим заместителя му TBT. Тази работа по кода е част от оптимизацията на скоростта на сайта.