Interacțiune cu următoarea vopsea: ce este și cum se face?

Ați experimentat vreodată un site sau o aplicație lent și care nu răspunde?

Poate că ați făcut clic pe un buton și a durat mult până când ceva să apară pe ecran. Este o experiență frustrantă, nu?

Exact despre asta este „Interacțiunea cu Next Paint” (INP).

Interacțiunea cu Next Paint (INP) este o măsură ��n curs de dezvoltare pe care Google o folosește pentru a evalua cât de repede site-ul dvs. răspunde la intrările utilizatorilor. Pe 12 martie 2024, a devenit unul dintre criteriile Core Web Vitals care influențează clasamentele Google.

De ce contează asta?

În era digitală de astăzi, oamenii se așteaptă ca lucrurile să se întâmple instantaneu. Dacă un site web sau o aplicație nu răspunde rapid la acțiunile tale, probabil că vei deveni nemulțumit și vei renunța. Nimeni nu are timp pentru aplicații lente în zilele noastre!

Optimizarea INP este crucială pentru a oferi o experiență de utilizator fără întreruperi, plăcută, care îi menține implicați și mulțumiți. Cu cât INP este mai mic, cu atât performanța percepută a site-ului sau a aplicației dvs. este mai mare.

Să examinăm INP în profunzime și să explorăm cum să-l măsuram pentru a vă îmbunătăți scorul existent.

Ce este interacțiunea cu Next Paint (INP)?

Interacțiunea cu Next Paint (INP) este o valoare de performanță web care contorizează timpul dintre o interacțiune a utilizatorului (cum ar fi un clic, atingere sau derulare) și data viitoare când pixelii sunt pictați pe ecran ca rezultat al acelei interacțiuni.

În termeni simpli, INP măsoară cât de repede o pagină web sau o aplicație răspunde în mod vizibil la interacțiunea utilizatorului. Un număr INP mai mic indică o experiență mai receptivă, în timp ce o valoare INP mai mare indică o întârziere vizibilă între acțiunea utilizatorului și actualizarea vizuală de pe ecran.

Pentru majoritatea interacțiunilor utilizatorului, valoarea INP sugerată este mai mică de 200 de milisecunde (ms). O valoare INP mai mare de 300 ms este considerată slabă și va fi văzută ca lentă de către utilizatori

Interacțiunea cu Next Paint ca element vital principal

Interacțiunea cu Next Paint a fost introdusă ca una dintre cele trei valori Google Core Web Vitals pe 12 martie 2024. A înlocuit valoarea anterioară First Input Delay.

Ca măsură de bază Web Vitals, interacțiunea slabă cu Next Paint poate influența clasamentul dvs. în căutarea Google.

Cum diferă interacțiunea cu următoarea vopsea de prima întârziere de intrare?

INP este măsura succesoare a First Input Delay (FID). Ambele sunt valori de răspuns.

FID și INP variază în două moduri:

• FID măsoară doar prima întârziere de procesare, în timp ce INP măsoară întreaga perioadă de timp dintre introducerea utilizatorului și actualizarea UI.
• FID pur și simplu numără interacțiunea inițială a utilizatorului pe o pagină, dar INP consideră (aproximativ) cea mai mare latență.

First Input Delay estimează cât durează browserul pentru a începe procesarea datelor introduse de utilizator. Timpul efectiv petrecut pentru a răspunde la evenimente sau pentru a schimba interfața cu utilizatorul nu este inclus.

După cum sugerează și numele, FID analizează doar interacțiunea inițială pe care utilizatorul o are cu site-ul web. Este posibil ca acest contact inițial să nu reflecte cu exactitate experiența generală a utilizatorului, în special pentru site-urile care rămân deschise pentru o perioadă îndelungată, cum ar fi aplicațiile cu o singură pagină.

Interacțiunea cu Next Paint evaluează de obicei cea mai slabă latență de intrare de pe pagină. Cu toate acestea, dacă există o mulțime de întâlniri cu utilizatori, valorile aberante vor fi eliminate, iar Google va evalua percentila 98 pentru întârzierea interacțiunii.

