Să facem cunoștință cu INP: Un nou metric de performanță pentru Core Web Vitals

Cum viteza și experiența utilizatorului devin din ce în ce mai importante pentru succesul online, Google a introdus o nouă valoare în cadrul setului de Core Web Vitals (CWV), denumită Interaction to Next Paint sau, mai pe scurt, INP.

Cuprins:

În acest articol vom explora în detaliu ce este INP, de ce este important să fie optimizat și cum poate afecta acesta performanța și clasamentul site-urilor web.

Ce reprezintă INP?

INP (Interaction to Next Paint) este un metric de performanță Core Web Vitals care măsoară capacitatea de răspuns al unui website. Acesta determină cât de repede se actualizează o pagină web după ce un utilizator a interacționat cu aceasta, fie printr-un click pe un buton al paginii sau după apăsarea unei taste.

Astfel, INP se concentrează doar pe timpul necesar pentru ca feedback-ul vizual să fie prezentat după ce este efectuată o anumită acțiune (i.e. “Next Paint” – reprezintă procesul prin care un browser adaugă pixeli pe ecran) și exclude eventualele efecte ale unei interacțiuni precum cele de solicitări ale rețelei sau actualizările de interfață.

De ce este important acest metric pentru website-ul tău?

INP este un factor important pentru că reflectă experiența utilizatorului în ceea ce privește interactivitatea unui site web. Utilizatorii se așteaptă ca un website să răspundă rapid la acțiunile lor, iar un INP crescut poate duce la frustrare și la abandonarea site-ului.

Deși unele interacțiuni durează în mod natural mai mult decât altele, este important să fie prezentat un feedback vizual inițial pentru a spune utilizatorului că se întâmplă ceva, iar Interaction to Next Paint este prima oportunitate de a face acest lucru.

De asemenea, Google poate lua în considerare INP atunci când evaluează și clasifică site-urile web în rezultatele căutării, ceea ce înseamnă că o performanță slabă la acest capitol poate afecta și vizibilitatea online a unui site.

Cum putem măsura metricul INP și care ar fi considerat un scor bun pentru acesta?

Odata cu introducerea INP, cei trei metrici importanți care alcătuiesc acum Core Web Vitals sunt:

INP (Interaction to Next Paint) – Metricul care măsoară interactivitatea în pagină
LCP (Largest Contentful Paint) – Metricul care măsoară timpul de încărcare a paginii
CLS (Cumulative Layout Shift) – Metricul care măsoară stabilitatea vizuală a paginii

Performanța INP este măsurată în milisecunde(ms), iar un rezultat considerat bun de către Google este sub 200ms. Dacă rezultatul acestei masurători se află între valorile 200ms si 500ms atunci se consideră că este nevoie de îmbunătățiri. Iar tot ce depăseste 500ms este considerat ca o performanță slabă în privința acestui metric.

Dar ce poate influența o valoare crescută în rezultatele acestui metric? Ei bine, elemente precum mărimea și complexitatea unei pagini web, la fel și numarul mare de fișiere JavaScript sau CSS pot afecta performanța INP.

Pentru a măsura valorile INP a unui website putem folosi instrumentul de testare a performanței denumit Google PageSpeed Insights. Acest tool va face o verificare în detaliu și va oferi informații atât pentru versiunea de mobil cât și pentru cea de desktop a site-ului.

După ce vedem rezultatele în tool-ul de performanță menționat mai sus, primul pas ar fi să investigăm acțiunile din site care contribuie la valorile INP. Pentru această verificare avem nevoie de un browser bazat pe arhitectura Chromium, precum Chrome, Edge sau Brave și o pagină web care să poată realiza interacțiuni măsurate de INP.

În exemplul nostru de mai jos, am ales sa investigăm ce se intâmplă atunci când dăm click pe butonul SEO din meniul de navigare al site-ului Gun Media.

Pentru a putea începe această verificare, avem nevoie să deschidem interfața de developer. Putem face acest lucru printr-o simplă apăsare a butonului F12 de pe tastatură. În cazul dispozitivelor laptop, este posibil ca pe acel buton sa fie de multe ori înregistrată altă comandă, așadar pentru a ignora acea comandă predefinită este necesar să ținem apăsat mai întâi butonul FN și apoi să apăsăm și tasta F12 pentru a deschide interfața cu uneltele pentru development.

Dupa ce avem această interfață deschisă, apăsăm pe butonul “Performance” din meniul principal de unelte.

În funcție și de targetul de audiență al site-ului, putem activa anumite setări care să simuleze experiența unui utilizator ce folosește un dispozitiv mai vechi sau are o conexiune mai slabă. Pentru a simula acest lucru trebuie doar să alegem din câmpurile de CPU și Network setarea care ne interesează.

Apoi, tot ce avem de făcut este sa apăsăm butonul “Record” și să interacționăm cu pagina, în cazul nostru dând click pe butonul din meniu.

