Cum se Îmbunătățește Speed Index (SI) pe WordPress

Cum se Îmbunătățește Speed Index (SI)

Știți câte secunde necesită încărcarea site-ului dvs. pe ecranul vizitatorului? Răspunsul îl indică Speed Index (SI), o valoare a performanței afectată de orice lucru care se ocupă la suprafața site-ului dvs.

Speed Index (SI) contribuie la scorul dvs. general de performanță în raportul Lighthouse. Menținerea unui index de viteză bun duce la o experiență excelentă pentru utilizator: înseamnă că conținutul situat în fereastra de vizualizare este livrat rapid.

Pentru a vă îmbunătăți scorul de performanță, există șase valori de optimizat, iar Speed Index deține 10% din acest nivel global calculat de Lighthouse.

Ce este un Speed Index bun? Cum se măsoară? Ce instrumente sunt cele mai fiabile? Poate fi copleșitor să derulați un audit de performanță pentru site-ul dvs. web!

Urmați ghidul nostru pas cu pas pentru a vă controla Speed Index KPI și pentru a efectua un proces eficient de optimizare a performanței. Vom explica metrica SI în detaliu, instrumentele gratuite pe care le puteți utiliza pentru a vă măsura performanța și câteva sfaturi tehnice pe care trebuie să le aplicați pentru a obține o notă SI bună (sub 3,4 s).

Ce este Speed Index în Lighthouse?

Speed Index este o valoare a performanței Lighthouse care arată cât de repede este încărcat și vizibil conținutul unei pagini pentru utilizator.

Speed Index indică timpul de încărcare a părții vizibile deasupra pliului unei pagini web (în fereastra de vizualizare). Măsoară întregul proces de încărcare a ceea ce văd utilizatorii înainte de derulare.

De fapt, Lighthouse face un videoclip cu procesul de încărcare și calculează diferența dintre toate cadrele. Apoi, Lighthouse folosește modulul Speedline Node.JS pentru a calcula scorul final al SI. (Puteți găsi mai multe informații despre acest modul pe Github).

Speed Index este rezultatul unui calcul: este viteza medie de redare a unei pagini web și progresul vizual al acesteia, numită și finalizare vizuală.

Este o metodă de laborator semnificativă pentru măsurarea timpului de încărcare care afectează direct modul în care utilizatorii percep performanța unui site web.

Să ilustrăm această finalizare vizuală cu două scenarii: pagina A este optimizată, în timp ce pagina B nu este:

Care este Impactul Speed Index Asupra Performanței?

Speed Index este o valoare a performanței de încărcare care arată cât de repede elementele unei pagini devin vizibile în fereastra de vizualizare. Cât de rapid pare site-ul dvs. vizitatorilor dvs.? Aceasta este exact întrebarea la care încercați să răspundeți atunci când măsurați performanța web!

SI este reprezentat pe imaginea de mai jos, aproape la sfârșitul procesului de finalizare vizuală:

Acum, să vedem cum se compară Speed Index cu celelalte 5 KPI-uri măsurate de Lighthouse.

Ponderea SI pe Scorul Lighthouse

În scorul de performanță Lighthouse v8, greutatea SI a fost redusă de la 15% la 10%.

Cum este Calculat Speed Index de Lighthouse?

Web.Dev explică faptul că scorul Speed Index este o „comparație a indicelui de viteză al paginii dvs. și a indicilor de viteză ai site-urilor web reale”.

Versiunea V8 Lighthouse calculează șase valori pentru a genera scorul final de performanță. Include Core Web Vitals, Total Time to Interactive, Total Blocking Time și în cele din urmă, Speed Index:

Speed Index este o valoare importantă de laborator, deoarece definește dacă pagina dvs. este percepută ca rapidă sau lentă.

Înainte de a vă oferi câteva recomandări tehnice pentru a vă îmbunătăți SI, dacă este necesar, ar trebui să stabilim care este un scor SI bun conform Lighthouse.

Și asta ne conduce în secțiunea următoare: pragul Speed Index.

Ce este un scor bun pentru Speed Index?

Un scor bun al Speed Index ar trebui să fie sub 3,4 secunde.

Speed Index vs First Contentful Paint