Deci, dacă INP-ul unei pagini este de 250 de milisecunde, 2% dintre interacțiunile utilizatorilor au avut o latență mai mare decât aceasta.

Cum funcționează Interacțiunea cu Next Paint (INP)?

INP este o măsurătoare de receptivitate care se concentrează pe timpul scurs între interacțiunile utilizatorului. Măsoară cât de repede răspunde un element de pagină web atunci când este efectuată o anumită acțiune asupra acestuia.

Iată cum funcționează INP:

• Un utilizator interacționează cu o pagină web făcând clic pe un buton.
• Browserul solicită conținut nou de la serverul web.
• Serverul web furnizează conținut proaspăt către browser.
• Browserul afișează noul conținut pe pagină.
• Browserul calculează timpul necesar pentru a crea noul conținut și îl raportează ca scor INP.

O evaluare INP scăzută indică faptul că pagina este extrem de receptivă la intrarea utilizatorului. Ca parte a Core Web Vitals, INP este semnificativ din următoarele motive:

• Experiența utilizatorului a fost îmbunătățită:Un scor INP ridicat indică faptul că vizitatorii trebuie să aștepte mult timp pentru ca pagina web să răspundă la activitățile lor, ceea ce poate fi enervant.

• SEO (optimizare pentru motoarele de căutare):INP și alte Core Web Vitals fac parte din semnalele de experiență ale paginii Google, care influențează clasarea unui site web în paginile cu rezultatele căutării. Acest lucru subliniază importanța INPValoarea SEO.

• Reduceți rata de respingere:Timpii lenți de încărcare ar putea determina clienții să părăsească pagina, reducând rezultatul companiei dvs.

Cum se măsoară INP?

INP monitorizează timpul care trece între introducerea utilizatorului, cum ar fi clicurile și apăsările de taste, și următoarea actualizare a UI. Această întârziere are trei componente:

o. Întârziere de intrare

Se așteaptă operațiunile de fundal pe site-ul web pentru a împiedica rularea handler-ului de evenimente.

b. Timp de procesare

Executarea handlerelor de evenimente în JavaScript.

c. Întârziere de prezentare

Ocuparea altor operațiuni în așteptare, recalcularea aspectului paginii și pictarea conținutului paginii. INP-urile sunt măsurate în milisecunde (ms). Un punct de referință bun este mai mic de 200 ms, iar orice lucru între acesta și 500 ms este considerat că trebuie îmbunătățit. O latență de 500 ms sau mai mare este considerată slabă.

Mai multe variabile pot influența o valoare INP, inclusiv dimensiunea și complexitatea unei pagini web, precum și numărul de fișiere JavaScript și CSS încărcate.

Puteți utiliza multe instrumente pentru a evalua Interacțiunea cu Next Paint, cum ar fi:

• Testul de viteză al site-ului DebugBear
• Informații despre viteza paginii Google
• Site-ul nostru Viteză Extensia Chrome
• Depanator INP
• Google Search Console
• Biblioteca Web Vitals

Instrumentele de testare a vitezei site-ului vă pot ajuta să determinați valoarea INP a unui site web. Acest tip de aplicație poate oferi informații despre cum funcționează valorile tale Core Web Vitals și poate oferi îndrumări despre cum să le optimizezi.

Google PageSpeed ​​Insights este un instrument popular pentru analiza INP șiperformanța site-ului. Acesta va evalua un site și va face recomandări pentru cele mai bune practici de aplicat. De asemenea, puteți examina cât de repede se încarcă site-ul dvs. pe dispozitivele mobile și desktop.

PageSpeed ​​Insights prezintă două tipuri de constatări. Partea de sus afișează valorile Core Web Vitals ale unui site din raportul Chrome UX, o colecție de valori de performanță din lumea reală de la utilizatorii Chrome.

