Оптимизиране за INP – новата метрика на Core Web Vitals

Google замени закъснението на първото въвеждане (FID) с нов показател на Core Web Vitals, наречен Interaction to Next Paint (INP). Целта на тази промяна е да се измери по-добре отзивчивостта на даден уебсайт и цялостното потребителско изживяване.

В тази статия се обяснява какво представлява INP, защо е заменил FID, как да проверите резултата на сайта си по INP и различни техники за подобряване на INP и повишаване на отзивчивостта на уебсайта.

Какво е Interaction to Next Paint (INP)?

Google използва INP, за да оцени цялостната отзивчивост на сайта ви. Ако щракнете върху падащо меню и има забавяне при отварянето му, това забавяне показва лоша отзивчивост и се отнася към INP.

Ако има проблеми с INP, потребителското изживяване страда, тъй като потребителят може да продължи да щрака върху менюто на сайта ви в очакване на отговор.

INP е времето, което е необходимо от първоначалното взаимодействие с потребителя до момента, в който се изрисува следващият кадър на сайта.

Защо INP замени FID?

По-рано Google обяви, че INP ще замени FID, защото последният е метрика, която има своите ограничения, за които SEO специалистите са знаели. INP е „новата итерация“ на FID, тъй като ще измерва отзивчивостта на сайта по по-пълен начин.

Вашият отчет в Google Search Console вече няма да показва FID. Собствениците на сайтове трябва, както отдавна правят, да се съсредоточат върху подобряването на потребителското изживяване.

Вашите основни уеб показатели са само малка част от SEO оптимизацията на сайта, но това е една от областите, за чието оптимизиране трябва да отделяте време, защото може да доведе до голяма разлика (напр. конверсии).

Добре функциониращ сайт, който се зарежда и реагира бързо, ще превъзхожда подобен сайт, при който потребителското изживяване е лошо.

Как да проверите INP на сайта си

Можете да проверите INP на сайта по два начина:

• В конзолата за търсене на Google
• PageSpeed Insights

Навигирайте до Search Console > Experience > Core Web Vitals. Ако искате да стартирате PageSpeed Insights самостоятелно, отидете на PageSpeed Insights. Въведете URL адреса или домейна, който искате да проверите, и натиснете бутона Analyze (Анализирай).

Преминете към раздела Desktop (Работен плот) и ще видите списъка с INP на сайта. INP е 50 ms, така че сайтът все още е в зелено и не се нуждае от оптимизация.

Можете да прецените дали INP се нуждае от оптимизация на вашия сайт въз основа на неговата оценка:

• > 200 ms е „добър“
• от 200 ms до 500 ms е „Необходимо подобрение“
• < 500 ms е "Лошо"

PageSpeed Insights ще ви позволи да преглеждате отчети, които можете да филтрирате, за да намерите препоръки за подобряване на INP на вашия сайт. Ако в миналото сте се фокусирали върху FID, ще откриете, че много от подобренията, които сте направили, ще помогнат и на INP на сайта.

Разгледайте препоръките в доклада, за да се опитате да подобрите INP на сайта си.

Можете също така да приложите някои основни оптимизации на INP, които всички сайтове трябва да включат, за да се съсредоточат повече върху отзивчивостта и да гарантират, че потребителското изживяване остава високо.

Оптимизация на INP: Как да започнем

Съсредоточете се върху това, което липсва на сайта ви в доклада, и върху отстраняването на известните проблеми, преди да предприемете подход „един размер за всички“. Ако JavaScript на сайта ви не е проблем в момента, съсредоточете се върху това, което влияе на потребителите ви.

Решаване на проблемите, свързани с JavaScript

JavaScript е начинът, по който много сайтове се превръщат от статични в интерактивни. Ако сайтът ви използва интензивно JavaScript, трябва да започнете с оптимизирането му. Може да искате да работите с екипа си от разработчици, защото поправянето на скриптове може да стане сложно.

Няколко основни задачи, които със сигурност ще ви помогнат, са:

• Използвайте мрежа за доставка на съдържание (CDN), за да подобрите времето за зареждане на файловете и да намалите INP с няколко милисекунди.
• Минифицирайте всички свои JavaScript файлове и CSS. По-малките файлове се зареждат по-бързо и ще помогнат за ускоряване на INP.

Дълги задачи

За дълги задачи се считат тези, които отнемат повече от 50 ms за обработка. Вашият браузър има „главна задача“, която може да обработва само една задача в даден момент. Ако обработката на вашия JavaScript отнеме повече от 50 ms, всички други задачи се отлагат, докато процесът приключи.

Какво можете да направите?

Разделете тези дълги задачи на много по-малки изпълнения, така че да отнемат по-малко време за изпълнение и обработка.

Web.dev има чудесно ръководство по тази дълга тема, но идеята е проста:

• Разделете извикванията на множество методи на множество функции. JavaScript третира всички функции като една задача, така че ако имате 10 подфункции в една основна функция, основната функция бързо ще се превърне в дълга задача.
• Отложете изпълнението на кода, за което ще ви е необходима помощта на програмист, ако вече не знаете как да го направите.
• Създайте специален планиращ програматор за API, който е описан в ръководството, към което има връзка по-горе.

Ако използвате setTimeout и requestIdleCallback, също можете да разделите дългите задачи на по-кратки.

Готовност за въвеждане

Искате сайтът ви да е готов за въвеждане на данни от потребителя и да реагира възможно най-бързо. Един от начините да направите това е да отложите кода, както в последния раздел, или да използвате пасивни слушатели на събития.

Установяване на причините за проблемите с INP

Проблемите с INP са трудни за определяне, но има инструменти, които можете да използвате, за да си помогнете с диагностицирането на проблемите. Все още експериментирам с нови инструменти за идентифициране на проблеми с INP, но следните инструменти работят добре:

Мониторинг на реалния потребител (RUM)

RUM е нещо, което трябва да използвате в своя полза, особено ако управлявате сайтове за електронна търговия. Бавните взаимодействия изглежда са много повече в сферата на електронната търговия, отколкото в сайтовете със съдържание.

Инструменти, които могат да помогнат за RUM, са:

DevTools на Chrome

Ако сте потребител на Chrome, DevTools (натиснете F12 на компютър) може да ви помогне. Ще трябва да отидете в Performance (Изпълнение) и Start Recording (Започване на запис). Оттук преминете към интерактивен елемент в сайта и изпълнението ще бъде записано.

Инструментът може да ви помогне да разберете по-добре каква е причината за забавянето на сайта и да определите как да я отстраните.

Наблюдавайте периодично Search Console или PageSpeed Insights на сайта си, за да сте в течение на INP.

Тъй като е необходима обширна оптимизация на JavaScript, ако сайтът, върху който работите, използва обширен JavaScript, работете с разработчик, за да го оптимизирате.