Dacă sunteți familiarizați cu actualizarea recentă a Core Web Vitals, valoarea Speed Index poate arăta similar cu KPI-ul First Contentful Paint (FCP). Permiteți-mi să vă explic diferența principală și de ce ambele valori sunt importante.

First Contentful Paint este o valoare vizuală care măsoară timpul până când browserul redă pentru prima dată orice conținut. Speed Index descrie rata la care conținutul complet apare deasupra pliantei.

Deci, orice ar accelera FCP-ul dvs. va îmbunătăți Speed Index (și este mai bine pentru un utilizator să vadă ceva în loc de ecranul alb.)

Speed Index vs Cumulative Layout Shift

Orice stabilizează conținutul deasupra pliantei și îmbunătățește interactivitatea va contribui la menținerea unui Speed Index bun. Pentru a măsura stabilitatea vizuală, Google folosește Cumulative Layout Shift (CLS) din semnalele Page Experience. CLS măsoară schimbările bruște de pe o pagină nedorite de un utilizator, cum ar fi ferestre pop-up sau reclame intruzive care distrug experiența utilizatorului:

Prin urmare, un scor CLS bun înseamnă o stabilitate vizuală bună și vă poate afecta SI pozitiv.

Menținerea unui SI bun este excelentă pentru performanță, dar și pentru marketing. Să vedem cum:

4 Avantaje de Marketing Pentru a Menține un Speed Index Bun

1.Reduceți rata de respingere

Ei bine, imaginați-vă că încercați să accesați un site web, dar în loc să vedeți imediat orice conținut, vă uitați la un ecran gol. Ce faci? Pleci, nu?

Acest scenariu (pe care vrem cu toții să-l evităm) este numit „un bounce”. Cineva vă vizitează site-ul web și pleacă imediat fără a interacționa mai departe cu site-ul dvs.

2.Măriți-vă KPI-ul „timp pentru a petrece pe pagină”

Dacă reduceți Speed Index, utilizatorii care vă vizitează site-ul vor fi dispuși să rămână mai mult pe site-ul dvs. și să viziteze mai multe pagini.

3.Creșteți ratele de conversie

Când un utilizator petrece timp pe site-ul dvs. datorită vitezei bune, aveți un alt avantaj: este mai probabil să cumpere. Le răspundeți nevoilor: găsiți răspunsul sau produsul dorit cât mai repede posibil.

4.Vă Sporiți SEO

Dacă vizitatorii dvs. se bucură de experiența de a fi pe site-ul dvs., Google îi va plăcea și lui și vă va recompensa cu o poziție mai bună în rezultatele motorului de căutare.

Cum se Măsoară Speed Index

Lighthouse este un instrument open-source care ajută dezvoltatorii să măsoare Speed Index și alte valori de performanță. Instrumentul automat creează rapoarte detaliate despre viteză, performanță, accesibilitate, UX și SEO.

Cu ce Instrumente se Măsoare Speed Index?

Pentru a măsura Speed Index și scorul dvs. de performanță generală, puteți utiliza Google PageSpeed Insights și GTmetrix, două instrumente populare alimentate de tehnologia Lighthouse.

• Utilizarea Google PageSpeed Insight (PSI) pentru a măsura valoarea SI:

• Folosind GTmetrix pentru a obține nota SI:

Ambele instrumente oferă un scor SI diferit, dar ambele se află în zona verde:

• Scorul SI (PSI): 0,8 s
• Scorul SI (GT Metrix): 1,1 s

Ce afectează Speed Index?

Cauzele unui scor SI ridicat pot fi identificate în secțiunea de diagnosticare din Google PageSpeed Insights. De obicei, avem patru probleme principale care contribuie la un scor scăzut al SI, și anume:

1. Cod JavaScript și JS neutilizat
2. Timp de executare JavaScript
3. Lucrarea firului principal
4. Cod terță parte

Datorită secțiunilor „oportunități” și „diagnostice” generate de Lighthouse, puteți găsi cum să vă îmbunătățiți SI și gradul de performanță.

Raportul determină impactul pe care fiecare eroare îl are asupra performanței dvs. Abordarea acestora va reduce drastic gradul dvs. de Speed Index și va crește experiența generală de utilizare a site-ului dvs. WordPress.