După ce am efectuat interacțiunea în site, putem apăsa pe butonul “Stop”, iar apoi așteptăm ca datele înregistrate sa fie afișate în interfață.

Cele mai importante categorii când analizăm elementele care contribuie la performanța INP sunt “Interactions” și “Main”. Prima categorie de interes ne arată orice interacțiune realizată pe pagina web, iar a doua categorie ne arată șirul principal de evenimente realizate de către browser.

Inspectând aceste două categorii, observăm blocuri de task-uri care conțin porțiuni hașurate cu roșu, acestea arătându-ne faptul că sunt task-uri care durează mult. Așezând cursorul deasupra unui astfel de task, putem vedea exact cât timp a durat executarea acestuia, iar sub el vom găsi evenimentele care au creat acel task.

În secțiunea “Summary” din josul interfeței vom descoperi cât timp a durat fiecare task alocat unui proces diferit. Acest timp poate varia în funcție de task, dar în majoritatea cazurilor cele de script și încărcare vor avea cele mai mari durate.

În categoria “Interactions” dacă vom așeza cursorul deasupra taskului executat de noi (Pointer), se va afișa un chenar informativ despre timpul de procesare și durata acestuia. În cazul nostru, task-ul s-a încadrat în parametrii recomandați de Google, dar în caz contrar, va apărea și mesajul “Long interaction is indicating poor page responsiveness.” care ne sugerează faptul că este nevoie de optimizări.

Apăsând pe elementul “Pointer” putem observa mai în detaliu procesul acestei interacțiuni. În rubrica “Summary” regăsim statistici precum timpul până la interacțiune (30ms), timpul de procesare (138ms), dar și timpul total al interacțiunii (184.33ms).

De asemenea, pentru a înțelege care dintre aceste procese durează cel mai mult în interiorul fiecărui task putem merge la rubrica “Bottom-Up”. Aici ne este prezentat cu exactitate care dintre activități a ocupat cea mai mare bucată din timpul total raportat.

Acum că știm să aflăm procesele care sunt implicate în interacțiunea unui user cu o pagină web, putem clasifica metricul INP în trei componente principale:

Input delay: ce reprezintă task-urile din fundal care, până la finalizarea acestora, împiedică browserul să gestioneze o interacțiune
Processing time: care reprezintă codul ce rulează pentru a realiza actualizările interfeței din interacțiunea cu utilizatorul
Presentation delay: ce reprezintă acțiunea browserului de a analiza și prezenta noul conținut în pagină, în urma interacțiunii

Cum putem să îmbunătățim performanța INP pentru ca Google să fie mulțumit?

Pentru a îmbunătăți performanța acestui metric există câteva strategii cheie:

Lazy loading pentru imagini – realizând procesul denumit “lazy load” pentru imaginile din site încetinim astfel încărcarea imaginilor în afara ferestrei vizualizate de către user, îmbunătățind în schimb timpul de încărcare al paginii și, totodată, scorul INP.

Optimizarea codului și a resurselor din site – Reducerea dimensiunii sau a complexității codului și a resurselor (cum ar fi imagini, fișiere CSS și JavaScript) poate ajuta la accelerarea timpului de încărcare și la îmbunătățirea interactivității. Această metodă implică în primul rând comprimarea fișierelor mai sus amintite, dar include și eliminarea din site a fișierelor neutilizate. Și ordinea în care sunt încărcate resursele este un factor important, deoarece încărcând fișierele CSS înaintea celor de JavaScript putem aduce un beneficiu în plus la capitolul performanță.

Folosind încărcarea asincronă în site se pot, de asemenea, evita conflictele de resurse rezultând în pagini care se încarcă mai rapid. Această metodă are la bază un simplu proces de a permite rularea simultană a mai multor task-uri, evitând astfel situații în care un task îl va bloca pe altul, ceea ce va duce la o durată de procesare ridicată.

Implementarea unui CDN (Content Delivery Network) poate aduce îmbunătățiri consistente în ceea ce privește viteza de încărcare a paginilor din site și poate, de asemenea, influența în bine și metricul INP. CDN-ul folosește o tehnologie care reușește să distribuie conținutul unui website în funcție de localizarea geografică pentru ca informația să ajungă mai rapid către utilizatori, rezultând într-o încărcare mai rapidă a paginilor web și a elementelor acestora. Folosit corect, acesta poate accelera atât performanța site-ului cât și îmbunătăți securitatea acestuia.

Concluzie

Deși nu am putea spune că este un factor direct de poziționare în căutari, Interaction to Next Paint (INP) este un metric important introdus de Google pentru a evalua experiența utilizatorului pe site-urile web.

Astfel, e bine să reținem că o valoare INP mai mică indică o interactivitate mai rapidă și acest element poate contribui la o mai bună poziționare a site-ului în rezultatele căutării.