WP Rocket 3.17: Îmbunătățiți-vă metricul INP cu redarea automată lazy

Ați simțit vreodată că site-ul dvs. web răspunde lent, mai ales dacă încercați să interacționați cu pagini lungi de blog sau pagini de produse de comerț electronic? Optimizarea performanței este o provocare și este cu atât mai mult atunci când vine vorba de îmbunătățirea valorilor complexe legate de experiența utilizatorului, cum ar fi Interacțiunea cu Next Paint (INP). INP este noua metrică Core Web Vital care măsoară capacitatea de răspuns a paginii web și joacă un rol cheie în îmbunătățirea vitezei, experienței utilizatorului și SEO - cu alte cuvinte, nu o puteți ignora.

Dacă ați muncit din greu pentru a îmbunătăți viteza site-ului dvs. și experiența utilizatorului către o notă INP mai bună, veți fi bucuroși să aflați mai multe despre noua noastră versiune majoră și noua sa funcție automată. Salutați WP Rocket 3.17!

Noua noastră versiune majoră se concentrează pe optimizarea automată a modului în care site-ul dvs. redă conținutul pe măsură ce vizitatorii derulează. Este util în special pentru bloguri, magazine online și orice site cu mult conținut de explorat.

Suntem încântați să prezentăm WP Rocket 3.17 din două motive.

În primul rând, noua caracteristică va îmbunătăți metrica INP și viteza percepută, în special pe mobil. De asemenea, poate avea un impact pozitiv asupra altor valori cheie, cum ar fi cea mai mare vopsea satisfăcătoare și notele First Contentful Paint. Optimizarea valorilor legate de experiența utilizatorului poate îmbunătăți și rata de conversie, care este scopul final de a vă face site-ul mai rapid, nu?

Mai mult, WP Rocket este primul plugin care oferă o optimizare atât de puternică și automată pe toate paginile site-ului cu acuratețe.

Descoperiți totul în postarea noastră de blog sau urmăriți videoclipul.

Ce este redarea și impactul acesteia asupra performanței

Pentru a înțelege cum WP Rocket 3.17 poate îmbunătăți performanța site-ului dvs., să începem prin a explica randarea. Când pagina dvs. web se încarcă, intervine randarea - adică modul browserului de a transforma codul site-ului dvs. în elementele vizuale pe care utilizatorii le văd pe ecran.

Redarea browserului presupune mai multe etape care încep cu browserul care primește fișierul HTML și creează arborele DOM, care este reprezentarea structurii arborescente a paginii web. Ultima etapă este pictura – este atunci când browserul pictează fiecare element pe ecran, iar utilizatorii pot vedea pagina web finalizată.

Așa cum se întâmplă întotdeauna cu optimizarea performanței web, există o capcană. De fapt, procesul de randare poate fi o provocare de performanță, deoarece necesită ca browserul să se ocupe de multe sarcini simultan. Această activitate multitasking are loc pe ceea ce se numește firul principal, care este afectat în principal de fișierele JavaScript.

Când firul principal devine prea ocupat, duce la sarcini lungi. Aceste sarcini lungi sunt ca blocajele de trafic care încetinesc capacitatea de răspuns a paginii dvs. și afectează valori precum Interacțiunea cu Next Paint – o măsură esențială Core Web Vital care măsoară cât de repede răspunde pagina dvs. la interacțiunile utilizatorilor.

Redare și performanță

Când vorbim despre randare și impactul acestuia asupra performanței, ne referim în special la două părți ale procesului: randarea și pictura - așa cum ați văzut în secțiunea anterioară. Acestea sunt etapele în care browserul lucrează din greu pentru a afișa conținutul pe ecran – și cele care contribuie la scorul INP și viteza percepută.

Există mai multe variabile care pot afecta performanța în timpul acestui proces. Pentru a numi câteva: dimensiunea DOM, viteza de execuție JavaScript și animațiile. Cu cât conținutul paginii este mai mare, cu atât optimizarea redării este mai dificilă.

Acum că știți că randarea este crucială pentru viteză și trebuie îmbunătățită, să învățăm cum să o facem posibilă.

Faceți cunoștință cu proprietatea CSS de vizibilitate a conținutului

O modalitate eficientă de a optimiza redarea browserului – prin urmare viteza și capacitatea de răspuns – este să profitați de proprietatea CSS de vizibilitate a conținutului. Această proprietate îi spune browserului să nu redeze imediat toate părțile de conținut ale paginii, ci să aștepte până când utilizatorul este pe cale să le vadă.

Ai jucat vreodată jocuri video? Dacă da, știi că întreaga lume nu este încărcată deodată. În schimb, noile scene și fundalul lor sunt afișate – sau redate – doar pe măsură ce avansați. Acesta este exact ceea ce permite proprietatea CSS de vizibilitate a conținutului.

