Cum să îmbunătățiți interacțiunea cu Next Paint (INP)

Interacțiunea cu Next Paint (INP) nu mai este experimentală.

Începând cu martie 2024, Google se angajează să promoveze INP ca noua valoare Core Web Vital pentru receptivitate, înlocuind First Input Delay.

Și, deși s-ar putea să credeți că gestionarea scorului INP al site-ului dvs. este o sarcină pe care o puteți amâna, am cere să ne diferențiem.

Google a început deja să semnaleze problemele INP în Search Console și să trimită e-mailuri către site-uri web care scad pragul pentru o bună capacitate de răspuns:

Cu alte cuvinte, momentul perfect pentru a începe optimizarea site-ului pentru următoarea măsurătoare de răspuns este acum. Și în rândurile următoare, veți afla exact cum.

• Prezentare generală a interacțiunii cu Next Paint
• Înțelegerea latenței interacțiunii
• De ce site-ul dvs. nu reușește INP
• Cum să identifici interacțiuni lente
• Cum să optimizați INP

Citește mai departe.

Interacțiune cu Next Paint: Prezentare generală

Înainte de a explora diferitele tehnici de optimizare, iată o scurtă recapitulare a ceea ce măsoară INP.

INP evaluează receptivitatea generală a unei pagini la interacțiunile utilizatorului observând latența tuturor interacțiunilor eligibile în timpul vizitei unui utilizator la o pagină. Valoarea finală a INP este cea mai lungă interacțiune observată.

Interacțiunile care joacă un rol în calculele INP sunt:

• Făcând clic cu mouse-ul;
• Atingerea unui dispozitiv cu un ecran tactil;
• Apăsarea unei taste de pe o tastatură fizică sau digitală.

Similar cu celelalte Core Web Vitals, scorul INP poate fi în unul dintre cele trei praguri:

• Bun : 0-200 ms
• Necesita îmbunătățiri : 200-500 ms
• Slab : >500 ms

Pentru a garanta că atingeți acest obiectiv pentru majoritatea utilizatorilor dvs., este recomandat să evaluați cea de-a 75-a percentila a încărcărilor paginilor, segmentate pe dispozitive mobile și desktop.

Dacă doriți să aflați mai multe sau să vă îmbunătățiți cunoștințele despre INP, citiți articolul nostru despre viitoarea măsurătoare de receptivitate.

Înțelegerea latenței interacțiunii

Dacă doriți ca scorul dvs. INP să treacă de la slab la bun, trebuie să înțelegeți latența interacțiunii.

Deci, ce este mai exact latența interacțiunii?

Latența interacțiunii se referă la întârzierea sau decalajul experimentat între intrarea sau acțiunea unui utilizator și răspunsul sau ieșirea rezultată pe ecran. Este un factor crucial în determinarea capacității de răspuns a site-ului dvs. și a performanței percepute.

Trei componente principale contribuie la latența interacțiunii:

Întârziere de intrare

Întârzierea de intrare se referă la timpul dintre momentul în care un utilizator începe să interacționeze cu pagina și când încep să se execute acțiunile asociate sau apelurile la eveniment. Include întârzierile fizice sau tehnice cauzate de dispozitivul de introducere (de exemplu, tastatură, mouse, ecran tactil) și mecanismele de procesare a intrării sistemului.

timp de procesare

Odată ce intrarea utilizatorului este primită, sistemul trebuie să o proceseze pentru a determina răspunsul sau acțiunea adecvată. Timpul de procesare se referă la durata necesară sistemului pentru a analiza și interpreta datele de intrare, pentru a efectua orice calcule sau operațiuni necesare și pentru a genera rezultatul sau răspunsul.

Întârziere de prezentare

După ce sistemul a generat rezultatul sau răspunsul, există de obicei o întârziere înainte ca acesta să fie prezentat utilizatorului. Întârzierea prezentării cuprinde timpul necesar pentru ca sistemul să actualizeze afișajul, să reda grafica sau interfețele utilizator și să livreze rezultatul către interfața utilizator sau dispozitivul de ieșire.

