Cum să ajungeți la 100 în Google PageSpeed ​​Insights (pe WordPress)

Nu ar fi grozav dacă ar exista un instrument care să vă ajute să vă faceți site-ul mai rapid? Ei bine, există! Google PageSpeed ​​Insights este numele și este un serviciu gratuit care este la îndemână pentru a vă rezolva problemele lente ale site-ului. În acest articol ne vom uita la ce este, cum funcționează și cum puteți ajunge la scorul evaziv Google PageSpeed ​​Insights 100 / 100 în WordPress.

Ce este Google PageSpeed ​​Insights?

Google PageSpeed ​​Insights este un instrument online pentru măsurarea vitezei și a experienței utilizatorului site-ului dvs. Măsoară timpul de încărcare a unui site pe desktop și mobil și afișează diferite valori despre performanța unui site. Dacă valorile sunt considerate a fi suboptime, instrumentul oferă sugestii despre cum să le îmbunătățească.

Pur și simplu accesați Google PageSpeed ​​Insights, introduceți o adresă URL și apăsați pe Analiză. Google vă judecă site-ul atât pe mobil, cât și pe desktop. S-ar putea să descoperi că ai un scor mai bun la unul decât celălalt.

Google obișnuia să acorde un scor general din 100 pentru o pagină web, dar nu mai oferă.

În schimb, Google măsoară trei statistici pe care le numește Core Web Vitals . Acestea sunt:

• Cea mai mare vopsea de conținut (LCP) : cât de repede se încarcă conținutul principal al site-ului. Acest lucru ar trebui să fie de 2,5 secunde sau mai puțin pentru o experiență bună de utilizator.
• First Input Delay (FID) : cât de receptiv este site-ul la intrarea utilizatorului. FID ar trebui să fie de 100 de milisecunde sau mai puțin.
• Cumulative Layout Shift (CLS) : măsoară stabilitatea vizuală a unei pagini web. Un scor CLS de 0,1 sau mai puțin este de preferat.

În plus, Google măsoară următoarele:

• First Contentful Paint (FCP) : timpul necesar pentru ca pagina web să înceapă redarea pe ecran. Un scor bun FCP este de 1,8 secunde sau mai puțin.
• Interacțiune cu Next Paint (INP) : măsoară cât de receptivă este pagina la interacțiunile utilizatorului. Un site web cu adevărat receptiv are un INP de 200 de milisecunde sau mai puțin.
• Time to First Byte (TTFB) : timpul necesar pentru ca primul octet de date să fie trimis după o solicitare de server. Un TTFB de 0,8 secunde sau mai puțin este ideal.

Mai jos, în secțiunea Diagnosticați problemele de performanță, Google PageSpeed ​​Insights vă oferă patru scoruri – Performanță, Accesibilitate, Cele mai bune practici și SEO. 90 sau mai mult este un scor bun, 50 până la 89 indică o îmbunătățire, iar orice sub 50 este rău.

Mai jos sunt Oportunitățile și Diagnosticarea Google. Acestea sunt modalități prin care vă puteți îmbunătăți indirect scorul de performanță. Valoarea Performanței are cea mai mare influență asupra vitezei site-ului dvs.

Înainte de a înțelege cum să îmbunătățim performanța site-ului dvs., să vedem de ce este importantă viteza site-ului.

De ce este importantă viteza site-ului?

Viteza site-ului are un impact enorm asupra comportamentului utilizatorilor și consumatorilor.

Timpul mediu necesar pentru a încărca complet o pagină de destinație mobilă este de 22 de secunde [1] .

Probabilitatea de respingere crește cu 32% pe măsură ce timpul de încărcare a paginii trece de la 1 secundă la 3 secunde [2] .

53% din vizite sunt abandonate dacă un site mobil durează mai mult de 3 secunde să se încarce [3] .

Evident, dacă rulați un site de comerț electronic, un site lent are ca rezultat scăderea conversiilor și asta este ceva pe care veți dori să vă adresați. Rata de conversie scade odată cu timpul necesar pentru încărcarea unui site [4] :