Deci, cum ajută acest lucru? Prin utilizarea vizibilității conținutului, browserul are mai puțină muncă de făcut dintr-o dată. În loc să încerce să redeze totul imediat, se poate concentra pe ceea ce este cel mai important în acest moment. Acest lucru înseamnă:

1. Acesta informează browserul să omite randarea unor elemente până când sunt necesare, astfel încât browserul are mai puține sarcini lungi de rezolvat, mai ales când vine vorba de randare și pictare.
2. Pagina se încarcă mai repede, deoarece cele mai vizibile părți sunt gata rapid.
3. Pagina răspunde mai rapid atunci când utilizatorii interacționează cu ea.

Ca rezultat, site-ul dvs. oferă o experiență de utilizator îmbunătățită. Vizitatorii vă vor vedea conținutul mai rapid și vor putea interacționa cu pagina în timp ce derulează și dau clic.

Vestea grozavă este că proprietatea de vizibilitate a conținutului este acum acceptată de toate browserele majore. Aceasta înseamnă că această funcție puternică poate îmbunătăți performanța unui site web pentru aproape toți utilizatorii, indiferent de browser.

Prin aplicarea proprietății de vizibilitate a conținutului în WP Rocket 3.17, introducem caracteristica de randare automată leneșă. Continuați să citiți pentru a afla ce înseamnă.

3.17: Introducerea redării automate leneșe

Noua noastră versiune majoră face posibilă redarea automată leneșă. Ca întotdeauna pentru noile noastre versiuni și îmbunătățiri, scopul este să vă ajute să vă îmbunătățiți performanța site-ului în cel mai simplu mod, indiferent de abilitățile dumneavoastră tehnice și dacă stăpâniți tehnicile de optimizare a performanței web.

Ne concentrăm pe funcțiile care pot avea un impact semnificativ asupra vitezei și experienței utilizatorului, iar WP Rocket 3.17 nu face excepție.

În primul rând, noua versiune vă poate îmbunătăți în mod semnificativ scorul INP, făcând site-ul dvs. web mai receptiv la vizitatori. De asemenea, s-ar putea îmbunătăți ușor scorurile de cea mai mare vopsea de conținut și de prima vopsea de conținut, deși acesta ar fi mai mult un efect secundar pozitiv.

Noua funcție este sigură de implementat și nu va afecta niciodată vizitatorii dvs. Dacă un browser nu acceptă proprietatea de vizibilitate a conținutului deoarece este o versiune mai veche, nu se va întâmpla nimic – chiar dacă WP Rocket 3.17 este activat.

Funcția este, de asemenea, cu risc scăzut pentru site-ul dvs. - este foarte puțin probabil să spargă ceva.

Ca o notă secundară, ne-am gândit să lansăm o astfel de caracteristică în urmă cu trei ani. La acel moment, caracteristica era bazată pe JavaScript și avea nevoie de un test pe termen lung pentru a verifica impactul potențial asupra SEO. Între timp, proprietatea CSS de vizibilitate a conținutului a avut mai mult suport, oferind o soluție viabilă și mai simplă. Odată cu INP din ce în ce mai relevant pentru optimizarea performanței web, lansarea acestei funcții a devenit o problemă.

Cum funcționează redarea automată lazy

Să revenim la analogia noastră cu jocurile video.

Imaginează-ți că joci un joc. Pe măsură ce vă mutați personajul înainte, jocul redă noi zone înainte de a ajunge la ele. Exact așa funcționează redarea automată leneșă pentru site-ul dvs.

Introducerea redării automate leneșe a fost posibilă datorită celui precedent, WP Rocket 3.16. Versiunea noastră anterioară a introdus 2 îmbunătățiri esențiale:

• Am activat implicit cache-ul mobil separat.
• Am introdus detectarea și optimizarea imaginilor critice (imaginile deasupra pliului) datorită unui far care colectează informații reale despre elementele de optimizat. Caracteristica 3.17 va extinde doar ceea ce urmărește farul pentru a oferi informații precise despre aspect și pentru a face posibilă noua optimizare.

Și iată ce se întâmplă când WP Rocket 3.17 este activat.

Când un utilizator ajunge pe pagina dvs., noua caracteristică nu va permite browserului să redeze totul imediat. Dimpotrivă, browserul va reda elementele de pe pagină numai atunci când utilizatorii sunt aproape de acel punct al paginii - cum ar fi jocul care încarcă zona următoare doar când te apropii de ea. Cu cât pagina este mai lungă, cu atât randarea leneșă va fi mai eficientă.

De aceea, noua versiune este deosebit de benefică pentru:

1. Pagini lungi cu mult conținut, cum ar fi postări de blog sau listări de produse.
2. Pagini cu elemente complexe care necesită mai mult timp pentru redare, cum ar fi animații non-compozite (de exemplu, animații de pânză și fundaluri video).

WP Rocket este primul plugin care aplică cu acuratețe această caracteristică automată în toate paginile dvs. De fapt, WP Rocket 3.17 analizează structura paginii și detectează elemente în care poate fi aplicată randarea leneșă. Plugin-ul procesează fiecare pagină individual, desktop și mobil separat, pentru a ne asigura că obținem elementele exacte fără a rata nicio ocazie.

Nu există nicio opțiune de semnalizare – nu trebuie să faceți nimic pentru a-l activa. De îndată ce WP Rocket este actualizat la 3.17, va funcționa.

Cum poate îmbunătăți redarea leneșă interacțiunea cu următorul grad de vopsea

Să vedem acum cum WP Rocket 3.17 vă poate îmbunătăți nota INP.

În primul rând: conform Google, o bună capacitate de răspuns înseamnă că scorul tău INP ar trebui să fie sub 200 de milisecunde.

Înainte de a analiza rezultatele testelor pe care le-am efectuat, este, de asemenea, important să subliniem că îmbunătățirile de performanță pe care site-ul dvs. le poate obține depind de nivelul său actual de optimizare. Dacă site-ul dvs. este deja bine optimizat, este posibil să observați îmbunătățiri subtile în nota dvs. INP. Cu toate acestea, dacă există loc de îmbunătățire, ați putea experimenta o creștere mai dramatică a scorului INP și a notelor LCP și FCP.

Pentru a măsura îmbunătățirea performanței INP, vă recomandăm să utilizați un instrument precum INP Debugger de la DebugBear, care vă va oferi o imagine clară a capacității de răspuns a site-ului dvs. înainte și după activarea WP Rocket 3.17 și a funcției sale automate Lazy Rendering.

Dacă vă întrebați de ce de data aceasta nu vom folosi instrumentul PageSpeed ​​Insights, care se bazează pe Lighthouse, este pentru că INP este o metrică de câmp și este calculată pe baza interacțiunii. Și Lighthouse nu măsoară, cel puțin deocamdată.

Să ne uităm la un exemplu real pentru a vă arăta potențialele îmbunătățiri pe care le poate aduce WP Rocket 3.17. Am testat un site web de comerț electronic cu o mulțime de conținut de parcurs – mai multe secțiuni, imagini de produse și listări de articole. În scopuri de testare, am adăugat și o sarcină de lucru JavaScript pe site pentru a menține firul principal ocupat și pentru a verifica eficiența redării leneșe pentru a îmbunătăți situația.

Iată ce am găsit.

Înainte de a activa WP Rocket 3.17 cu redare automată lazy

Rezultatul INP este de 204 ms. După cum puteți vedea, rezultatul evidențiază nevoia de îmbunătățire:

Din punct de vedere mai tehnic, am analizat și redarea browserului în fila Chrome DevTool Performance. Captura de ecran evidențiază sarcinile lungi și timpul necesar pentru randare: 2610 ms.

După activarea WP Rocket 3.17 cu Redarea automată Leneșă

Rezultatul INP este acum de 146 ms. De data aceasta, nota INP este în verde.

De această dată, fila de performanță Chrome DevTool arată cum au fost optimizate sarcinile lungi, iar timpul de randare a fost redus la 2325 ms.

După cum puteți vedea, am testat exact aceeași pagină. Singura diferență este că al doilea are activată Redarea automată leneșă, iar primul nu.

Îmbunătățirea este substanțială. Am trecut de la o pagină cu un scor INP portocaliu – care necesita îmbunătățire – la una care arată un rezultat verde, care este recomandat pentru a asigura receptivitatea și pentru a oferi o experiență excelentă pentru utilizator.

Încheierea

Indiferent dacă gestionați un blog, un magazin online sau orice alt tip de site web bogat în conținut, WP Rocket 3.17 și caracteristica sa de randare leneșă pot îmbunătăți automat o valoare cheie precum INP.

Îmbunătățirea INP îmbunătățește capacitatea de răspuns a paginii și, prin urmare, experiența utilizatorului. Acest lucru vă poate ajuta să păstrați vizitatorii pe site-ul dvs. mai mult timp și să îi facă să convertească și să revină – și de aceea nu ar trebui să treceți cu vederea optimizarea acestuia.

De ce să nu vedeți singur cum poate fi îmbunătățită nota INP? Actualizați WP Rocket la versiunea 3.17 sau încercați. Ne-ar plăcea să aflăm cum funcționează noua versiune majoră pentru dvs. Spune-ne în comentarii despre experiența ta cu WP Rocket 3.17 și ce îmbunătățiri primești!