INP — защо сайтът замръзва при клик
Interaction to Next Paint е Core Web Vital от март 2024. Обясняваме какво мери, защо WordPress сайтовете с много JavaScript се провалят и какво помага.
Натискате бутона „Меню“ и нищо не се случва. Натискате пак. След секунда менюто се отваря и веднага се затваря от второто натискане. Това е лош INP — и посетителите го усещат много по-ясно, отколкото една бавна снимка.
Какво мери INP
Interaction to Next Paint мери времето от взаимодействието — клик, докосване, натискане на клавиш — до момента, в който браузърът покаже следващата промяна на екрана. Мерят се всички взаимодействия по време на посещението, а в отчета влиза едно от най-бавните.
| INP | Оценка |
|---|---|
| до 200 ms | добър |
| 200–500 ms | нуждае се от подобрение |
| над 500 ms | лош |
INP замени FID (First Input Delay) като Core Web Vital на 12 март 2024 г. FID мереше само първото взаимодействие и само забавянето преди обработката — затова много сайтове го минаваха лесно. INP е много по-строг.
Защо се получава
Браузърът има една основна нишка, която прави почти всичко: изпълнява JavaScript, изчислява стиловете, подрежда страницата и рисува. Докато тя е заета с дълга задача, кликът ви чака на опашка.
Най-честите причини в WordPress:
- Конструктори на страници със стотици килобайти JavaScript, който се изпълнява при зареждане.
- Скриптове на трети страни — чат, пиксели за реклами, инструменти за записване на сесии, бутони за социални мрежи.
- Тежки обработчици на събития — например филтър в магазин, който при всяко отметнато поле преизчислява и пренарежда цялата страница.
- Огромен DOM — страници с десетки хиляди елементи, при които всяка промяна е бавна.
- Слайдери и анимации, които работят постоянно и заемат нишката.
Как да откриете проблема
- PageSpeed Insights показва INP в полевите данни, ако сайтът има достатъчно трафик. Лабораторният тест не може да кликне, затова показва TBT (Total Blocking Time) — добър заместител. Висок TBT почти винаги означава риск от лош INP.
- Chrome DevTools → Performance — запишете взаимодействие и вижте кои задачи са дълги (над 50 ms) и от кой скрипт идват.
- Search Console → Core Web Vitals показва групите страници с проблем.
Какво помага
- По-малко JavaScript. Най-ефективното. Махнете скриптовете, които не се ползват на дадената страница.
- Отложено зареждане на скриптовете на трети страни — след съгласие за бисквитки или при първо взаимодействие. Чатът не трябва да се зарежда в първите секунди.
- Разделяне на дългите задачи. В собствения код — отстъпване на нишката между стъпките, за да може браузърът да обработи клика.
- Незабавна визуална обратна връзка. Бутонът да реагира веднага (промяна на цвят, индикатор), а тежката работа да се свърши след това.
- По-малък DOM. По-прости секции, по-малко вложени елементи, особено при конструкторите на страници.
INP и мобилните телефони
Повечето посетители са на телефони със значително по-слаби процесори от компютъра, на който се прави сайтът. Скрипт, който на лаптопа отнема 50 ms, на среден Android телефон може да отнеме 250 ms. Затова INP проблемите почти винаги са по-големи на мобилно — и затова тестваме на мобилно.
Ако INP или TBT на вашия сайт са в червено, ръчната оптимизация на скоростта включва точно това: преглед на всеки скрипт, премахване на ненужното и отлагане на останалото.
Въпроси и отговори
Каква е разликата между INP и TBT?
INP се мери при реални посетители и реални кликове. TBT е лабораторна метрика — колко време основната нишка е блокирана при зареждане. Висок TBT обикновено води до лош INP.
Какъв INP е добър?
До 200 ms за поне 75% от посещенията.
Защо PageSpeed не показва INP за моя сайт?
INP идва само от полеви данни от реални посетители. Ако сайтът няма достатъчно трафик в Chrome UX Report, PageSpeed няма да го покаже — тогава гледайте TBT.