Valorile afișate în raportul de mai jos provin dintr-o setare de laborator controlată care utilizează Google Lighthouse. Aceste date pot fi folosite pentru a testa funcții noi înainte de a fi puse în funcțiune.

Dacă datele INP ale site-ului nu sunt disponibile, consultați timpul total de blocare (TBT). Această măsurătoare evaluează o nouă formă de receptivitate. Se concentrează pe cât timp un site web nu poate răspunde la interacțiunea utilizatorului în timpul încărcării.

În partea de jos, există idei despre cum să îmbunătățiți valorile Core Web Vitals, după cum urmează:

Cum să optimizați pentru interacțiunea cu Next Paint (INP)?

Deci, pentru a optimiza INP, doriți să simplificați și să prioritizați lista de sarcini pentru firul principal cât mai mult posibil. Iată câteva strategii și modalități majore de optimizare pentru a îmbunătăți valorile Interaction to Next Paint (INP) și de a crește capacitatea de răspuns:

o. Îmbunătățiți performanța JavaScript

JavaScripteste o componentă cheie a multor site-uri web. Oferă multe elemente interactive; cu toate acestea, poate încetini și viteza site-ului.

Când JavaScript este executat, acesta rulează pe firul principal, care este responsabil pentru redarea unei pagini web. Dacă codul este ineficient, poate cauza oprirea firului și împiedică site-ul web să răspundă la intrarea utilizatorului.

Pentru a îmbunătăți capacitatea de răspuns, optimizați JavaScript. Puteți realiza acest lucru prin:

• Minimizarea fișierelor JavaScriptreduce cantitatea de JavaScript, permițându-i să încarce mai multrepede.

• Activați compresia GZip.Un alt mod obișnuit de a comprima fișierele și datele site-ului web.

• Folosind un cadru JavaScript.Acest instrument vă poate ajuta să vă organizați codul JavaScript și să îl faceți mai eficient. AngularJS și jQuery sunt exemple binecunoscute.

• Folosind CDN.Această tehnologie, cunoscută sub numele de rețea de livrare a conținutului, va distribui fișierele JavaScript de pe serverele situate în apropierea publicului țintă, rezultând timpi de încărcare mai rapidi.

JavaScript ineficient poate bloca firul principal, provocând întârzieri de redare. Împărțirea codului, încărcarea leneșă, utilizarea lucrătorilor web și evitarea operațiunilor de lungă durată pe firul principal sunt toate opțiuni pentru a reduce întârzierea JavaScript.

b. Utilizați lucrători web

Lucrătorii web sunt un serviciu care permite JavaScript să ruleze independent de firul principal. Sunt utile pentru a rula sarcini complicate în fundal.

Să presupunem că aveți un site web WordPress încărcat cu fotografii, videoclipuri și date. Lucrătorii web pot transfera aceste operațiuni JavaScript costisitoare într-un thread de fundal, prevenind blocarea interfeței.

O altă modalitate de a evita ținerea firului principal este de a împărți joburile JavaScript mari în altele mai mici.

c. Împărțirea sarcinilor lungi

Împărțirea sarcinilor mari permite browserului web să le gestioneze în părți mai mici simultan. Drept urmare, firul principal este liber să îndeplinească sarcini mai importante.

Dup�� cum știți, sarcinile lungi blochează firul principal, împiedicând browserul să efectueze evenimente de interacțiune. Cătreîmbunătățiți capacitatea de răspuns a site-ului dvs., reduceți tensiunea pe firul principal și încercați să împărțiți operațiunile mari.

Prin împărțirea activităților mari în biți mai mici, firul principal poate îndeplini alte sarcini și poate răspunde la interacțiunile utilizatorului mai rapid.

În plus, întreruperea sarcinilor lungi ajută la minimizarea efectului „jank”, în care animațiile și tranzițiile de pe site devin sacadate sau bâlbâite din cauzala un fir principal supraîncărcat. Asigurându-se că fiecare activitate este finalizată într-un interval de timp mai scurt, site-ul web poate oferi utilizatorului o experiență vizuală mai simplă.