Scopul este direct: dorim ca vizitatorul să vadă conținutul de mai sus cât mai curând posibil.

Pentru a îmbunătăți Speed Index, am enumerat principalele recomandări din PSI:

• Eliminați resursele de blocare a redării
• Minimizați lucrul cu firul principal (reduceți sarcinile browserului)
• Reduceți timpul de execuție JavaScript
• Asigurați-vă că textul rămâne vizibil în timpul încărcării fontului web (utilizați corect fonturile personalizate)
• Eliminați JS neutilizat
• Reduceți impactul codului terț
• Evitați înlănțuirea cererilor critice
• Preîncărcați solicitările cheii
• Păstrați numărul de solicitări scăzut și dimensiunile de transfer mici
• Reduceți timpul de răspuns TTFB și server
• Asigurați-vă că utilizați imaginile din fișiere încărcate în formatul corect

Acum să vedem cum să le implementăm pe fiecare dintre ele.

Cum se Îmbunătățește Speed Index: 8 Sfaturi de Performanță

Există opt tehnici de performanță de urmat pentru a îmbunătăți Speed Index și viteza generală a site-ului dvs. WordPress, și anume:

1. Amânați JS
2. Întârziați JS și Eliminați JS Neutilizat
3. Minify JS și Minify CSS
4. Optimizați Livrarea CSS și Eliminați CSS Neutilizate
5. Optimizați Imaginile + Lazy Load
6. Utilizați Compresia Datelor
7. Folosiți un CDN
8. Preîncărcați și Optimizați Fonturile

Să le studiem pe fiecare dintre ele.

1.Amânați JS

Fișierele JS vor fi încărcate după ce browserul a afișat conținutul cel mai relevant. Acest proces permite browserului să încarce întregul conținut fără a aștepta încărcarea scripturilor.

Amânând fișierele JS, acordați prioritate și tipului de conținut pe care doriți să îl afișați mai întâi. În cazul nostru, ar trebui să ne concentrăm asupra oricărui lucru deasupra pliantei: toate JS neesențiale aflate sub pliant ar trebui amânate.

Probleme raportate de Lighthouse: „Eliminați resursele de blocare a redării”, „Eliminați JavaScript neutilizat” și „Evitați înlănțuirea cererilor critice”.

Amânarea JavaScript folosind plugin-uri populare:

• WP Rocket are opțiunea de a amâna fișierele JS WordPress așa cum se arată mai jos:

• Asset CleanUp – acest plugin gratuit scanează și detectează conținutul care trebuie încărcat în pagină cu prioritate. Pur și simplu selectați codul CSS sau JS care nu ar trebui redat mai întâi. Autorul pluginului recomandă utilizarea Asset CleanUp cu un plugin de cache precum WP Rocket pentru a obține cele mai bune rezultate de performanță.
• Speed Booster Pack – diferă fișierele JS după redarea întregului HTML.
• Async JS – vă oferă controlul asupra scripturilor pe care doriți să le adăugați un atribut de „amânare”.

Amânarea JavaScript folosind modul manual:

• Atributul de amânare: utilizați atributele booleene „defer” pentru eticheta de script în HTML și va amâna JS pe care doriți să îl vizați. Cu atributul de amânare în poziție, fișierul script este descărcat în paralel în timp ce documentul HTML este încă analizat. Lucrul bun este că scriptul nu este executat până când analiza HTML nu este completă.

<script src=”library.js” defer></script>

2.Întârziați JS și Eliminați JS Neutilizat

Întârzierea executării JS și eliminarea JS neutilizate vă permite să îmbunătățiți performanța și scorul dvs. SI. Fila Acoperire din Chrome DevTools vă poate ajuta să găsiți cod JavaScript neutilizat:

O altă modalitate de a efectua auditul și de a identifica JS care urmează să fie optimizat este utilizarea PSI sau GTmetrix:

Probleme raportate de Lighthouse: „Reduceți JS neutilizate” și „Evitați înlănțuirea cererilor critice”.

Soluții Manuale:

• Creați o întârziere în execuția JS cu funcția de metodă setTimeout (). Aceasta va apela o funcție după timpul specificat în ms. Puteți utiliza aceste fragmente de cod pentru a întârzia funcțiile JS la alegere.

Utilizați un plugin WordPress pentru a întârzia JS:

• Flying Scripts: un plugin pentru a întârzia JS și pentru a oferi mai multe resurse fișierelor JS critice. Ajută la prioritizarea conținutului JS care trebuie încărcat cu prioritate.
• WP Meteor: un plugin pentru a amâna scripturile JS și pentru a îmbunătăți foarte mult viteza percepută de vizitatori.
• Gonzales – permite dezactivarea condiționată a CSS și JS.
• Perfmatters – vă ajută să vă accelerați site-ul prin dezactivarea scripturilor care ar putea să nu fie utilizate.

• Plugin Organizer – modifică ordinea în care sunt încărcate pluginurile.
• Asset CleanUp – vă permite să selectați CSS/JS care nu sunt necesare pentru încărcare.
• Plugin WP Rocket – cea mai bună soluție. Cu pluginul WP Rocket, funcția Delay JS este utilizată pentru a reduce JS neutilizate. Puteți întârzia cu ușurință fișierele JS cu un singur clic:

3.Minimizează JS și CSS

Minimizarea este procesul de eliminare a tuturor caracterelor inutile din codul JavaScript fără a modifica funcționalitatea acestuia. Pe românește, reducerea codului înseamnă eliminarea oricăror punctuații și dezordine inutile, cum ar fi linii noi, comentarii, spații, punct și virgulă etc.

Reducerea va elibera timp pentru firul principal. Din nou, este vorba de a crea spațiu și timp pentru conținutul de mai sus.

Probleme identificate de Lighthouse: „Reduceți timpul de execuție JavaScript”, „Minimizați lucrarea firului principal”, „Minificați JS” și „Minificați CSS”.

Iată câteva opțiuni pentru dvs.

Reducerea manuală a codului:

• Utilizați un editor de text precum Sublime Text sau Visual Studio Code.
• Deschideți fișierul care conține codul dvs. și eliminați comentariile, spațiul alb, liniile noi și indentările.
• Scurtați numele ID-urilor, claselor sau variabilelor cât mai mult posibil și optimizați-vă afirmațiile condiționale.
• Salvați din nou fișierul.

Reducerea codului utilizând un instrument online:

• Accesați minifycode.com și deschideți fila la alegere: JS, CSS, HTML etc.
• Lipiți codul din fișierul dvs. în câmpul principal și faceți clic pe butonul Minify JS.

Cele mai bune instrumente de minimizare JS și CSS:

• Closure Compiler de la Google, o opțiune solidă pentru a lua în considerare faptul că analizează și analizează JavaScript, rescrie codul atunci când este necesar și minimizează JS după aceea.
• UglifyJs reduce, analizează și optimizează JavaScript.
• Autoptimize este o opțiune foarte populară pentru optimizarea CSS și JS.
• YUI Compressor Tool de la Yahoo este atât un instrument CSS cât și JavaScript de minimizare.
• WP Super Minify combină, minimizează și păstrează în cache fișiere JavaScript și CSS
• CSS Nano (preprocesor CSS)
• CSSO (preprocesor CSS)
• UNCSS (preprocesor CSS)
• WP Rocket vă permite să reduceți atât fișierele JS, cât și fișierele CSS în câteva clicuri, după cum se arată mai jos:

4.Optimizați Livrarea CSS și Reduceți CSS Neutilizate

WordPress este un ecosistem uriaș, iar majoritatea autorilor de teme oferă o mulțime de opțiuni de aspect și efecte de design, rezultând folosirea multor CSS. Ideea este că toți avem nevoie de CSS, deoarece codul este stilul conținutului nostru web. Pe de o parte, nu vrem un site web urât din anii 2000, dar în același timp, trebuie să asigurăm performanțe bune. Este vorba despre găsirea echilibrului perfect și optimizarea modului în care CSS este redat/livrat pe pagina dvs.

Fișierele CSS afectează timpul de încărcare al site-ului dvs. și ar trebui să abordați problema pentru a îmbunătăți performanța și scorul dvs. SI. Să vedem diferitele tactici pentru a optimiza livrarea CSS.