Dacă aveți nevoie de mai multe informații, puteți verifica prezentarea lui Jeremy Wagner la JSConf Korea 2022:

Înțelegerea și optimizarea latenței interacțiunii poate oferi o experiență perfectă pentru utilizator și poate remedia scorurile INP.

Dar înainte de asta, să aruncăm o privire la principalii vinovați pentru latența ridicată a interacțiunii și scorurile INP proaste...

Problemă Core Web Vitals INP detectată pe site-ul dvs.: ce ar putea fi cauza?

Deși INP este etichetat ca fiind în așteptare,acest lucru nu înseamnă că ar trebui să intri în procesul de optimizare fără o strategie.

Primul lucru pe care trebuie să-l faceți este să aflați care sunt principalii vinovați ai INP, astfel încât să îi puteți gestiona eficient.

Iată principalele motive pentru mesajul de eroare„Problemă INP: mai mult de 200 ms”:

Sarcini lungi

Tot ceea ce face un browser este considerat o sarcină. Aceasta include randarea, analizarea HTML, rularea JavaScript și orice lucru asupra căruia ați putea sau nu să aveți control.

Firul principal este locul în care browserul face cea mai mare parte a muncii necesare pentru a afișa o pagină. Și deși ar putea exista zeci de sarcini care trebuie executate,firul principal poate procesa doar o sarcină la un moment dat.

Dar asta e doar jumătate din problemă.

Cealaltă jumătate este că, dacă o sarcină durează mai mult de 50 de milisecunde pentru a fi executată, este clasificată casarcină lungă. 

Având în vedere că firul principal poate gestiona câte o sarcină odată, cu cât sarcina este mai lungă, cu atât browserul va fi blocat procesând-o.

Cu alte cuvinte, dacă utilizatorul încearcă să interacționeze cu pagina în timp ce rulează o sarcină lungă, browserul va avea întârziere să îndeplinească cererea.

Rezultatul este - latența interacțiunii și un scor INP mai mic.

Dimensiune DOM mare

Un alt motiv pentru care INP eșuează este acela de a avea o dimensiune mare a DOM.

Document Object Model (DOM) este o parte inseparabilă a fiecărei pagini web. DOM este o reprezentare a unui document HTML structurat ca un arbore. Fiecare ramură din arbore se termină la un nod și fiecare nod conține obiecte. Nodurile pot reprezenta diferite părți ale documentului, cum ar fi elemente, șiruri de text sau comentarii.

DOM-ul în sine nu este o problemă, dar dimensiunea lui ar putea fi. O dimensiune mare DOM afectează capacitatea unui browser de a reda o pagină rapid și eficient.

Cu cât DOM este mai mare, cu atât este mai mare consumul de resurse pentru a afișa inițial pagina și a face actualizări ulterioare în timpul ciclului de viață al paginii.

Pur și simplu pune:

Dacă doriți ca o pagină să răspundă rapid la interacțiunile utilizatorului, asigurați-vă că DOM include doar elementele necesare.

S-ar putea să vă întrebați ce înseamnă „necesar”. Potrivit Lighthouse, dimensiunea DOM a unei pagini este excesivă atunci cânddepășește 1.400 de noduri .

Așa că asigurați-vă că rămâneți în această limită. În caz contrar, este posibil să vedeți următoarea eroare în raportul PageSpeed ​​Insights:

Redarea HTML pe partea clientului

Pentru a înțelege de ce randarea site-ului client ar putea cauza scoruri INP slabe, trebuie să explicăm cum diferă de redarea HTML pe partea serverului.

Încărcarea tradițională a paginii implică ca browserul să primească HTML de la server la fiecare navigare. Ce se întâmplă în fundal atunci când o persoană decide să încarce o pagină este:

1. Browserul trimite o solicitare de navigare pentru adresa URL furnizată.
2. Serverul răspunde cu HTML în bucăți.

Cheia aici este „în bucăți”.

Când browserul primește prima bucată de HTML, poate începe să o analizeze. Dar, după cum știm, parsarea HTML este o sarcină de care se ocupă firul principal.