• Paginile care s-au încărcat în 2,4 secunde au avut o rată de conversie de 1,9%.
• La 3,3 secunde, rata de conversie a fost de 1,5%
• La 4,2 secunde, rata de conversie a fost mai mică de 1%
• La 5,7+ secunde, rata de conversie a fost de 0,6%

Scor înalt PageSpeed ​​Insights față de viteza reală a paginii

Google calculează scorul PageSpeed ​​Insights atât din datele de laborator (colectate în condiții controlate), cât și din datele de teren (colectate de la utilizatori reali în sălbăticie).

Pentru a testa viteza reală a paginii, puteți utiliza instrumente online precum GTmetrix sau testul de viteză Pingdom.

Folosind aceste instrumente, vă puteți testa site-ul în diferite locații.

Puteți vedea pe GTmetrix că timpul de încărcare a paginii pentru un server de testare din San Antonio, Texas este de 666 ms – un scor foarte bun.

În Hong Kong, timpul de încărcare a paginii este puțin mai lung – 1,4 secunde.

Pingdom arată, de asemenea, un timp de încărcare rapid de 850 ms pentru un test la Washington DC, dar un timp de încărcare mai lent de 1,06 s în Tokyo, Japonia.

Instrumentul Uptrends vă permite să testați pe dispozitive mobile și desktop. Iată rezultatul pentru site-ul WP Shout din Paris, Franța pe iPad Air – un timp de încărcare de 1,9 secunde:

Deci, pare să existe o corelație între scorul Google PageSpeed ​​Insights și viteza reală a paginii.

Cum să obțineți scorul ideal Google PageSpeed ​​Insights 100 pe WordPress

Acum știți de ce este important un scor Google PageSpeed ​​Insights ridicat, este timpul să căutați modalități în care îl puteți îmbunătăți.

Modalități de îmbunătățire a scorului Google PageSpeed ​​Insights

1. Optimizați imaginile

Optimizarea imaginilor pentru Web este o modalitate simplă de a vă îmbunătăți scorul de performanță.

Veți avea nevoie de un plugin de compresie a imaginii, cum ar fi Optimole.

Acest plugin vă poate comprima imaginile la o dimensiune mai mică a fișierului, astfel încât să fie mai rapid de încărcat. Le puteți folosi pentru toate încărcările de imagini noi, precum și pentru cele existente. Ceea ce este grozav la Optimole este că vă va livra și imaginile printr-un CDN, ceea ce face o livrare și mai rapidă.

De asemenea, vă poate converti imaginile în format WebP, care are o dimensiune mai mică decât fișierele JPG sau PNG. Acest lucru vă va ajuta să transmiteți recomandarea Servire imagini în formatele de nouă generație . În plus, puteți redimensiona orice imagini mai mari pe care le aveți setând o lățime maximă pentru acestea.

Asigurați-vă că imaginile dvs. au atributele de lățime și înălțime specificate pentru a satisface că elementele Imagine nu au oportunități explicite de lățime și înălțime .

Pluginul Optimole include, de asemenea, încărcare leneră, care încarcă imagini sau videoclipuri doar atunci când un utilizator derulează în jos la ele. Acest lucru vă ajută cu oportunitatea Amânare imagini în afara ecranului , prezentată mai jos.

O altă metodă de a reduce dimensiunea fișierului imagine este utilizarea imaginilor SVG. SVG-urile sunt fișiere vectoriale, astfel încât acestea pot fi redimensionate cu ușurință fără a afecta dimensiunea fișierului lor. Ele nu sunt acceptate nativ în WordPress, dar le puteți adăuga la Biblioteca dvs. media cu un plugin precum SVG Support sau Safe SVG.

2. Evitați o dimensiune DOM excesivă

Ce este DOM-ul? DOM înseamnă Document Object Model și este o structură arborescentă cu toate elementele HTML, atributele și textul paginii incluse.

Câteva strategii pentru a reduce dimensiunea DOM sunt împărțirea paginilor web lungi în secțiuni mai mici și evitarea ascunderii nodurilor DOM cu declarația {display:none;} în CSS.

Un factor care poate crește dimensiunea DOM este utilizarea unui generator de pagini. Creatorii de pagini tind să mărească numărul de elemente <div> pe o pagină.