d. Prioritizează pregătirea pentru intrare

Pregătirea de intrare se referă la capacitatea unei pagini web de a răspunde la interacțiunea utilizatorului. Când nu este, înseamnă de obicei că firul principal al browserului este ocupat cu alte sarcini.

Iată cum să prioritizați pregătirea pentru intrare și să creșteți INP:

1. JavaScript necritic va fi amânat

Unele JavaScript nu sunt necesare pentru încărcarea inițială a paginii și pot fi executate dupăprincipal continut. Acest lucru permite firului principal să prioritizeze interacțiunile utilizatorilor și să mărească capacitatea generală de răspuns a paginii.

2. stropit

Această strategie determină frecvența cu care este executată o funcție. De exemplu, pe măsură ce un utilizator derulează în jos, același cod poate fi executat de sute de ori pe secundă. Throttling-ul îi permite să ruleze doar o dată pe milisecundă sau cam asa ceva, indiferent de câte ori este declanșat evenimentul.

3. Debotul

Acest lucru interzice o funcție să se execute din nou până când a trecut o anumită perioadă. De exemplu, atunci când utilizatorii își redimensionează fereastra browserului, acest eveniment poate iniția aceeași procedură de mai multe ori. Debouncing poate fi folosit pentru a amâna execuția până când utilizatorul încetează să redimensioneze pentru o perioadă predeterminată.

4. Ascultătorii evenimentelor care nu participă activ

Ascultătorii de evenimente sunt construcții de computer care detectează anumite evenimente, cum ar fi derularea și atingerea. Făcându-le pasive, browserul trebuie să ignore așteptarea finalizării unei anumite funcție și, în schimb, să continue cu alte activități.

e. Oferiți feedback imediat

Anumite activități, cum ar fi completarea unui formular cu mai multe intrări de date, pot duce la întârzieri majore de răspuns.

Aici intervine feedbackul instantaneu. Această strategie oferă clienților o indicație vizibilă că site-ul web a primit și procesează cererea lor.

Utilizatorii nu vor fi lăsați să se întrebe dacă site-ul și-a înregistrat datele introduse dacă primesc feedback rapid. Poate da impresia de performanță mai rapidă, chiar dacă nu reduce efectiv timpul de procesare.

Consultați aceste exemple de indicii de feedback rapid:

1. Indicatori de sarcină

Afișează un rotitor sau o bară de progres atunci când se execută un proces, mai ales când se prezintă date sau când treci la o pagină nouă.

2. Mesaje pop-up de confirmare

Este o idee bună să afișați un mesaj care confirmă că o operațiune, cum ar fi adăugarea unui articol într-un coș, a fost finalizată cu succes.

3. Validarea câmpului formular

De exemplu, dacă un utilizator introduce o adresă de e-mail formată incorect, afișați imediat o notificare de eroare, în loc să așteptați până când formularul este trimis.

Concluzie

La sfârșitul zilei, prezentând unexperiență excelentă pentru utilizatorpe web se rezumă la un singur lucru: receptivitate. Viteza cu care site-ul sau aplicația dvs. răspunde la evenimentele utilizatorului, cum ar fi clicuri, atingeri și navigare, poate determina dacă este o experiență plăcută sau frustrant de lentă.

De aceea, optimizarea pentru o interacțiune rapidă cu Next Paint (INP) este atât de importantă. INP monitorizează minutele importante dintre momentul în care cineva interacționează cu site-ul tău web și momentul în care primește confirmarea vizuală pe ecran. Cu cât INP este mai mic, cu atât totul pare mai rapid și mai receptiv.

Deci, mergeți mai departe și deblocați puterea INP optimizat!

Descoperiți capacitatea de răspuns rapidă care distinge site-urile web obișnuite de cele care par luxos de rapide și de fluide. Satisfacția utilizatorilor tăi și succesul experiențelor tale digitale depind ambele de acest lucru.

Întrebări frecvente