Cu toate acestea, după ce fiecare bucată este procesată, browserul ia o pauză de la analizare și permite efectuarea altor sarcini. Acest lucru previne sarcinile lungi care ar putea încetini browserul.

În schimb, poate începe redarea părților din pagină care au fost deja analizate, astfel încât utilizatorul să vadă mai devreme o pagină parțial încărcată. De asemenea, poate gestiona orice interacțiuni cu utilizatorul care au loc în timpul încărcării inițiale a paginii.

Cu alte cuvinte:

Această abordare se traduce printr-un scor INP (Interaction to Next Paint) mai bun pentru pagină.

Dimpotrivă, dacă site-ul dvs. folosește modelul de aplicație pentru o singură pagină (SPA), care creează în mod dinamic părți mari din HTML/DOM pe client cu JavaScript, vă puteți aștepta la efecte negative asupra scorului INP.

În randarea pe partea client, serverul trimite clientului o mică bucată de HTML de bază. Apoi clientul se ocupă de completarea conținutului principal al paginii folosind datele pe care le preia de la server.

Toate navigațiile viitoare sunt gestionate de JavaScript, preluând HTML nou de pe server și actualizând pagina în mod dinamic, fără a o reîncărca complet. Din păcate, când vine vorba de sarcini JavaScript din partea clientului, acestea nu sunt fragmentate automat.

Acest lucru poate duce la sarcini lungi care blochează firul principal, potențial afectand scorul de interacțiune al paginii dvs. cu Next Paint. Prin urmare, redarea pe partea clientului poate afecta încărcarea și interactivitatea paginii dvs.

Dacă aveți nevoie de informații suplimentare despre avantajele și dezavantajele redării pe partea de server vs. pe partea clientului, vedeți acest videoclip:

Acum că îi cunoașteți pe câțiva dintre principalii vinovați, să continuăm cu măsurarea scorului INP și identificarea interacțiunilor lente.

Cum să identificați interacțiunile lente folosind datele de teren și să le depanați în laborator

Următorul pas în călătoria de optimizare a INP este măsurarea performanței site-ului dvs. și identificarea oricăror interacțiuni lente.

Similar cu First Input Delay, INP este cel mai bine măsurat pe teren – examinând modul în care utilizatorii reali experimentează site-ul dvs.

Procesul optim de testare ar arăta astfel:

1. Adunați date de câmp pentru INP
2. Identificați acțiunile exacte responsabile pentru INP
3. Folosiți instrumente de laborator pentru a afla de ce aceste interacțiuni sunt lente

Am spus optimdeoarece, în unele cazuri, site-ul dvs. ar putea să nu aibă date de câmp (cunoscute și sub numele de date de monitorizare a utilizatorilor reale (RUM)). Cu toate acestea, acest lucru nu înseamnă că ar trebui să renunțați la optimizarea scorului INP. Trebuie să adoptați o abordare diferită și să utilizați instrumentele de laborator disponibile.

Să aruncăm o privire la ambele scenarii și să explicăm cum să luăm majoritatea datelor de teren și de laborator.

Date de câmp

În mod ideal, veți dori să aveți date de câmp atunci când începeți să îmbunătățiți capacitatea de răspuns a site-ului dvs. Bazându-vă pe datele RUM, vă economisiți mult timp pentru a afla ce interacțiuni trebuie optimizate.

În plus, instrumentele bazate pe laborator pot simula anumite interacțiuni, dar nu pot replica pe deplin experiențele utilizatorilor din lumea reală.

Când colectați date de câmp INP, veți dori să capturați următoarele pentru a da contextul de ce interacțiunile au fost lente:

• Valoarea INP – Distribuția acestor valori va determina dacă pagina îndeplinește pragurile INP.
• Șirul de selectare a elementelor responsabil pentru INP-ul paginii – Nu este suficient să știi doar valoarea INP a unei pagini.Vrei să știi care sunt elementele responsabile pentru interacțiuni.
• Starea de încărcare a paginii pentru interacțiunea care este INP-ul paginii – Înțelegerea dacă o interacțiune are loc în timpul încărcării paginii sau ulterior vă ajută să determinați dacă ar trebui să optimizați firul principal sau dacă interacțiunea în sine este lentă, indiferent de încărcarea inițială a paginii.
• Ora de pornire a interacțiunii – Asigurați-vă că înregistrați ora de pornire a interacțiunii, deoarece vă informează când a avut loc interacțiunea pe cronologia performanței.
• Tipul de eveniment – ​​Cunoașterea tipului de eveniment de interacțiune – faceți clic pe apăsarea tastei, alte evenimente eligibile – vă permite să identificați cu exactitate ce eveniment de apelare din interacțiune a durat cel mai mult.

Dacă te întrebi:

Cum ar trebui să surprind toate aceste lucruri?

Nu vă faceți griji. Toate datele sunt expuse în biblioteca JavaScript web-vitals. Puteți consulta ghidul pas cu pas al Google despre cum să utilizați biblioteca vitală web și chiar despre cum să transmiteți datele INP direct către Google Analytics.

De asemenea, chiar dacă colectați deja date cu un furnizor RUM terță parte, luați în considerare compararea acestora cu datele Chrome UX Report (CrUX), deoarece există diferențe în metodologiile pe care le folosesc.

Date de laborator

Datele de câmp sunt cea mai fiabilă sursă de măsurare. Cu toate acestea, așa cum am spus, nu este întotdeauna disponibil.

Dar nu trebuie să vă faceți griji, deoarece puteți măsura și identifica interacțiunile pentru a îmbunătăți cu ajutorul datelor de laborator.

Puteți folosi Lighthouse sau PageSpeed ​​Insights pentru a rula unele teste de performanță. Valoarea la care ar trebui să fii atent este timpul total de blocare (TBT).

TBT este o valoare care evaluează capacitatea de răspuns a paginii în timpul încărcării și se corelează foarte bine cu INP. Un scor TBT slab este un semnal că există interacțiuni care ar putea fi lente în timpul încărcării paginii.

Iată cum puteți reproduce interacțiunea lentă cu instrumentele de laborator:

• Utilizați extensia Web Vitals Chrome

Extensia Web Vitals Chrome este una dintre cele mai simple moduri de a măsura latența de interacțiune a site-ului dvs. Iată ce trebuie să faceți pentru a prelua informații utile:

1. În Chrome, dați clic pe pictograma extensii din dreapta barei de adrese.
2. Găsiți extensia Web Vitals în meniul derulant.
3. Faceți clic pe pictograma din dreapta pentru a deschide setările extensiei.
4. Faceți clic pe Opțiuni.
5. Activați caseta de selectare Înregistrare în consolă din ecranul rezultat, apoi faceți clic pe Salvare.

În cele din urmă, deschideți consola Chrome DevTools și începeți testarea. Veți primi jurnalele de consolă utile care vă oferă informații detaliate de diagnosticare pentru interacțiune.

• Înregistrați o urmă cu Chrome DevTools

Pentru a obține și mai multe informații despre motivul pentru care interacțiunea este lentă, puteți utiliza instrumentul de profile de performanță din Chrome DevTools. Doar faceți următoarele:

1. Deschideți Chrome DevTools și accesați panoul Performanță.
2. Faceți clic pe butonul Înregistrare din partea stângă sus a panoului pentru a începe urmărirea.
   
   
   
3. Efectuați interacțiunea dorită.
4. Faceți clic din nou pe butonul Înregistrare pentru a opri urmărirea.

Pentru a identifica rapid problemele de performanță, verificați rezumatul activității din partea de sus a profilelor atunci când profilul se completează. Căutați bare roșii în rezumatul activității, indicând cazuri de sarcini lungi în timpul înregistrării. Aceste bare roșii vă ajută să identificați zonele cu probleme și să vă concentrați investigația.

• Utilizați intervalele de timp Lighthouse

Modul de intervale de timp al Lighthouse este alternativa mai puțin intimidantă la profilul de performanță DevTools. Iată cum să-l folosești:

1. Accesați fila Lighthouse din DevTools.
2. Sub secțiunea etichetată Mod, selectați opțiunea Timespan.
3. Selectați tipul de dispozitiv dorit în secțiunea etichetată Dispozitiv.
4. Asigurați-vă că cel puțin caseta de selectare etichetată Performanță este selectată sub eticheta Categorii.
5. Faceți clic pe butonul Start timespan.
   
   
   
6. Testați interacțiunile dorite pe pagină.
7. Faceți clic pe butonul Încheiere interval de timp și așteptați să apară auditul
8. Odată ce auditul se completează, filtrați-l după INP.

Vi se va prezenta o listă de audituri eșuate și trecute. Când faceți clic pe ele, va apărea un meniu derulant și puteți vedea o defalcare a timpului petrecut în timpul interacțiunii împărțit la întârzierea introducerii, timpul de procesare și întârzierea prezentării.

Sursa: Google

Acum că știți la ce să lucrați, este timpul să vă suflecați mânecile și să începeți optimizarea.

Cum să optimizați INP

Pentru a garanta site-ului dvs. un scor INPbun, trebuie să vă asigurați că fiecare eveniment de interacțiune se desfășoară cât mai repede posibil. Iată cum se poate realiza:

Reduceți întârzierea de intrare

1. Evitați temporizatoarele recurente care suprasolicita firul principal

setTimeout și setInterval sunt funcții de temporizare JavaScript utilizate în mod obișnuit care pot contribui la întârzierea introducerii.

setTimeout programează un apel invers pentru a rula după un timp specificat și, deși poate ajuta la evitarea sarcinilor lungi, depinde de momentul în care are loc expirarea și dacă coincide cu interacțiunile utilizatorului.

setInterval , pe de altă parte, programează un apel invers pentru a rula în mod repetat la un interval specificat. Din acest motiv, este mai probabil să interfereze cu interacțiunile utilizatorului. Natura sa recurentă crește întârzierea de intrare și poate afecta capacitatea de răspuns a interacțiunilor.

Dacă aveți control asupra temporizatoarelor din codul dvs., evaluați necesitatea acestora și reduceți-le cât mai mult posibil.

2. Evita sarcinile lungi

După cum știți deja, sarcinile lungi blochează firul principal, împiedicând browserul să execute evenimentele de interacțiune.

Pentru a îmbunătăți capacitatea de răspuns a site-ului dvs., este important să minimizați volumul de lucru pe firul principal și să luați în considerare întreruperea sarcinilor lungi.

Prin împărțirea sarcinilor lungi în bucăți mai mici, firul principal are ocazia de a gestiona alte sarcini și de a răspunde la interacțiunile utilizatorului mai rapid.

În plus, întreruperea sarcinilor lungi ajută la evitarea efectului „jank”, unde animațiile și tranzițiile de pe pagină devin agitate sau bâlbâiate din cauza firului principal copleșit. Asigurându-vă că fiecare sarcină se finalizează într-un interval de timp mai scurt, pagina poate menține o experiență vizuală mai fluidă pentru utilizator.

3. Evitați suprapunerea interacțiunilor

Suprapunerea interacțiunii înseamnă că, după ce un vizitator a interacționat cu un element, acesta face o altă interacțiune cu pagina înainte ca interacțiunea inițială să aibă șansa de a reda următorul cadru.

De exemplu, acest lucru se poate întâmpla atunci când utilizatorii tastează în câmpuri de formular, ceea ce duce la numeroase interacțiuni de la tastatură într-un interval de timp scurt. Puteți optimiza procesul prin:

• Deblocarea intrărilor pentru a limita numărul de ori se execută un eveniment de apel invers într-o anumită perioadă de timp.
• Folosind AbortController pentru a anula cererile de preluare trimise, astfel încât firul principal să nu devină suprasolicitat gestionând apelurile de preluare.
  

Optimizați apelurile înapoi la evenimente (timp de procesare)

1. Luați în considerare eliminarea apelului inutil