Probleme identificate de Lighthouse: „Minimizați activitatea firului principal”, „Reduceți CSS neutilizat”, „Eliminați CSS care blochează redarea”.

Soluții Manuale:

• Combinați, comprimați și introduceți scripturile CSS: înseamnă că paginile nu se încarcă cu fișiere CSS separate. În schimb, toate informațiile de stil necesare pentru o pagină sunt incluse cu pagina (și nu va fi încărcată nicio foaie de stil inutilă).
• Prioritizați regulile CSS: mai întâi trebuie încărcat conținutul de mai sus.
• Eliminați/reduceți CSS neutilizat manual parcurgând codul.

Plugin-uri WordPress pe care le puteți utiliza pentru a optimiza livrarea CSS:

• Autoptimize – pur și simplu activați caseta de selectare „Optimizați codul CSS” din tabloul de bord WordPress.
• Speed Up – Optimizați livrarea CSS – bine, este în nume!
• Pluginul de cache WP Rocket – vă ajută să vă optimizați livrarea CSS și să eliminați CSS neutilizate în câteva clicuri direct din fila Optimizare fișiere.

5.Optimizați Imaginile și Utilizați Caracteristica de Lazy Load

Trebuie să optimizați imaginile site-ului dvs. web, deoarece acestea sunt una dintre cele mai mari probleme, ca timp de încărcare. Din fericire, există câteva instrumente care vă ajută să le redimensionați și să le comprimați fără o pierdere perceptibilă a calității.

O altă modalitate de a vă optimiza imaginile este să implementați un Lazy Load asupra lor. Este un set de tehnici care amână încărcarea imaginilor pe o pagină mai târziu, atunci când aceste imagini trebuie să fie vizibile pentru utilizator.

Probleme identificate de Lighthouse:

• Dimensiunea corectă a imaginilor – redimensionați imaginile mari pentru a corecta dimensiunile.
• Codificați eficient imaginile – înseamnă că ar trebui să le comprimați.
• Serviți imagini în formate de ultimă generație – convertiți JPEG / PNG în WebP.
• Amânați imaginile de pe ecran – lazy load imaginile și imaginile de fundal.

Redimensionarea manuală a imaginilor cu aplicații și instrumente online:

• GIMP – gratuit pentru Windows și Mac.
• Preview for Mac – este gratuită și este deja instalată.
• Photoshop – poate fi copleșitor, dar este cel mai complet software de proiectare.
• BeFunky – un software de proiectare grafică bazat pe web.
• Picmonkey.com – editați și produceți conținut vizual, inclusiv sigle.
• Pixlr.com – editor foto gratuit și ușor de utilizat.
• Fotor.com – o platformă de creație vizuală all-in-one.
• Photopea – deschideți gratuit un fișier PSD (photoshop) direct din browser.

Comprimarea imaginilor cu instrumente online înainte de a le încărca pe site-ul dvs. WordPress:

• GIMP (opțiunea Scale imagine)
• Photoshop (opțiunea Salvare pentru web)
• JPEG Optimizer (opțiune de compresie de bază)
• Tiny PNG (opțiune de compresie inteligentă cu pierderi)
• JPEG.io (opțiune avansată de optimizare JPEG)

Optimizarea imaginilor cu un plugin WordPress (imagini existente și altele noi):

• Imagify – cel mai avansat instrument de optimizare a imaginilor dintr-un singur clic: obțineți imagini mai ușoare fără a pierde calitate, convertiți WebP și comprimați-le în bloc (caracteristică Bulk Optimize). Imagify poate optimiza toate formatele de imagine: jpg, png, pdf și gif. Imagify este gratuit pentru aproximativ 200 de imagini, apoi va trebui să treceți la versiunea premium.
• Imsanity – pune o limită de dimensiune de încărcare în biblioteca dvs. WordPress și redimensionează automat imaginile uriașe. De asemenea, comprimă imaginile JPG în procesul de redimensionare a acestora utilizând compresia standard WordPress. Cu toate acestea, ei încă recomandă utilizarea unui plugin mai orientat spre compresie, cum ar fi EWWW Image Optimizer sau Imagify.
• EWWW Image Optimizer -automatizează totul, iar imaginile sunt comprimate automat, scalate pentru a se potrivi paginii și convertite în formatul de generație următoare.

