Структурата на Pagespeed на Google, с която сме свикнали от години, е изградена около гарантирането, че уебсайтовете се зареждат и обслужват бързо. Чрез създаване на измерими параметри и използване на анонимни данни, събрани от пазарния дял на Chrome, Google използва тези показатели като SEO индикатори. С въвеждането на Interaction to Next Paint (INP) през 2022 г. фокусът се измести от просто скоростта на зареждане на страницата към по-широка гледна точка на производителността в мрежата. INP не само измерва колко бързо се зарежда страницата, но и колко бързо се обработват потребителските взаимодействия на страницата. По същество той превръща изживяването при навигация в сайта в показател за скорост на страницата.
В блога на Керем, терминът „Общо забавяне на взаимодействието“ се предлага като подходящ за тази концепция, което Google също обяснява добре в собствения си видеоклип. Въпреки това, за да разберем напълно този показател, ще се задълбочим в темата в следващите раздели.
Какво е обяснението на продължителността на INP?
Продължителността на INP включва:
- Времето между взаимодействието на потребителя със страницата и изпълнението на манипулатора на събитието.
- Времето за изпълнение на скрипта.
- Времето от изпълнението на кода до показването на изхода на потребителя.
Тези процеси обикновено се случват в рамките на милисекунди, но на мобилни устройства, особено на по-стари телефони с Android с ниска мощност на процесора, такива забавяния (латентност) често могат да бъдат забележими. Струва си да се отбележи, че данните от INP, подобно на други данни от Lighthouse, се събират анонимно и се оценяват въз основа на 75-ти перцентил. Следователно целта е да се създават приложения, които се представят добре на средни устройства, а не само на устройства от висок клас.
Примери от реалния живот за продължителност на INP
Ето няколко примера от реалния живот от интернет страниците, които посещаваме ежедневно, за да обясним тази концепция:
Въвеждане на адрес в сайт за електронна търговия
Когато пазарувате в сайт за електронна търговия и въвеждате адреса за доставка, първо избирате провинцията. След това, когато щракнете върху полето за избор, за да изберете дистрикта, изчаквате известно време да се зареди резултатът от Ajax и след определено време информацията за дистрикта се зарежда. Това е добър пример за INP. Подобряването на потребителското изживяване в този пример може да включва добавяне на „индикатор за зареждане“, за да информира потребителя за Ajax процеса.
Сортиране Избор
Когато използвате филтри на страници с продуктови списъци, ако филтрираните продукти не се управляват правилно след щракване върху квадратче за отметка, това ще увеличи INP. Използването на по-малко сложен JS и отчитането на потребителското изживяване по време на филтриращите операции може да помогне за поддържане на стойността на INP възможно най-висока.
Продуктови фотогалерии
Времето, което потребителите чакат фотогалерията да се зареди, след като щракнат върху снимка на продукт на страниците с подробности за продукта, може потенциално да повлияе на INP.
Бутон за резервация
Забавянето на взаимодействието между щракването върху бутона „Направете резервация“ и следващата страница е пример за INP.
Бутон за добавяне в кошницата
Милисекунди забавяне при натискане на бутона „Добавяне в количката“ и чудене дали артикулът е добавен в количката или не дефинира идеално INP.
Както се вижда в тези примери, капаните на INP присъстват в сценарии, засягащи както SEO, така и директните проценти на реализация.
Как да подобрим INP?
- Използвайте актуални JS Frontend библиотеки: Подобряването на производителността чрез използване на съвременни библиотеки за интерфейс на JS като Vue, React и Angular е от полза, тъй като те предлагат предимства за производителност и многократна употреба.
- Минимизиране на сложността на JS библиотеките: Използването на по-малко сложни JS библиотеки е препоръчително. Лично аз препоръчвам да избягвате jQuery колкото е възможно повече.
Приемливи INP метрични нива
Праговите стойности за добри, средни и лоши нива на INP са 200 милисекунди и 500 милисекунди. Поддържането на INP под тези прагове е от решаващо значение за поддържане на добро потребителско изживяване и цялостна уеб производителност.