Este cu adevărat necesară apelarea la eveniment costisitoare? Dacă nu, luați în considerare eliminarea completă a codului sau, dacă acest lucru nu este posibil, amânați execuția acestuia până la un moment mai potrivit.

2. Amânați lucrările care nu sunt de redare

Sarcinile lungi pot fi întrerupte cedând firului principal. Când renunțați la firul principal, întrerupeți, în esență, sarcina curentă și împărțiți munca rămasă într-o sarcină separată. Acest lucru permite rendererului să gestioneze actualizările interfeței cu utilizatorul care au fost procesate mai devreme în apelarea evenimentului. Prin cedare, permiteți rendererului să execute modificările în așteptare și să asigurați o actualizare fluidă și în timp util a interfeței utilizator.

Minimizați întârzierea prezentării

1. Reduceți dimensiunea DOM

O dimensiune mare a DOM este o modalitate sigură de a eșua evaluarea INP. Deci, pentru a vă asigura că acest lucru nu se va întâmpla, trebuie să reduceți dimensiunea DOM-ului sau, altfel spus - trebuie să reduceți adâncimea DOM.

Vizualizați o adâncime DOM de cel mult 1.400 de noduri.

Puteți obține acest lucru prin încorporarea următoarelor tehnici:

• Evitați pluginurile și temele prost codificate
• Minimizați nodurile DOM bazate pe JavaScript
• Îndepărtați-vă de constructorii de pagini care generează HTML umflat
• Nu copiați/lipiți text în editorul WYSIWYG
• Împărțiți site-ul dvs. de o pagină în mai multe pagini
• Nu ascunde elementele nedorite folosind display:none
• Evitați să utilizați declarații complicate CSS și JavaScript
  

2. Evitați munca excesivă sau inutilă în apelurile requestAnimationFrame

Metoda requestAnimationFrame îi spune browserului că doriți să efectuați o animație și solicită browserului să apeleze o funcție specificată pentru a actualiza o animație chiar înainte de următoarea vopsire.

Reapelarea requestAnimationFrame() face parte din faza de randare din bucla de evenimente și trebuie să se termine înainte ca următorul cadru să poată fi afișat. Dacă utilizați requestAnimationFrame() pentru sarcini care nu au legătură cu modificările interfeței cu utilizatorul, este esențial să recunoașteți că este posibil să provocați o întârziere în redarea cadrului următor.

Așa că evitați să le folosiți atunci când nu este necesar.

3. Amânați apelurile inverse ResizeObserver

Interfața ResizeObserver raportează modificări ale dimensiunilor conținutului unui element sau ale casetei de margine sau ale casetei de delimitare a unui element SVGE.

Reapelurile ResizeObserver rulează înainte de randare și pot amâna prezentarea următorului cadru dacă implică sarcini mari de resurse. Similar cu apelurile înapoi la evenimente, este recomandabil să amânați orice logică inutilă care nu este necesară pentru cadrul imediat ce urmează.

Îmbunătățiți INP cu NitroPack

Pe baza tuturor testelor pe care le-am efectuat în ultimele două luni și a întregii documentații pe care Google a publicat-o pe INP, am putea spune că seamănă foarte mult cu Largest Contentful Paint (LCP).

Un Core Web Vital cu mai multe straturi care are o mulțime de părți mobile.

Așadar, de când Google a anunțat pentru prima dată noile valori de răspuns, am început să testăm și să lucrăm la funcții care vor îmbunătăți scorurile INP ale clienților noștri.

Și am văzut câteva rezultate promițătoare:

Cu NitroPack, clienții noștri experimentează o îmbunătățire medie de 36% a INP.

Și asta s-a întâmplat totul pe pilot automat. Doar prin instalarea NitroPack și datorită funcțiilor de optimizare precum:

• Reduceți CSS neutilizat
• Amână încărcarea JavaScript
• CDN încorporat

De asemenea, vă puteți crește scorurile INP și Core Web Vitals fără a scrie o singură linie de cod. Instalați NitroPack gratuit și experimentați singur îmbunătățirile.

Remediați problemele dvs. de INP și treceți automat Core Web Vitals. Obțineți NitroPack acum →