Aplicarea lazy load pe imagini utilizând un plugin WordPress:

• Lazy Load de WP Rocket – un ajutor gratuit pentru pluginuri dezvoltat de WP Rocket, care aplică scriptul de lazy load pe imagini. De asemenea, puteți înlocui iframe-urile Youtube cu o miniatură de previzualizare pentru a vă accelera site-ul.

• WP Rocket – pluginul de cache vine cu o funcție de lazy load pentru fotografii și videoclipuri, după cum puteți vedea în fila Media de mai jos:

6.Comprimarea Datelor

Compresia este procesul de reducere a dimensiunilor fișierelor site-ului dvs. web pentru a vă îmbunătăți scorul de performanță. Este simplu: pe măsură ce trimiteți fișiere mai ușoare către browser, timpul de redare va fi mai rapid.

Sintaxa HTML este repetitivă și folosește etichete precum <p>, <span>, <img>, <div>, prin urmare, poate fi util să folosiți o metodă numită „compresie GZIP” pentru comprimarea și decomprimarea codului.

Activarea compresiei GZIP utilizând un plugin WordPress:

• GZIP Compression Plugin vă oferă puterea de a activa și dezactiva compresia Gzip pe site-ul dvs. WordPress.
• WP Rocket activează funcția GZIP în fișierul .htaccess folosind modulul mod_deflate chiar la activarea pluginului. Încă o dată, puteți opta pentru soluția all-in-one în loc să instalați mai multe pluginuri.

7.Utilizați o rețea CDN (Content Delivery Network)

Un CDN vă permite să distribuiți fișierele de pe mai multe servere situate în diferite locuri din întreaga lume. Datorită acestui sistem, timpul de încărcare al site-ului dvs. este îmbunătățit, în special pentru vizitatorii internaționali.

Folosind un plugin WordPress pentru a vă activa CDN-ul:

• WP Rocket are două opțiuni:

1. Abonați-vă cu 7,99 USD / lună la RocketCDN. CDN este configurat automat cu restul caracteristicilor WP Rocket, ceea ce este foarte convenabil.
2. Integrați propriul CDN direct în tabloul de bord WordPress.

8.Preîncărcați și Optimizați Fonturile

Preîncărcarea fonturilor înseamnă că „cereți” browserului unui vizitator să încarce din timp fonturile importante și să întârzie toate cele secundare. Speed Index se bazează pe ceea ce se întâmplă deasupra pliantei, prin urmare, preîncărcarea fonturilor asigură afișarea corectă a conținutului vizibil pentru vizitatori.

Fonturile web personalizate pot provoca schimbări bruște de aspect, iar Google nu-i place cu adevărat acest lucru. De fapt, vizitatorii dvs. se pot confrunta cu două probleme principale:

• FOUT (stilul nu este aplicat, astfel încât fontul este neatractiv)
• FOIT (text invizibil și timp mare de așteptare pentru a vedea fontul pe ecran)

Pentru a menține o experiență bună a utilizatorului și a evita astfel de cazuri, vă recomandăm să preîncărcați fonturile web.

Problemă identificată de Lighthouse: „Preîncărcați solicitările cheii” și „Asigurați-vă că textul rămâne vizibil în timpul încărcării fontului web”.

Utilizarea unei soluții manuale pentru preîncărcarea fonturilor:

Puteți utiliza eticheta și atributele rel = ” preload” pentru a solicita browserului dvs. să pre-încarce fontul.

Exemplu de viață reală:

<link rel=”preload” as=”font” href=”/fonts/custom-font.woff” type=”font/woff2″ crossorigin=”anonymous”>

Unde se pune eticheta rel = ” preload”?

Între etichetele de head din HTML pentru fiecare script CSS și fișierele de font încărcate pe site.

Utilizarea unui plugin WordPress pentru a preîncărca fonturile:

• Folosiți WP Rocket pentru a preîncărca fonturile. Accesați „fila Preîncărcare”, derulați la „Preîncărcați fonturile” și pur și simplu specificați adresele URL ale fișierelor de fonturi pe care doriți să le preîncărcați:

Cum se Mărește Speed Index cu WP Rocket: Rezultate Înainte și După

Vă puteți reduce Speed Index utilizând WP Rocket, cel mai bun plugin de cache pentru WordPress.

Într-adevăr, orice se îndreaptă spre optimizarea fișierelor JS / CSS și preîncărcarea fontului va îmbunătăți cel mai probabil SI. Vești bune: fiecare caracteristică a WP Rocket a fost concepută pentru performanța web!

Nu trebuie să-i credeți doar pe cuvânt. Haideți să vă arăt cum funcționează un site web înainte și după utilizarea WP Rocket.

Analiza Impactului WP Rocket Asupra Scorului Speed Index

Au efectuat un audit de performanță pentru un furnizor de servicii de catering din Franța numit „Le point Gourmand …” folosind instrumentul Google PageSpeed Insights. Să aruncăm o privire asupra constatărilor lor.

Grad de performanță PSI înainte de activarea WP Rocket	Grad de performanță PSI cu WP Rocket Activat

Scorul Lighthouse înainte de WP Rocket: 51/100

• În portocaliu: TTI a fost de 7,0 s, TBT a fost de 480 ms
• În roșu: Speed Index a fost de 6,0 s și LCP de 7,1 s

Scorul Lighthouse la activarea WP Rocket: 95/100

• În Verde: TTI, FCP, TBT, CLS și … Speed Index!

Site-ul nu era într-o formă foarte bună înainte de a activa WP Rocket și multe probleme au fost identificate de PSI:

Activarea Caracteristicilor WP Rocket Performance

După activarea WP Rocket, au activat câteva opțiuni și au urmat lista tehnicilor de optimizare recomandate în secțiunea anterioară.

Mai jos sunt toate opțiunile WP Rocket care erau în zona verde:

• Optimizarea fișierelor JS (Încărcați JS amânat, întârziați executarea JS și eliminați JS neutilizat)

• Minimizarea, combinarea fișierelor CSS și optimizarea livrării CSS:

• Eliminarea/Reducerea CSS neutilizate:

Înainte de a utiliza WP Rocket	După optimizarea fișierelor mele cu WP Rocket
Au fost identificate două oportunități: „Reduceți CSS neutilizate” și „Reduceți problemele JS”.	„Reduceți CSS neutilizate” și „Reduceți problemele JS” sunt acum în secțiunea de audit trecută.

• Compresia imaginii. Au folosit setarea „agresivă” Imagify pentru al doilea audit:

• Preîncărcarea fonturilor:

Concluzie

Optimizarea valorii Speed Index vă poate ajuta vizitatorii să perceapă o îmbunătățire vizibilă a vitezei cu care conținutul dvs. apare deasupra paginii.

SI indică completitudinea vizuală a paginii, dar nu indică dacă conținutul este critic sau non-critic pentru utilizator. Prin urmare, nu este un înlocuitor pentru celelalte valori ale Lighthouse.

Cel mai convenabil mod de a reduce scorul Speed Index este instalarea WP Rocket, care aplică 80% din cele mai bune practici de performanță web după activare.

Un alt avantaj este că KPI-ul fiecărui Lighthouse poate fi optimizat datorită gamei largi de caracteristici oferite de WP Rocket. Nu trebuie să vă supra-încărcați site-ul WordPress cu mai multe pluginuri de performanță, WP Rocket este suficient pentru a vă apropia de zona verde a Google PageSpeed Insights.

Puteți oricând să vă bazați pe garanția lor de rambursare de 100% în termen de 14 zile de la achiziție, dacă credeți că WP Rocket nu a fost util pentru dvs.

Creșteți-vă viteza și performanța percepută de utilizator chiar acum!

Recomandarea autorului:

• Google Page Experience Actualizare 2021 – Cum Să Vă Pregătiți Site-ul WordPress
• Cum să Testați Timpul de Răspuns al Serverului DNS
• Cum să Îmbunătățiți Time to Interactive (TTI) pe WordPress
• 10 Moduri Să Îmbunătăți First Contentful Paint (FCP) în WordPress