Dacă utilizați Elementor, de la versiunea 3.0 au fost eliminate unele wrapper-uri HTML, ceea ce a redus dimensiunea DOM.

Sau puteți trece la utilizarea Gutenberg în loc de un generator de pagini, așa cum a făcut Chris Lema.

Puteți găsi mai multe sfaturi despre evitarea unei dimensiuni DOM excesive în această postare.

3. Optimizați JavaScript și CSS

Fișierele CSS și JS pot fi reduse și comprimate pentru a îmbunătăți performanța. Minificarea elimină toate spațiile dintr-un fișier CSS sau JS, în timp ce compresia GZIP elimină caracterele repetate precum {.

Pluginurile WordPress care vă permit să minimizați CSS sau JS includ Autoptimize (gratuit) și WP Rocket (plătit).

Minificarea poate distruge site-ul dvs., astfel încât pluginurile care reduc au o opțiune de excludere a fișierelor de la minificare dacă aveți o problemă.

WP Rocket are, de asemenea, opțiunea de a combina fișierele dvs. CSS și JS într-un singur fișier, reducând cererile. Totuși, nu veți dori să faceți acest lucru dacă serverul dvs. web folosește HTTP/2. Puteți testa dacă serverul dvs. rulează HTTP/2 pentru a verifica mai întâi.

Puteți activa compresia GZIP cu majoritatea pluginurilor de cache. Dacă serverul dvs. web este Apache sau LiteSpeed, pluginul poate scrie direct în fișierul dvs. .htaccess sau poate furniza linii pentru a copia și a lipi în el. Dacă utilizați NGINX sau IIS, Hummingbird oferă și configurația pentru a activa compresia pe aceste servere.

Dacă pe site-ul dvs. există vreun CSS sau JS care nu este utilizat, este timpul să îl eliminați. Puteți folosi Chrome DevTools pentru a găsi CSS și JS neutilizate, care provin cel mai probabil dintr-un plugin.

De asemenea, puteți utiliza CSS Saver de la Rapidload pentru a vedea ce CSS puteți pierde de pe site-ul dvs.:

4. Eliminați resursele care blochează redarea

CSS și JS care blochează randarea sunt fișiere care sunt semnalate ca blocând prima vopsea a paginii dvs. web.

Pluginul Autoptimize poate remedia această problemă și, ca rezultat, vă poate îmbunătăți scorurile First Contentful Paint și cele mai mari scoruri Contentful Paint.

5. Reduceți timpul de răspuns inițial al serverului

Timpul de răspuns al serverului depinde de câțiva factori: tema și pluginurile pe care le utilizați și tipul de găzduire web pe care îl aveți.

Luați în considerare eliminarea oricăror pluginuri în exces pe care nu le utilizați sau trecerea la o temă ușoară, cum ar fi Astra.

Pentru găzduire, vă recomandăm găzduirea WordPress gestionată în locul găzduirii web partajate. Gazdele WordPress gestionate includ optimizarea serverului ca parte a serviciului.

6. Asigurați-vă că textul rămâne vizibil în timpul încărcării fontului web Asigurați-vă că textul rămâne vizibil în timpul încărcării fontului web

Dacă utilizați fonturi web, recomandarea Google va împiedica textul paginilor dvs. să fie invizibil în timp ce acestea se încarcă.

Recomandarea sugerează adăugarea font-display: swap; la declarația ta @font-face din foaia de stil.

Captura de ecran de mai jos arată cum să adăugați această proprietate folosind pluginul Asset CleanUp.

7. Mențineți numărul de solicitări scăzut și dimensiunile de transfer mici

Google PageSpeed ​​Insights înregistrează numărul de fișiere solicitate de serverul web și dimensiunea acestor fișiere.

Dacă aveți numere mari aici, le puteți reduce prin:

• Optimizarea imaginilor și fișierelor media. Este recomandat să utilizați fișiere video în locul GIF-urilor animate.
• Optimizarea CSS și JS
• Optimizarea fonturilor și a scripturilor de la terți
• Reducerea dimensiunii fișierului HTML

8. Evitați înlănțuirea cererilor critice

Solicitările critice sunt solicitări esențiale pentru încărcarea paginii. De exemplu, un logo ar putea fi o solicitare critică.

Lanțurile lungi și lanțurile care conțin descărcări mari sunt considerate dăunătoare pentru viteza site-ului dvs. Acestea au un impact asupra Primei vopsea plină de conținut și a celei mai mari vopsea a conținutului.

Potrivit Google, pentru a evita înlănțuirea solicitărilor critice, ar trebui să:

• Minimizați numărul de resurse critice: eliminați-le, amânați descărcarea lor, marcați-le ca asincrone și așa mai departe.
• Optimizați numărul de octeți critici pentru a reduce timpul de descărcare (număr de călătorii dus-întors).
• Optimizați ordinea în care sunt încărcate resursele critice rămase: descărcați toate activele critice cât mai curând posibil pentru a scurta lungimea căii critice.

Puteți face acest lucru prin:

• Preîncărcarea solicitărilor cheie, imaginilor și fonturilor utilizând „link rel="preload” în codul HTML care le face referire.
• Minimizarea CSS și JavaScript.
• Eliminați resursele care blochează redarea.

Puteți utiliza un plugin precum WP Rocket pentru a efectua aceste sarcini pentru dvs.

9. Evitați sarcinile lungi cu firul principal și minimizați lucrul cu firul principal

Sarcinile de fir principal lung sunt sarcini JavaScript (peste 50 ms) care întârzie timpul de interacțiune pentru utilizator.

Reducerea la minimum a lucrării principale-thread înseamnă scăderea timpului de analiză, compilare și execuție JS.

Puteți reduce durata și timpul sarcinilor JavaScript prin:

• minimizând utilizarea pluginurilor umflate
• găzduiește fonturile și scripturile de analiză la nivel local
• minimizarea sau amânarea JS și CSS
• încărcare leneșă a imaginilor de fundal

Consultați articolul următor pentru mai multe sfaturi despre minimizarea lucrării cu firul principal în WordPress.

10. Evitați schimbările mari de aspect. Evitați schimbările mari de aspect

Schimbările aspectului contribuie la valoarea Cumulative Layout Shift și dau impresia utilizatorilor că pagina sărită.

Puteți vindeca această problemă prin:

• Adăugarea dimensiunilor media dvs
• Preîncărcarea fonturilor dvs
• Optimizarea conținutului dvs. dinamic, de exemplu, formularele de înscriere la buletine informative

Pentru mai multe informații, citiți acest ghid despre remedierea schimbării cumulative a aspectului în WordPress.

11. Reduceți impactul codului terță parte

Scripturile terță parte sunt cele găzduite în altă parte, cum ar fi urmărirea Google Analytics sau încorporarea YouTube.

Acolo unde este posibil, încercați să găzduiți scripturi local. Nu puteți face acest lucru cu YouTube, dar vă puteți găzdui codul și fonturile de analiză local.

Puteți utiliza pluginul Local Google Fonts pentru a găzdui Google Fonts pe propriul dvs. server.

Pluginul Google Analytics local pentru WordPress – memorează în cache solicitările externe vă va găzdui Google Analytics local.

12. Folosiți un CDN

O rețea de livrare de conținut este o rețea la distanță de servere care stochează și servesc conținut web utilizatorilor.

Un CDN poate îmbunătăți viteza site-ului dvs. prin memorarea în cache a fișierelor statice (de exemplu, HTML, CSS și JavaScript) și difuzându-le dintr-o locație din apropierea unui utilizator. Acest lucru vă ajută să reduceți scorurile pentru Prima vopsea satisfăcătoare și Cel mai mare punctaj pentru Vopsea satisfăcută.

Folosim Cloudflare CDN la WP Shout. Puteți începe gratuit.

Aflați mai multe despre de ce ar trebui să utilizați un CDN și despre cele mai bune opțiuni.

Concluzie despre cum să ajungeți la scorul Google PageSpeed ​​Insights 100

Am văzut că există o mulțime de factori care determină viteza site-ului. Aceste sfaturi vă vor ajuta să obțineți un scor perfect.

Totuși, nu ar trebui să fii prea obosit să obții 100 – un scor de 90+ este încă foarte bun. Citiți postarea lui David despre optimizarea performanței site-ului pentru a vedea ce am făcut pentru a ne îmbunătăți scorurile.