Google PageSpeed Insights  este, fără îndoială, un instrument util pentru webmasteri, dezvoltatori și proprietari de site-uri de toate tipurile. Cu toate acestea, am observat că mulți oameni petrec ore întregi concentrându-se pe optimizarea site-urilor lor, pentru a încerca să obțină un scor de 100/100 la acest test.

Adevărul este că nu acesta este modul în care Google PageSpeed Insights ar trebui utilizat și nici nu este o activitate care merită. Atunci când te concentrezi pe implementarea recomandărilor platformei în loc să te concentrezi pe numărul din partea de sus a paginii, vei crea mult mai multe beneficii pentru site-ul tău.

Această postare este un ghid complet pentru utilizarea Google PageSpeed Insights în avantajul tău. Vom acoperi modul în care Google folosește scorul tău, precum și cum să integrezi recomandările pe care le primești.

Să începem!

Ce este PageSpeed Insights de la Google?

Google PageSpeed Insights este un instrument folosit pentru testarea performanței site-urilor web. Puteți introduce orice adresă URL și o puteți analiza.

Google oferă apoi un scor general din 100 pentru site-ul web testat, bazat pe câteva practici recomandate de optimizare a performanței.

Împreună cu acest rezultat, veți vedea și câteva recomandări de la Google despre cum să vă îmbunătățiți performanța (și, prin urmare, și scorul PageSpeed Insights).

Începând cu 2018, scorurile PageSpeed Insights sunt calculate prin intermediul Lighthouse , instrumentul automat, open source, al Google pentru îmbunătățirea calității generale a paginilor web. Această platformă poate evalua tot felul de factori, inclusiv performanța, accesibilitatea, aplicațiile web progresive și multe altele.

Pentru a vedea evaluarea completă a site-ului dvs. realizată de Lighthouse, puteți utiliza instrumentul Measure de la Google :

Pe lângă efectuarea unui audit de performanță similar cu cel derulat de Google PageSpeed Insights, veți obține scoruri pentru accesibilitate, cele mai bune practici și optimizare pentru motoarele de căutare (SEO) .

Adevărul despre scorul 100/100 în Google PageSpeed Insights

Așa cum am menționat la începutul acestei postări, vedem mulți proprietari și dezvoltatori de site-uri care devin obsedați de obținerea unui scor PageSpeed Insights perfect. Din păcate, acești oameni tind să treacă cu vederea aspectul mai important al rezultatelor testului: recomandările.

Deși ar trebui să te străduiești să îmbunătățești cât mai mult timpii de încărcare ai site-ului tău web, obținerea unui scor de 100/100 în Google PageSpeed Insights nu este chiar atât de importantă . Pentru început, nici măcar nu este testul suprem pentru performanță.

Spre deosebire de PageSpeed Insights, Pingdom Tools  vă permite să testați performanța site-ului dvs. din diverse locații:

De asemenea, puteți rula teste pe platforme precum GTmetrix  (care combină scorurile dvs. din PageSpeed Insights și YSlow ) și WebPageTest . Probabil că scorurile dvs. la aceste instrumente diferite nu se vor potrivi exact, ceea ce vă arată cât de arbitrare pot fi aceste numere.

Ceea ce contează cu adevărat este viteza reală a site-ului dvs. web . Ca să punem lucrurile în perspectivă, am văzut site-uri cu timpi medii de încărcare sub 500 de milisecunde (ceea ce este extrem de rapid!) care nu au un scor 100/100 pe PageSpeed Insights.

Celălalt factor care ar trebui să influențeze abordarea ta privind optimizarea vitezei este performanța percepută  a site-ului tău. Vizitatorilor tăi nu le pasă care este scorul tău Google PageSpeed Insights. Ei vor doar să poată vizualiza conținutul tău cât mai repede posibil.

Adevăratul scop al testării performanței site-ului dvs. cu Google PageSpeed Insights nu este de a obține un scor mare. Ci de a identifica punctele problematice de pe site, astfel încât să le puteți optimiza și să reduceți atât timpul de încărcare real, cât și pe cel perceput.

Cum folosește Google PageSpeed Insights?

Pe lângă influențarea experienței utilizatorului (UX) a site-ului dvs., performanța joacă și un rol în SEO . Având în vedere că PageSpeed Insights este administrat de cel mai mare și mai popular motor de căutare din lume, este logic ca scorul dvs. să aibă un anumit efect asupra clasamentului dvs. în pagina cu rezultate a motorului de căutare (SERP) (cel puțin pe Google).

Realitatea este că Google folosește  PageSpeed Insights pentru a determina clasamentele – într-un fel. Viteza site-ului este un factor de clasare, pur și simplu. Scorul testului de performanță vă poate oferi o idee destul de bună despre poziția dumneavoastră în acest sens.

Totuși, Google ia în considerare mai mult decât numărul din cercul din partea de sus a rezultatelor PageSpeed. Obținerea unui scor de 100/100 nu vă garantează un loc de frunte în SERP-uri.

Acestea fiind spuse, puteți folosi în continuare rezultatele PageSpeed Insights atunci când vă îmbunătățiți SEO-ul. De exemplu, din 2018, viteza paginilor mobile a fost un factor de clasare  pentru Google. Veți observa că testul de performanță oferă date atât pentru versiunea desktop, cât și pentru cea mobilă a site-ului dvs.:

Întrucât peste 73% dintre utilizatorii de internet mobil  susțin că au întâlnit un site care se încarcă prea mult, informațiile din fila Google PageSpeed Insights Mobile  sunt neprețuite. Utilizarea recomandărilor de aici pentru a reduce timpii de încărcare  pe smartphone-uri și alte dispozitive ar trebui să vă ofere un avantaj competitiv.

Recomandări Google PageSpeed Insights (24 de modalități de a îmbunătăți performanța)

Am vorbit mult despre recomandările Google PageSpeed Insights în această postare. Acestea reprezintă esența rezultatelor testelor de performanță și sunt mult mai valoroase decât scorul real. De aceea, le-am dedicat restul acestei postări.

Înainte de a analiza sugestiile individuale, trebuie să înțelegeți diferența dintre datele de teren  și datele de laborator . Primele compară site-ul dvs. cu altele din Raportul privind experiența utilizatorului Chrome pentru ultimele 30 de zile.

Există, de asemenea, două grafice care arată unde se situează mediile First Contentful Paint (FCP)  și First Input Delay (FID)  :

În imaginea de mai sus, FCP-ul site-ului nostru este aproximativ același cu 45% dintre site-urile din percentila 75, iar FID-ul nostru este aproximativ același cu 9% din percentila 95.

Datele de laborator  afișează date specifice pentru o încărcare simulată a paginii:

Vei observa că datele noastre de teren  și datele de laborator  nu se potrivesc exact . Este perfect normal. Datele de laborator  sunt create în condiții fixe, în timp ce datele de teren  utilizează viteze de încărcare reale colectate în timp.

Privite împreună, datele de teren  și datele de laborator  ar trebui să vă ofere o idee despre timpii reali de încărcare ai site-ului dvs. După cum am menționat anterior, acest lucru este chiar mai important decât scorul general PageSpeed, așa că va trebui să acordați atenție acestor numere.

După ce ați luat în considerare aceste informații, este timpul să începeți să îmbunătățiți performanța site-ului dvs. cu recomandările Google PageSpeed.

1. Eliminați resursele care blochează randarea

Una dintre cele mai frecvente recomandări din Google PageSpeed Insights este eliminarea resurselor care blochează randarea :

Aceasta se referă la scripturile JavaScript și CSS care împiedică încărcarea rapidă a paginii. Browserul vizitatorului trebuie să descarce și să proceseze aceste fișiere înainte de a putea afișa restul paginii, așa că prezența prea multor fișiere „deasupra liniei de pliere” poate afecta negativ viteza site-ului.

Puteți afla mai multe despre această problemă în ghidul nostru pentru eliminarea scripturilor care blochează randarea . Din punctul de vedere al Google, există două soluții pe care ar trebui să le luați în considerare:

• Dacă nu aveți mult JavaScript sau CSS , le puteți include în linie pentru a scăpa de acest avertisment. Acest proces se referă la încorporarea JavaScript-ului și/sau CSS-ului în fișierul HTML. Puteți face acest lucru cu un plugin precum Autoptimize . Totuși, acest lucru este valabil doar pentru site-urile foarte mici. Majoritatea site-urilor WordPress au suficient JavaScript încât această metodă ar putea să vă încetinească.
• Cealaltă opțiune este să amânați codul JavaScript . Acest atribut descarcă fișierul JavaScript în timpul analizării HTML, dar îl execută numai după finalizarea analizării. De asemenea, scripturile cu acest atribut se execută în ordinea apariției pe pagină.

Veți găsi o listă cu resursele cele mai afectate de această problemă sub recomandare, în rezultatele PageSpeed.

Urmăriți acest videoclip pentru a afla mai multe despre cum să eliminați resursele care blochează randarea:

2. Evitați înlănțuirea solicitărilor critice

Conceptul de înlănțuire a cererilor critice  are legătură cu Calea Critică de Randare (CRP) și cu modul în care browserele încarcă paginile. Anumite elemente – cum ar fi JavaScript și CSS despre care am discutat mai sus – trebuie încărcate complet înainte ca pagina să devină vizibilă.

Ca parte a acestei sugestii, Google PageSpeed Insights vă va afișa lanțurile de solicitări de pe pagina pe care o analizați:

Această diagramă vă va arăta seria de cereri dependente care trebuie îndeplinite înainte ca pagina dvs. să devină vizibilă. De asemenea, vă va indica dimensiunea fiecărei resurse. În mod ideal, doriți să minimizați numărul de cereri dependente, precum și dimensiunile acestora.

Mai multe metode pentru atingerea acestor obiective sunt acoperite de alte recomandări discutate în această postare, inclusiv:

• Eliminarea resurselor care blochează randarea
• Amânarea imaginilor în afara ecranului
• Minimizarea JavaScript și CSS

În plus, puteți optimiza ordinea în care se încarcă resursele, pentru a scurta CRP-ul. Aceasta înseamnă mutarea conținutului din partea de sus a paginii în partea de sus a fișierului HTML. Puteți afla mai multe despre optimizarea CRP-ului în articolul nostru „ Cum să optimizați calea critică de randare în WordPress ”.

Este important de reținut că nu există un număr magic de lanțuri de solicitări critice la care trebuie să te bazezi. Google PageSpeed Insights nu consideră acest audit ca fiind „reușit” sau „eșuat”, spre deosebire de multe dintre celelalte recomandări ale sale. Aceste informații sunt puse la dispoziție pur și simplu pentru a te ajuta să îmbunătățești timpii de încărcare.

3. Mențineți un număr mic de solicitări și dimensiuni mici ale transferurilor

Cu cât browserele trebuie să facă mai multe solicitări pentru a încărca paginile și cu cât serverul returnează mai multe resurse ca răspuns, cu atât mai mult durează încărcarea site-ului web. Prin urmare, este logic ca Google să recomande să minimizați numărul de solicitări necesare și să reduceți dimensiunea resurselor.

La fel ca recomandarea „Evitați înlănțuirea cererilor critice”  , aceasta nu are ca rezultat un rezultat „acceptat” sau „eșuat”. În schimb, veți vedea pur și simplu o listă cu numărul de cereri efectuate și dimensiunile acestora:

Nu există un număr ideal de solicitări sau dimensiuni maxime de care să țineți cont. În schimb, Google vă recomandă să vă stabiliți aceste standarde prin crearea unui buget de performanță. Acesta este un set de obiective definite care pot fi legate de aspecte precum:

• Dimensiuni maxime ale imaginilor
• Numărul de fonturi web utilizate
• Câte resurse externe apelați
• Dimensiunea scripturilor și framework-urilor

Crearea unui buget de performanță vă oferă un set de standarde față de care vă asumați responsabilitatea. Când depășiți bugetul, puteți lua decizii cu privire la eliminarea sau optimizarea resurselor pentru a respecta liniile directoare predeterminate. Puteți afla mai multe despre crearea unuia  în ghidul propriu de la Google.

4. Minimizarea CSS-ului

Fișierele CSS sunt adesea mai mari decât ar trebui, pentru a fi mai ușor de citit de către oameni. Acestea pot include diverse retururi de car și spații care nu sunt necesare pentru ca computerele să le înțeleagă conținutul.

Minimizarea CSS este procesul de condensare a fișierelor prin eliminarea caracterelor, spațiilor și duplicatelor inutile. Google recomandă această practică deoarece reduce dimensiunile fișierelor CSS și, prin urmare, poate îmbunătăți viteza de încărcare:

Pentru a minifica fișierele CSS, vă recomandăm să utilizați un plugin precum Autoptimize sau WP Rocket .

5. Minimizarea JavaScript-ului

Așa cum puteți reduce dimensiunea fișierelor CSS prin minificare, același lucru este valabil și pentru fișierele JavaScript:

Autooptimize sau WP Rocket pot gestiona și această sarcină pentru site-ul tău WordPress.

6. Eliminați CSS-ul neutilizat

Orice cod din foaia ta de stil este conținut care trebuie încărcat pentru ca pagina ta să devină vizibilă utilizatorilor. Dacă există CSS pe site-ul tău care nu este de fapt util, acesta afectează inutil performanța ta.

De aceea, Google recomandă eliminarea oricărui CSS neutilizat :

Soluția de aici este în esență aceeași ca și cea pentru eliminarea CSS-ului care blochează randarea. Puteți să inserați sau să amânați stilurile în orice mod are cel mai mult sens pentru paginile dvs. De asemenea, puteți utiliza un instrument precum Chrome DevTools  pentru a găsi CSS-ul neutilizat  care trebuie optimizat.

7. Minimizează munca la firul principal

„Firul principal” este elementul principal al browserului unui utilizator, responsabil pentru transformarea codului într-o pagină web cu care vizitatorii pot interacționa. Acesta analizează și execută HTML, CSS și JavaScript. În plus, este responsabil de gestionarea interacțiunilor utilizatorului.

Asta înseamnă că, atunci când firul principal de execuție parcurge codul site-ului tău, nu poate gestiona nici cererile utilizatorilor. Dacă procesul de elaborare a firului principal de execuție al site-ului tău durează prea mult, acest lucru poate duce la o experiență de utilizare slabă și la timpi de încărcare lenți a paginilor.

Google PageSpeed va semnala paginile care necesită mai mult de patru secunde pentru a finaliza activitatea principală și va prezenta o pagină web utilizabilă:

Unele dintre metodele utilizate pentru reducerea muncii firului principal de execuție au fost deja abordate în alte secțiuni ale acestei postări, inclusiv:

• Minimizarea codului
• Eliminarea codului neutilizat
• Implementarea memorării în cache

Totuși, ați putea lua în considerare și divizarea codului. Acest proces implică împărțirea codului JavaScript în pachete care se execută atunci când este nevoie de ele, în loc să fie nevoie ca browserele să le încarce pe toate înainte ca pagina să devină interactivă.

Webpack este adesea folosit pentru a implementa divizarea codului. Rețineți că aceasta este o tehnică destul de avansată și nu una pe care începătorii ar trebui să o folosească de obicei singuri.

8. Reduceți timpul de execuție JavaScript

Executarea JavaScript este adesea cel mai important factor care contribuie la munca firului principal de execuție. PageSpeed Insights are o recomandare separată pentru a vă alerta dacă această sarcină are un impact semnificativ asupra performanței site-ului dvs.:

Metodele sugerate mai sus pentru reducerea lucrului pe firul principal de execuție ar trebui să rezolve și acest avertisment din rezultatele PageSpeed.

9. Reduceți timpii de răspuns ai serverului (TTFB)

Timpul până la primul octet (TTFB) este o măsură a timpului necesar unui browser pentru a primi primul octet de date de la serverul site-ului dvs. după efectuarea unei solicitări. Deși acest lucru nu este același cu viteza generală a site-ului dvs., un TTFB scăzut este, în mod firesc, benefic pentru performanța site-ului dvs.

Prin urmare, reducerea timpilor de răspuns ai serverului se numără printre recomandările Google PageSpeed Insights. Dacă reușiți să obțineți un TTFB scăzut, veți vedea acest mesaj în secțiunea Audituri aprobate :

Există mai mulți factori care pot influența TTFB-ul. Câteva strategii pentru reducerea acestuia includ:

• Alegerea unui furnizor de găzduire web de înaltă calitate  , care se concentrează pe viteză
• Utilizarea temelor și pluginurilor ușoare
• Reducerea numărului de plugin-uri instalate pe site-ul dvs.
• Utilizarea unei rețele de livrare de conținut (CDN)
• Implementarea memorării în cache a browserului
• Selectarea unui furnizor solid de Sistem de nume de domeniu (DNS)

Postarea noastră de pe TTFB  este o resursă excelentă pentru mai multe detalii despre optimizarea în acest domeniu.

10. Dimensionați corect imaginile

Fișierele media, cum ar fi imaginile, pot fi un adevărat dezavantaj pentru performanța site-ului dvs. Dimensionarea corectă a acestora este o modalitate simplă de a reduce timpii de încărcare:

Dacă pagina dvs. include imagini mai mari decât este necesar, se folosește CSS pentru a le redimensiona corespunzător. Acest lucru durează mai mult decât simpla încărcare inițială a imaginilor la dimensiunea corectă, afectând astfel performanța paginii.

Pentru a remedia acest lucru, puteți fie să încărcați imagini la dimensiunile corecte, fie să utilizați „imagini responsive”. Aceasta implică crearea de imagini de dimensiuni diferite pentru diverse dispozitive.

Puteți face acest lucru folosind atributul srcset , care este adăugat la etichetele <img> pentru  a specifica fișiere de imagine alternative de dimensiuni diferite. Browserele pot citi această listă, pot determina care opțiune este cea mai potrivită pentru ecranul curent și pot afișa acea versiune a imaginii.

De exemplu, să presupunem că aveți o imagine de antet și doriți să o faceți responsive. Puteți încărca trei versiuni ale acesteia cu lățimea de 800, 480 și 320 pixeli. Apoi, ați aplica atributul srcset  , astfel:

<img srcset="header-image-800w.jpg 880w,
		Header-image-480w.jpg 480w,
		Header-image-320w.jpg 320w"
	sizes="(max-width: 320px) 280px,
		(max-width: 480px) 440px,
		800px"
	src="header-image-800w.jpg">

Atributul srcset  specifică diferitele fișiere disponibile, iar atributul sizes  le spune browserelor pe care ar trebui utilizat în funcție de dimensiunea curentă a ecranului.

11. Amânați imaginile în afara ecranului

Procesul de amânare a imaginilor în afara ecranului este mai cunoscut sub numele de „încărcare lentă”. Aceasta înseamnă că, în loc să facă browserul să încarce fiecare imagine de pe o pagină înainte de a afișa conținutul din partea superioară a paginii, acesta va încărca doar pe cele care sunt vizibile imediat.

O încărcare mai redusă înainte ca pagina să devină vizibilă înseamnă o performanță mai bună, motiv pentru care Google recomandă această metodă:

Există mai multe plugin-uri WordPress create special pentru încărcare lentă, inclusiv a3 Lazy Load  și  Lazy Load de la WP Rocket . Diverse plugin-uri de optimizare a imaginilor și performanței, cum ar fi Autoptimize, au, de asemenea, funcții de încărcare lentă . Consultați ghidul nostru complet despre încărcarea lentă a imaginilor și videoclipurilor pe WordPress .

12. Codificare eficientă a imaginilor

Așa cum am menționat anterior în această postare, imaginile au un impact semnificativ asupra performanței site-ului dvs. Una dintre cele mai bune practici de optimizare de bază pe care ați putea dori să le luați în considerare este compresia , care poate ajuta la reducerea dimensiunilor fișierelor, astfel încât acestea să se încarce mai rapid. De asemenea, este principala metodă de a urma recomandarea Google de a codifica eficient imaginile :

Cheia este obținerea unor dimensiuni de fișier cât mai mici posibil, fără a sacrifica calitatea imaginilor în sine. Pluginuri precum Imagify  și Smush  vă pot ajuta în această sarcină. Puteți afla mai multe despre ele în ghidul nostru despre optimizarea imaginilor .

Alte recomandări care influențează dacă veți „trece” sau „respinge” auditul Efficiently encode images  includ:

• Difuzarea imaginilor la dimensiunea corectă
• Implementarea încărcării lente (amânarea imaginilor în afara ecranului)
• Conversia imaginilor în formate de fișiere de ultimă generație, cum ar fi WebP
• Utilizarea formatelor video pentru conținut animat, cum ar fi GIF-urile

Pe lângă comprimarea imaginilor, puteți urma pașii pentru îndeplinirea acestor sugestii, așa cum sunt descriși în altă parte a acestei postări.

13. Difuzați imagini în formate de ultimă generație

Există unele formate de fișiere imagine care se încarcă mai repede decât altele. Din păcate, acestea nu sunt formatele PNG  sau JPEG obișnuite  .  Imaginile WebP  devin noul standard, iar Google PageSpeed vă va informa dacă imaginile dvs. nu respectă acest standard:

Aceasta poate părea o recomandare greu de respectat, deoarece probabil aveți deja o mulțime de imagini pe site-ul dvs. Din fericire, există plugin-uri care vă pot ajuta. De exemplu, Imagify și Smush oferă ambele o funcție de conversie WebP.

14. Folosește formate video pentru conținut animat

GIF-urile pot fi o formă eficientă de conținut vizual  într-o varietate de situații. Tutorialele, recenziile de funcții și chiar animațiile umoristice pot îmbunătăți postările tale și le pot face mai plăcute și mai valoroase pentru cititori.

Din păcate, aceste beneficii vin cu prețul performanței tale. GIF-urile sunt dificil de încărcat, motiv pentru care PageSpeed Insights recomandă difuzarea de conținut video în schimb:

Din păcate, convertirea GIF-urilor în formate video nu este cel mai simplu proces. Mai întâi, va trebui să decideți ce tip de videoclip doriți să utilizați:

• MP4:  Produce fișiere puțin mai mari, dar este compatibil cu majoritatea browserelor importante .
• WebM:  Cel mai optimizat format video, deși are o compatibilitate limitată cu browserele.

După ce ați făcut alegerea cea mai potrivită pentru site-ul dvs., va trebui să convertiți formatele de fișiere. Cea mai bună modalitate de a face acest lucru este prin intermediul liniei de comandă. Pentru a începe, instalați FFmpeg . Acesta este un instrument open-source pentru convertirea formatelor de fișiere:

Apoi, deschideți interfața liniei de comandă și executați următoarea comandă:

ffmpeg -i input.gif output.mp4

Aceasta va converti fișierul GIF cu numele de fișier input.gif  într-un videoclip MP4 cu numele de fișier output.mp4 . Schimbarea formatului este însă doar începutul. Acum trebuie să încorporați videoclipul rezultat pe site-ul dvs. într-un mod care să-l facă să pară un GIF animat.

Integrarea conținutului video pentru animații

După cum probabil ați observat dacă ați mai văzut vreodată un GIF, acestea sunt ușor diferite de videoclipurile normale. De obicei, se redau automat și rulau în buclă și sunt întotdeauna fără sunet. Încorporarea noului fișier MP4 sau WebM pe site-ul dvs. nu va produce aceste funcții.

Totuși, le poți  recrea cu un cod foarte simplu. Încarcă videoclipul în biblioteca media, apoi adaugă următoarele pe pagina sau postarea unde dorești să incluzi GIF-ul:

<video autoplay loop muted playsinline>
<source src="output.mp4" type="video/mp4">
</video>

Aceasta va aplica atributele specificate videoclipului dvs., făcându-l să pară mai „asemănător unui GIF”. Pur și simplu adaptați numele și tipul fișierului pentru a se potrivi cu cele ale resursei dvs. Pentru mai multe detalii despre acest subiect, vă sugerăm să citiți ghidul Google despre convertirea GIF-urilor în videoclipuri .

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

La fel ca imaginile, fonturile tind să fie fișiere mari, care necesită mult timp pentru încărcare. În unele cazuri, browserele pot ascunde textul până când fontul pe care îl utilizați se încarcă complet, ceea ce va duce la această recomandare de la Google PageSpeed Insights:

Google  vă recomandă să rezolvați această problemă aplicând directiva swap Font Display API  în stilul @font-face  . Pentru a face acest lucru, accesați foaia de stil ( style.css ) și adăugați următoarele după atributul src  de sub @font-face :

afișare-font: swap

Puteți afla mai multe despre optimizarea fonturilor web în articolul nostru „ Cum se schimbă fonturile în WordPress ” și în ghidul nostru detaliat despre găzduirea fonturilor locale .

16. Activați compresia textului

Recomandarea Google PageSpeed Insights privind activarea compresiei textului  se referă la utilizarea compresiei GZIP:

În unele cazuri (așa cum puteți vedea în imaginea de mai sus), compresia textului va fi activată automat pe serverul dvs. Dacă acest lucru nu este valabil pentru site-ul dvs., aveți câteva opțiuni pentru a urma această recomandare.

Primul este să instalezi un plugin cu o funcție de compresie GZIP. WP Rocket este o soluție viabilă dacă ești dispus să plătești pentru asta.

De asemenea, puteți comprima textul manual. Aceasta implică editarea  fișierului .htaccess , ceea ce poate fi riscant, așa că asigurați-vă că aveți la îndemână o copie de rezervă recentă.

Majoritatea site-urilor WordPress rulează pe servere Apache. Codul pentru activarea compresiei GZIP  arată astfel:

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

Ar trebui să îl adaugi după #END  în fișierul tău .htaccess . Dacă se întâmplă să ai site-ul tău WordPress pe un server Nginx, ar trebui să adaugi în schimb următorul cod în fișierul tău nginx.conf  :

36 gzip on;
37 gzip_disable "MSIE [1-6]\.(?!.*SV1)";
38 gzip_vary on;
39 gzip_types text/plain text/css text/javascript application/javascript application/x-javascript;

Dacă doriți să verificați compresia textului site-ului dvs., vă sugerăm să utilizați un instrument precum GiftOfSpeed :

Acest lucru vă va permite să știți dacă compresia GZIP a fost implementată cu succes, precum și pe ce tip de server rulează site-ul dvs. și alte câteva detalii cheie.

17. Preconectare la originile necesare

Există șanse mari să aveți cel puțin o resursă terță parte pe site-ul dvs. – Google Analytics este un exemplu comun. Poate dura ceva timp până când browserele stabilesc o conexiune la aceste resurse, ceea ce încetinește viteza de încărcare.

Utilizarea atributelor de preconectare  poate indica imediat browserelor că există scripturi terțe pe pagina dvs. care trebuie încărcate. Procesul de solicitare a acestora poate fi apoi inițiat cât mai curând posibil, îmbunătățind performanța.

Dacă Google consideră că pagina dvs. ar putea beneficia de această tehnică, veți vedea sugestia „ Preconectați la originile necesare”  :

Există câteva modalități de a implementa această strategie de optimizare. Dacă vă simțiți confortabil să editați fișierele temei WordPress, puteți adăuga o etichetă de link în fișierul header.php  . Iată un exemplu:

<link rel=“preconnect” href=“example.com”>

În acest caz, eticheta le spune browserelor că trebuie să stabilească o conexiune la example.com  cât mai repede posibil. Google PageSpeed Insights va lista toate resursele relevante pentru care ar trebui să adăugați etichete de link cu atribute de preconectare.

Cealaltă opțiune este utilizarea unui plugin pentru a obține același efect. Perfmatters include o funcție de preconectare (atenție: sunt unul dintre fondatorii Perfmatters). WP Rocket și Pre* Party Resource Hints  includ funcționalități similare.

18. Cereri de preîncărcare a cheilor

Similar recomandării Preconectare la originile necesare  , urmarea acestei sugestii vă permite să reduceți la minimum numărul de solicitări pe care browserele trebuie să le facă către serverul site-ului dvs. Cu toate acestea, în loc să vă conectați la resurse terțe, solicitările de preîncărcare a cheii  se referă la încărcarea activelor critice pe propriul server:

Implementarea acestei tehnici este foarte similară cu recomandarea anterioară. Puteți adăuga etichete de link care specifică resursele listate în PageSpeed Insights în fișierul header.php  :

<link rel=“preload” href=“example.com”>

De asemenea, poți încorpora această etichetă folosind Perfmatters, WP Rocket sau Pre* Party Resource Hints.

19. Evitați redirecționările către mai multe pagini

Redirecționările sunt folosite atunci când doriți ca o adresă URL să indice către alta. Sunt utilizate în mod obișnuit atunci când mutați sau ștergeți o pagină de pe site-ul dvs. Deși nu este nimic în neregulă cu utilizarea redirecționărilor în general, acestea cauzează întârzieri suplimentare în timpul de încărcare.

Dacă aveți prea multe redirecționări pe site-ul dvs., este posibil să vedeți această recomandare în Google PageSpeed Insights:

Singurul lucru pe care îl poți face ca răspuns la această recomandare este să te asiguri că folosești redirecționări doar atunci când este absolut necesar. Poți afla mai multe despre procesul de creare a acestora în articolul nostru „ Redirecționare WordPress – Cele mai bune practici pentru o performanță mai bună ”.

20. Serviți active statice cu o politică eficientă de cache

Dacă utilizați Google PageSpeed Insights de ceva vreme, este posibil să cunoașteți această recomandare mai bine sub numele de avertismentul privind utilizarea memoriei cache a browserului . În versiunea 5, este acum etichetată ca „ Serviți active statice cu o politică eficientă de cache” :

Această sugestie are câteva aspecte pe care trebuie să le detaliem. Primul este ce înseamnă „memorarea în cache”. Pe scurt, este un proces prin care browserele salvează copii ale paginilor dvs., astfel încât acestea să poată fi încărcate mai rapid la vizitele viitoare.

Cea mai comună modalitate prin care site-urile WordPress implementează cache-ul este prin intermediul plugin-urilor . WP Rocket și W3 Total Cache sunt opțiuni populare.

Totuși, unii furnizori de găzduire – inclusiv noi, cei de la Kinsta – activează caching-ul prin intermediul serverelor lor. De fapt, toți clienții noștri pot activa Edge Caching gratuit, o funcție care reduce timpul necesar pentru livrarea HTML-ului din paginile lor web către vizitatorii site-ului cu o medie de peste 50%.

Asigurați-vă că verificați dacă acesta este cazul pentru gazda dvs. înainte de a instala un plugin de caching.

După ce ați activat memoria cache pentru site-ul dvs., vă puteți preocupa de a doua parte a acestei recomandări, și anume „eficiența” politicii dvs. de cache. Browserele își șterg periodic memoria cache pentru a o reîmprospăta cu copii actualizate.

În mod ideal, doriți ca această perioadă de timp să fie mai mare decât mai mică. Dacă goliți site-ul din memoria cache a browserului la fiecare câteva ore, acest lucru anulează scopul utilizării acestei tehnici. Puteți optimiza perioada de expirare a memoriei cache folosind antetele Cache-Control  și Expires .

Adăugarea antetelor de control al cache-ului

Folosește următorul cod pentru a adăuga antete Cache-Control în Nginx:

location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {
 expires 30d;
 add_header Cache-Control "public, no-transform";
}

Ar trebui să adăugați acest lucru în fișierul de configurare al serverului. În exemplul de mai sus, tipurile de fișiere specificate sunt setate să expire după 30 de zile.

Cei care au servere Apache  ar trebui să folosească în schimb acest fragment în  fișierele lor .htaccess :

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"
</filesMatch>

Adăugați acest cod înainte de #BEGIN WordPress  sau după #END WordPress . În acest exemplu, perioada de expirare a memoriei cache este setată la 84.600 de secunde.

Adăugarea antetelor de expirare

Anteturile Cache-Control sunt practic standardul acum. Cu toate acestea, există unele instrumente (inclusiv GTMetrix) care încă verifică anteturile Expires .

Puteți adăuga antete de expirare la un server Nginx prin încorporarea următoarelor elemente în blocul serverului:

location ~*  \.(jpg|jpeg|gif|png|svg)$ {
        expires 365d;
    }

    location ~*  \.(pdf|css|html|js|swf)$ {
        expires 2d;
    }

Ar trebui să setați timpi de expirare diferite în funcție de tipurile de fișiere. Serverele Apache vor produce aceleași rezultate dacă adăugați acest cod în fișierul .htaccess  :

## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES HEADER CACHING ##

Încă o dată, ar trebui să adăugați acest cod fie înainte de #BEGIN WordPress , fie după #END WordPress .

Cache-ul eficient al Google Analytics

În mod ironic, scriptul Google Analytics pe care l-ați adăugat în anteturile paginilor dvs. pentru a urmări comportamentul utilizatorilor are o perioadă de expirare a memoriei cache de doar două ore. Acest lucru este probabil pentru ca, dacă se fac actualizări la platformă, utilizatorii să aibă acces rapid la modificări.

Acest script va apărea în lista de resurse care necesită atenția dvs., sub recomandarea „ Serviți resurse statice cu o politică eficientă de cache”  . Deoarece aparține unei terțe părți, nu puteți modifica perioada de expirare cu  antetele Cache-Control  sau Expires .

Dacă acesta este singurul script listat în cadrul acestei recomandări, puteți totuși trece auditul:

Totuși, așa cum am menționat pe parcursul acestei postări, scorul PageSpeed contează mai puțin decât performanța reală și percepută. Pentru a servi această resursă eficient, puteți lua în considerare găzduirea Google Analytics local.

Pluginuri precum Complete Analytics Optimization Suite (CAOS)  și Perfmatters vă vor permite să faceți acest lucru. Puteți citi mai multe despre acest proces în ghidul nostru complet pentru această sugestie PageSpeed .

21. Reduceți impactul codului terț

Am menționat acum câteva moduri diferite în care scripturile terțe pot afecta negativ performanța dvs. și pot duce la audituri eșuate de la PageSpeed Insights. În mod ideal, este mai bine să vă limitați dependența de aceste instrumente pentru a preveni efectele adverse.

Totuși, în unele cazuri, cea mai bună soluție pentru o nevoie a site-ului dvs. este încorporarea unui script terț. Google Analytics este un exemplu excelent. Altele includ:

• Butoane și fluxuri de partajare pe rețelele sociale
• Încorporări de videoclipuri YouTube
• iFrame-uri pentru reclame și alt conținut
• Biblioteci pentru JavaScript, fonturi și alte elemente

În cazurile în care considerați necesară utilizarea unui script terț, este important să reduceți totuși impactul acestuia asupra performanței site-ului dvs., deoarece rezultatele analizei PageSpeed vă vor spune:

Pentru a încărca codul terț mai eficient, puteți lua în considerare una dintre tehnicile pe care le-am menționat deja în această postare:

• Amânați încărcarea JavaScript-ului
• Utilizați etichete de legătură cu  atribute de preconectare
• Scripturi terțe cu auto-găzduire (așa cum am descris mai sus cu Google Analytics)

Aceste metode ar trebui să minimizeze impactul asupra performanței site-ului dvs.

22. Evitați sarcinile enorme de rețea

Această recomandare este relevantă în special pentru vizitatorii dvs. de pe mobil. Sarcinile mari pot necesita utilizarea mai multor date celulare, ceea ce îi costă pe utilizatori. Minimizarea numărului de solicitări de rețea necesare pentru a ajunge la paginile dvs. poate preveni acest lucru:

Google recomandă menținerea dimensiunii totale în octeți la maximum 1.600 KB. Metodele cele mai frecvent utilizate pentru atingerea acestui obiectiv se găsesc în această postare, inclusiv:

• Amânarea CSS, JavaScript și a imaginilor aflate sub pliere
• Minimizarea codului
• Comprimarea fișierelor de imagine
• Utilizarea formatului WebP pentru imagini
• Implementarea memorării în cache

Urmați pașii relevanți pentru aceste strategii și ar trebui să treceți acest audit fără niciun efort suplimentar.

23. Marcaje și măsuri de timp ale utilizatorului

Această recomandare este relevantă numai dacă utilizați API-ul User Timing . Acest instrument creează marcaje temporale pentru a vă ajuta să evaluați performanța JavaScript-ului. Dacă ați configurat API-ul pentru site-ul dvs., veți vedea notele și măsurătorile sub această rubrică în PageSpeed Insights:

După cum puteți vedea, aceasta este o altă sugestie de la Google care nu are ca rezultat un rezultat „admis” sau „respins”. PageSpeed Insights pur și simplu face ca aceste informații să fie ușor de recuperat, astfel încât să le puteți utiliza pentru a evalua domeniile care ar putea necesita optimizare.

Dacă ești interesat să încorporezi API-ul User Timing în site-ul tău WordPress, poți afla mai multe în ghidul Mozilla pe această temă .

24. Evitați o dimensiune excesivă a modelului de obiecte al documentului (DOM)

În termeni simpli, DOM-ul este modul în care browserele transformă HTML-ul în obiecte. Implică utilizarea unei structuri arborescente formate din noduri individuale, fiecare reprezentând un obiect. Bineînțeles, cu cât DOM-ul paginii este mai mare, cu atât va dura mai mult să se încarce.

Dacă pagina ta depășește anumite standarde privind dimensiunea DOM , se va recomanda reducerea numărului de noduri, precum și a complexității stilizării CSS :

O cauză frecventă dacă ați „eșuat” acest audit în PageSpeed Insights este tema WordPress. Temele complexe adaugă adesea volume mari de elemente în DOM și pot include, de asemenea, stiluri complicate care încetinesc site-ul. În acest caz, este posibil să fie nevoie să schimbați tema .

Rezumat

Google PageSpeed Insights ar trebui să fie un instrument esențial în setul de instrumente pentru webmasteri. Cu toate acestea, fixarea asupra scorului dvs. și obsesia atingerii râvnitului 100/100 probabil nu este cea mai bună utilizare a timpului dvs. S-ar putea să vă distragă de la alte sarcini importante care ar putea oferi beneficii mai semnificative.

În această postare, am abordat modurile în care scorul Google PageSpeed contează și nu contează. De asemenea, am împărtășit câteva instrucțiuni scurte pentru a pune în practică recomandările platformei pe site-ul dvs., pentru a-i îmbunătăți performanța.

Ai întrebări despre Google PageSpeed Insights sau despre optimizarea performanței site-ului tău? Adresează-le în secțiunea de comentarii de mai jos!

---

Îmbunătățește-ți site-ul cu găzduirea WordPress administrată de Kinsta, concepută pentru viteză, securitate și simplitate. Cu Kinsta, primești:

• Control fără efort în tabloul de bord MyKinsta
• Migrări gratuite nelimitate, gestionate de echipa noastră de experți în migrări
• Asistență 24/7/365 de la experți WordPress
• Infrastructura premium a Google Cloud
• Securitate la nivel de întreprindere prin integrare Cloudflare
• Acoperire globală cu 37 de centre de date

Bucură-te de prima lună gratuită !

Skip to content

Kinsta®

• 

• 

Pricing

• 

Search

Login Sign up

1. Home
2. Resource Center
3. Blog
4. WordPress Performance
5. Google PageSpeed Insights: The Truth About Scoring 100/100

Google PageSpeed Insights: The Truth About Scoring 100/100

AuthorBrian Jackson UpdatedFebruary 12, 2025

Table of Contents

1. What Is Google’s PageSpeed Insights?
2. The Truth About Scoring 100/100 in Google PageSpeed Insights
3. How Does Google Use PageSpeed Insights?
4. Google PageSpeed Insights Recommendations (24 Ways to Improve Performance)

Google PageSpeed Insights is without a doubt a useful tool for webmasters, developers, and site owners of all types. However, we’ve noticed that a lot of people spend hours obsessing over optimizing their sites, in order to try and score 100/100 on this test.

The truth is that this isn’t how Google PageSpeed Insights is meant to be used, nor is it a worthwhile pursuit. When you focus on implementing the platform’s recommendations instead of zeroing in on the number at the top of the page, you’ll be creating a lot more benefits for your site.

This post is a comprehensive guide to using Google PageSpeed Insights to your best advantage. We’ll cover how Google uses your score, as well as how to incorporate the recommendations you receive.

Let’s get started!

What Is Google’s PageSpeed Insights?

Google PageSpeed Insights is a tool used for testing website performance. You can enter any URL and have it analyzed.

Google then provides an overall score out of 100 for the website you’ve tested, based on several performance optimization best practices.

Along with this result, you’ll also see several recommendations from Google on how to improve your performance (and therefore, your PageSpeed Insights score as well).

As of 2018, PageSpeed Insights scores are calculated via Lighthouse, Google’s open source, automated tool for improving the overall quality of web pages. This platform can evaluate all sorts of factors, including performance, accessibility, progressive web apps, and more.

To see Lighthouse’s comprehensive assessment of your site, you can use Google’s Measure tool:

In addition to conducting a performance audit much like the one Google PageSpeed Insights runs, you’ll get scores for accessibility, best practices, and Search Engine Optimization (SEO).

The Truth About Scoring 100/100 in Google PageSpeed Insights

As we mentioned at the beginning of this post, we see many site owners and developers who become obsessed over achieving a perfect PageSpeed Insights score. Unfortunately, those folks tend to overlook the more important aspect of the test’s results: the recommendations.

While you should certainly strive to improve your website’s loading times as much as possible, getting a 100/100 in Google PageSpeed Insights isn’t actually that important. For starters, it’s not even the be-all-end-all test for performance.

Unlike PageSpeed Insights, Pingdom Tools enables you to test your site’s performance from various locations:

You can also run tests on platforms such as GTmetrix (which combines your scores from PageSpeed Insights and YSlow) and WebPageTest. Chances are, your scores across these different tools won’t match exactly, which shows you how arbitrary these numbers can be.

What really matters is the actual speed of your website. To put it into perspective, we’ve seen sites with average loading times of under 500 milliseconds (which is extremely fast!) that don’t have a 100/100 score on PageSpeed Insights.

The other factor that should influence your approach to speed optimization is the perceived performance of your site. Your visitors don’t care what your Google PageSpeed Insights score is. They just want to be able to view your content as quickly as possible.

The real purpose of testing your site’s performance with Google PageSpeed Insights isn’t to achieve a high score. Instead, it’s to find problem spots on your site, so that you can optimize them and decrease both your actual and perceived loading times.

How Does Google Use PageSpeed Insights?

In addition to influencing your site’s User Experience (UX), performance also plays a role in SEO. Given that PageSpeed Insights is run by the world’s largest and most popular search engine, it stands to reason that your score might have some effect on your Search Engine Results Page (SERP) rankings (at least on Google itself).

The reality is that Google does use PageSpeed Insights to determine rankings – kind of. Site speed is a ranking factor, plain and simple. Your performance test score can give you a pretty good idea of where you stand on that front.

However, Google takes into consideration more than just the number in the circle at the top of your PageSpeed results. Hitting a 100/100 won’t guarantee you a top spot on the SERPs.

With that said, you can still put your PageSpeed Insights results to work when improving your SEO. For example, since 2018, mobile page speed has been a ranking factor for Google. You’ll notice that your performance test provides data for both the desktop and mobile versions of your site:

Since more than 73 percent of mobile internet users claim they’ve encountered a site that takes too long to load, the information in the Google PageSpeed Insights Mobile tab is invaluable. Using the recommendations here to decrease loading times on smartphones and other devices should give you a competitive edge.

Google PageSpeed Insights Recommendations (24 Ways to Improve Performance)

We’ve talked a lot about Google PageSpeed Insights’ recommendations in this post. They’re the real meat of your performance test results, and far more valuable than your actual score. That’s why we’ve dedicated the rest of this post to them.

Before we dive into the individual suggestions, however, you’ll need to understand the difference between your Field Data and Lab Data. The former compares your site to others in the Chrome User Experience Report for the last 30 days.

There are also two charts that show where your average First Contentful Paint (FCP) and First Input Delay (FID) fall:

In the image above, our site’s FCP is about the same as 45 percent of sites in the 75th percentile, and our FID is about the same as 9 percent of the 95th percentile.

Lab Data shows specific data for a simulated page load:

You’ll notice that our Field Data and Lab Data don’t match exactly. That’s perfectly normal. The Lab Data is created under fixed conditions, while the Field Data uses actual loading speeds collected over time.

When looked at in combination, the Field Data and Lab Data should give you an idea of your site’s actual loading times. As we mentioned earlier, this is even more important than your overall PageSpeed score, so you’ll want to pay attention to these numbers.

After you’ve considered this information, it’s time to start improving your site’s performance with Google PageSpeed’s recommendations.

1. Eliminate Render-Blocking Resources
2. Avoid Chaining Critical Requests
3. Keep Request Counts Low and Transfer Sizes Small
4. Minify CSS
5. Minify JavaScript
6. Remove Unused CSS
7. Minimize Main-Thread Work
8. Reduce JavaScript Execution Time
9. Reduce Server Response Times (TTFB)
10. Properly Size Images
11. Defer Offscreen Images
12. Efficiently Encode Images
13. Serve Image in Next-Gen Formats
14. Use Video Formats for Animated Content
15. Ensure Text Remains Visible During Webfont Load
16. Enable Text Compression
17. Preconnect to Required Origins
18. Preload Key Requests
19. Avoid Multiple Page Redirects
20. Serve Static Assets With an Efficient Cache Policy
21. Reduce the Impact of Third-Party Code
22. Avoid Enormous Network Payloads
23. User Timing Marks and Measures
24. Avoid an Excessive Document Object Model (DOM) Size

1. Eliminate Render-Blocking Resources

One of the more common recommendations from Google PageSpeed Insights is to Eliminate render-blocking resources:

This is referring to JavaScript and CSS scripts that are preventing your page from loading quickly. The visitor’s browser has to download and process these files before it can display the rest of the page, so having a lot of them ‘above the fold’ can negatively impact your site’s speed.

You can learn more about this issue in our guide to eliminating render-blocking scripts. As far as Google is concerned, there are two solutions you should consider:

• If you don’t have a lot of JavaScript or CSS, you can inline them to get rid of this warning. This process refers to incorporating your JavaScript and/or CSS into your HTML file. You can do this with a plugin like Autoptimize. However, this is really only valid for very small sites. Most WordPress sites have enough JavaScript that this method could actually slow you down.
• The other option is to defer your JavaScript. This attribute downloads your JavaScript file during HTML parsing, but only executes it after the parsing is complete. Also, scripts with this attribute execute in order of appearance on the page.

You’ll find a list of the resources that are most affected by this issue below the recommendation in your PageSpeed results.

Check out this video to find out more about how to eliminate render-blocking resources:

2. Avoid Chaining Critical Requests

The concept of chaining critical requests has to do with the Critical Rendering Path (CRP) and how browsers load your pages. Certain elements – such as the JavaScript and CSS we discussed above – must be loaded completely before your page becomes visible.

As part of this suggestion, Google PageSpeed Insights will show you the request chains on the page you’re analyzing:

This diagram will show you the series of dependent requests that must be fulfilled before your page becomes visible. It will also tell you the size of each resource. Ideally, you want to minimize the number of dependent requests, as well as their sizes.

Several methods for accomplishing these goals are covered by other recommendations discussed in this post, including:

• Eliminating render-blocking resources
• Deferring offscreen images
• Minifying JavaScript and CSS

Additionally, you can optimize the order in which assets load, in order to shorten the CRP. This means moving above-the-fold content to the top of your HTML file. You can learn more about optimizing the CRP in our post, “How to Optimize the Critical Rendering Path in WordPress”.

It’s important to note that there’s not a magic number of critical request chains that you need to work down to. Google PageSpeed Insights doesn’t count this audit as ‘passed’ or ‘failed’, unlike many of its other recommendations. This information is simply made available to help you improve loading times.

3. Keep Request Counts Low and Transfer Sizes Small

The more requests browsers have to make to load your pages, and the larger the resources your server returns in response, the longer your website takes to load. Therefore, it makes sense that Google would recommend that you minimize the number of required requests and decrease the size of your resources.

Like the Avoid chaining critical requests recommendation, this one does not result in a ‘pass’ or ‘fail’. Instead, you’ll simply see a list of the number of requests made and their sizes:

There’s no ideal number of requests or maximum sizes to keep in mind. Instead, Google recommends that you set those standards for yourself by creating a performance budget. This is a set of defined goals that may be related to aspects such as:

• Maximum image sizes
• The number of web fonts used
• How many external resources you call to
• The size of scripts and frameworks

Creating a performance budget gives you a set of standards to hold yourself accountable to. When you go over your budget, you can then make decisions about whether to eliminate or optimize resources to stick to your predetermined guidelines. You can learn more about creating one in Google’s own guide.

4. Minify CSS

CSS files are often larger than they need to be, in order to make them easier for humans to read. They might include various carriage returns and spaces that aren’t necessary for computers to understand their contents.

Minifying your CSS is the process of condensing your files by eliminating unnecessary characters, spaces, and duplications. Google recommends this practice because it reduces your CSS file sizes, and therefore can improve loading speed:

To minify your CSS files, we recommend using a plugin such as Autoptimize or WP Rocket.

5. Minify JavaScript

Just as you can reduce CSS file size through minification, the same applies to your JavaScript files:

Autoptimize or WP Rocket can handle this task for your WordPress site as well.

6. Remove Unused CSS

Any code in your stylesheet is content that has to be loaded in order for your page to become visible to users. If there’s CSS on your site that isn’t actually useful, it’s putting an unnecessary drain on your performance.

That’s why Google recommends removing any unused CSS:

The solution here is essentially the same as that for eliminating render-blocking CSS. You can inline or defer styles in whatever way makes the most sense for your pages. You can also use a tool such as Chrome DevTools to find unused CSS that needs to be optimized.

7. Minimize Main-Thread Work

The ‘main thread’ is the primary element of a user’s browser that’s responsible for turning code into a web page that visitors can interact with. It parses and executes HTML, CSS, and JavaScript. Additionally, it’s in charge of handling user interactions.

This means that, when the main thread is working through your site’s code, it cannot also handle user requests. If your site’s main-thread work takes too long, this can result in poor UX and slow page loading times.

Google PageSpeed will flag pages that take longer than four seconds to complete main-thread work and present a usable web page:

Some of the methods used for reducing main-thread work have already been covered in other sections of this post, including:

• Minifying your code
• Removing unused code
• Implementing caching

However, you may also want to consider code splitting. This process involves breaking up your JavaScript into bundles that execute when they’re needed, instead of requiring browsers to load all of them before the page becomes interactive.

Webpack is often used to implement code splitting. Note that this is a fairly advanced technique and not one that beginners should usually undertake alone.

8. Reduce JavaScript Execution Time

JavaScript execution is often the most prominent contributor to main-thread work. PageSpeed Insights has a separate recommendation to alert you if this task is having a significant impact on your site’s performance:

The methods suggested above for reducing main-thread work should also resolve this warning in your PageSpeed results.

9. Reduce Server Response Times (TTFB)

Time to First Byte (TTFB) is a measure of how long it takes for a browser to receive the first byte of data back from your site’s server after making a request. While this isn’t the same as your overall site speed, having a low TTFB is understandably good for your site’s performance.

Therefore, reducing server response times is among Google PageSpeed Insights’ recommendations. If you’re able to achieve a low TTFB, you’ll see this message under Passed audits:

There are several factors that can influence your TTFB. Some strategies for lowering it include:

• Choosing a high-quality web hosting provider that focusses on speed
• Using lightweight themes and plugins
• Reducing the number of plugins installed on your site
• Utilizing a Content Delivery Network (CDN)
• Implementing browser caching
• Selecting a solid Domain Name System (DNS) provider

Our post on TTFB is an excellent resource for more details on optimization in this area.

10. Properly Size Images

Media files such as images can be a real drag on your site’s performance. Properly sizing them is a simple way to reduce your loading times:

If your page includes images that are larger than they need to be, CSS is used to resize them appropriately. This takes longer than simply loading the images at the right size initially, therefore impacting your page’s performance.

To fix this, you can either upload images at the proper sizes, or use ‘responsive images’. This involves creating differently-sized images for various devices.

You can do this using the srcset attribute, which is added to <img> tags to specify alternative image files at different sizes. Browsers can read this list, determine which option is best for the current screen, and deliver that version of your image.

For example, say that you have a header image and you want to make it responsive. You could upload three versions of it at 800, 480, and 320 pixels wide. Then you would apply the srcset attribute, like this:

<img srcset="header-image-800w.jpg 880w,
		Header-image-480w.jpg 480w,
		Header-image-320w.jpg 320w"
	sizes="(max-width: 320px) 280px,
		(max-width: 480px) 440px,
		800px"
	src="header-image-800w.jpg">

The srcset attribute specifies the different available files, and the sizes attribute tells browsers which one should be used based on the current screen size.

11. Defer Offscreen Images

The process of deferring offscreen images is more commonly known as ‘lazy loading’. This means that instead of making the browser load every image on a page before displaying the above-the-fold content, it will only load the ones that are immediately visible.

Less loading before the page becomes visible means better performance, which is why Google recommends this method:

There are several WordPress plugins made specifically for lazy loading, including a3 Lazy Load and Lazy Load by WP Rocket. Various image and performance optimization plugins such as Autoptimize also have lazy loading features. Check out our complete guide on Lazy Loading Images and Videos on WordPress.

12. Efficiently Encode Images

As we mentioned earlier in this post, images have a significant impact on your site’s performance. One of the most basic optimization best practices you may want to consider is compression, which can help reduce your file sizes so they’ll load faster. It’s also the primary method for following Google’s recommendation to Efficiently encode images:

The key is achieving the smallest possible file sizes, without sacrificing the quality of the images themselves. Plugins such as Imagify and Smush can help with this task. You can learn more about them in our guide to image optimization.

Other recommendations that influence whether you ‘pass’ or ‘fail’ the Efficiently encode images audit include:

• Serving images at the correct size
• Implementing lazy loading (deferring offscreen images)
• Converting images to next-gen file formats, such as WebP
• Using video formats for animated content, such as GIFs

In addition to compressing your images, you can follow the steps for fulfilling these suggestions as described elsewhere in this post.

13. Serve Image in Next-Gen Formats

There are some image file formats that load more quickly than others. Unfortunately, they’re not your commonly-seen PNG or JPEG formats. WebP images are becoming the new standard, and Google PageSpeed will inform you if your images aren’t adhering to it:

This may seem like a hard recommendation to meet, since you likely already have plenty images on your site. Fortunately, there are plugins that can help. For example, Imagify and Smush both offer a WebP conversion feature.

14. Use Video Formats for Animated Content

GIFs can be an effective form of visual content in a variety of situations. Tutorial walkthroughs, feature reviews, and even humorous animations can all elevate your posts and make them more enjoyable and valuable to readers.

Unfortunately, those benefits come at a cost to your performance. GIFs are demanding to load, which is why PageSpeed Insights recommends serving video content instead:

Unfortunately, converting GIFs to video formats isn’t the most straightforward of processes. First, you’ll have to decide which type of video you want to use:

• MP4: Produces slightly larger files, but is compatible with most major browsers.
• WebM: The most highly-optimized video format, although it has limited browser compatibility.

Once you’ve made the choice that makes the most sense for your site, you’ll need to convert the file formats. The best way to do this is via the command line. To get started, install FFmpeg. This is an open-source tool for converting file formats:

Then, open your command line interface and run the following command:

ffmpeg -i input.gif output.mp4

This will convert the GIF with the file name input.gif into an MP4 video with the file name output.mp4. Changing the format is just the beginning, however. You now need to embed the resulting video on your site in a way that makes it appear like an animated GIF.

Embedding Video Content for Animations

As you’ve likely noticed if you’ve ever seen a GIF before, they’re slightly different from normal videos. They usually autoplay and run on a loop, and they’re always without sound. Embedding your new MP4 or WebM file on your site won’t produce these features.

However, you can recreate them with some very simple code. Upload your video to your media library, and then add the following to the page or post where you want to include your GIF:

<video autoplay loop muted playsinline>
<source src="output.mp4" type="video/mp4">
</video>

This will apply the specified attributes to your video, making it appear more ‘GIF-like’. Simply adapt the file name and type to match that of your resource. For more details on this subject, we suggest reading Google’s guide on converting GIFs to videos.

15. Ensure Text Remains Visible During Webfont Load

Like images, fonts tend to be large files that take a long time to load. In some cases, browsers may hide your text until the font you’re using loads completely, which will result in this recommendation from Google PageSpeed Insights:

Google advises you resolve this issue by applying the Font Display API swap directive in your @font-face style. To do this, access your stylesheet (style.css) and add the following after the src attribute under @font-face:

font-display: swap

You can learn more about optimizing web fonts in our post “How to Change Fonts In WordPress” and our in-depth guide to hosting local fonts.

16. Enable Text Compression

Google PageSpeed Insights’ Enable text compression recommendation refers to the use of GZIP compression:

In some cases (as you can see in the image above) text compression will be enabled on your server automatically. If this is not the case for your site, you have a couple of options for following this recommendation.

The first is to install a plugin with a GZIP compression feature. WP Rocket is a viable solution if you’re willing to pay for it.

You can also compress your text manually. This involves editing your .htaccess file, which can be risky, so make sure you have a recent backup on hand.

Most WordPress sites run on Apache servers. The code for enabling GZIP compression looks like this:

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

You should add it after #END in your .htaccess file. If you happen to have your WordPress site on an Nginx server, you should add the following code to your nginx.conf file instead:

36 gzip on;
37 gzip_disable "MSIE [1-6]\.(?!.*SV1)";
38 gzip_vary on;
39 gzip_types text/plain text/css text/javascript application/javascript application/x-javascript;

If you’d like to check your site’s text compression, we suggest using a tool such as GiftOfSpeed:

This will let you know if GZIP compression has been successfully implemented, as well as what type of server your site is running on and a few other key details.

17. Preconnect to Required Origins

Chances are high that you probably have at least one third-party resource on your site – Google Analytics is a common example. It can take time for browsers to establish a connection to these resources, slowing down your loading speeds.

Using preconnect attributes can tell browsers right away that there are third-party scripts on your page that need to be loaded. The process of requesting them can then initiate as soon as possible, improving your performance.

If Google feels that your page could benefit from this technique, you’ll see the Preconnect to required origins suggestion:

There are a few ways to go about implementing this optimization strategy. If you’re comfortable with editing your WordPress theme files, you can add a link tag to your header.php file. Here’s an example:

<link rel=“preconnect” href=“example.com”>

In this case, the tag tells browsers that they need to establish a connection to example.com as quickly as possible. Google PageSpeed Insights will list any relevant resources for which you should add link tags with preconnect attributes.

The other option is to use a plugin to achieve the same effect. Perfmatters includes a preconnect feature (disclaimer: I’m one of the founders of Perfmatters). WP Rocket and Pre* Party Resource Hints include similar functionality.

18. Preload Key Requests

Similar to the Preconnect to required origins recommendation, following this suggestion enables you to minimize the number of requests browsers must make to your site’s server. Rather than connecting to third-party resources, however, Preload key requests refers to loading critical assets on your own server:

Implementing this technique is very similar to the previous recommendation as well. You can add link tags specifying the resources listed in PageSpeed Insights to your header.php file:

<link rel=“preload” href=“example.com”>

You can also incorporate this tag using Perfmatters, WP Rocket, or Pre* Party Resource Hints.

19. Avoid Multiple Page Redirects

Redirects are used when you want one URL to point to another. They’re commonly employed when you move or delete a page on your site. While there’s nothing wrong with using redirects in general, they do cause additional delays in loading time.

If you have too many redirects on your site, you may see this recommendation in Google PageSpeed Insights:

The only thing you can do in response to this recommendation is to make sure you’re only using redirects when you absolutely have to. You can learn more about the process of creating them in our post, “WordPress Redirect – Best Practices for Better Performance”.

20. Serve Static Assets With an Efficient Cache Policy

If you’ve been using Google PageSpeed Insights for a while, you might know this recommendation better as the Leverage browser caching warning. In Version 5, it’s now labeled as Serve Static Assets With an Efficient Cache Policy:

This suggestion has a few layers we need to piece through. The first is what ‘caching’ means. In short, it’s a process in which browsers save copies of your pages, so they can be loaded faster on future visits.

The most common way WordPress sites implement caching is with plugins. WP Rocket and W3 Total Cache are popular options.

However, some hosting providers – including us here at Kinsta – enable caching via their servers. In fact, all of our clients can enable Edge Caching for free, a feature that reduces the time it takes to deliver the HTML in their web pages to site visitors by an average of over 50%.

Make sure to check and see if this is the case for your host before you install a caching plugin.

Once you’ve enabled caching for your site, you can worry about the second part of this recommendation, which is your cache policy’s ‘efficiency’. Browsers clear their caches periodically to refresh them with updated copies.

Ideally, you want this time period to be higher rather than lower. If you’re clearing your site from browser caches every couple of hours, that defeats the purpose of using this technique in the first place. You can optimize your cache expiration period using Cache-Control and Expires headers.

Adding Cache-Control Headers

Use the following code to add Cache-Control headers in Nginx:

location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {
 expires 30d;
 add_header Cache-Control "public, no-transform";
}

You should add this to your server’s configuration file. In the above example, the specified file types are set to expire after 30 days.

Those with Apache servers should use this snippet in their .htaccess files instead:

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"
</filesMatch>

Add this code before #BEGIN WordPress or after #END WordPress. In this example, the cache expiration period is set to 84,600 seconds.

Adding Expires Headers

Cache-Control headers are pretty much the standard now. However, there are some tools (including GTMetrix) that still check for Expires headers.

You can add expires headers to a Nginx server by incorporating the following into your server block:

location ~*  \.(jpg|jpeg|gif|png|svg)$ {
        expires 365d;
    }

    location ~*  \.(pdf|css|html|js|swf)$ {
        expires 2d;
    }

You should set different expiration times based on file types. Apache servers will produce the same results if you add this code to your .htaccess file:

## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES HEADER CACHING ##

Once again, you should add this code either before #BEGIN WordPress or after #END WordPress.

Efficient Caching of Google Analytics

Ironically, the Google Analytics script you may have added to your pages’ headers in order to track user behavior has a cache expiration period of just two hours. This is likely so that, if updates are made to the platform, users will have access to the changes quickly.

This script will appear in the list of resources requiring your attention under the Serve static assets with an efficient cache policy recommendation. Since it belongs to a third party, you can’t change the expiration period with Cache-Control or Expires headers.

If this is the only script listed under this recommendation, you can still pass the audit:

However, as we’ve noted throughout this post, your PageSpeed score matters less than your actual and perceived performance. In order to serve this resource efficiently, you may consider hosting Google Analytics locally.

Plugins like Complete Analytics Optimization Suite (CAOS) and Perfmatters will enable you to do this. You can read more about the process in our complete guide to this PageSpeed suggestion.

21. Reduce the Impact of Third-Party Code

We’ve now mentioned a few different ways in which third-party scripts can negatively impact your performance, and result in failed audits from PageSpeed Insights. Ideally, it’s best to limit your reliance on these tools in order to prevent adverse effects.

However, in some cases the best solution to a need your site has is to incorporate a third-party script. Google Analytics is an excellent example. Others include:

• Social media sharing buttons and feeds
• YouTube video embeds
• iFrames for ads and other content
• Libraries for JavaScript, fonts, and other elements

In cases where you deem the use of a third-party script necessary, it’s important to still reduce its impact on your site’s performance, as your PageSpeed analysis results will tell you:

To load third-party code more efficiently, you can consider one of the techniques we’ve already mentioned in this post:

• Defer the loading of JavaScript
• Use link tags with preconnect attributes
• Self-host third-party scripts (as we described with Google Analytics above)

These methods should minimize the impact on your site’s performance.

22. Avoid Enormous Network Payloads

This recommendation is particularly relevant to your mobile visitors. Large payloads can require the use of more cellular data, thereby costing your users money. Minimizing the number of network requests needed to reach your pages can prevent this:

Google recommends keeping your total byte size to 1,600 KB or less. The methods most commonly used to achieve this goal are found throughout this post, including:

• Deferring CSS, JavaScript, and images that are below the fold
• Minifying code
• Compressing image files
• Using the WebP format for images
• Implementing caching

Follow the relevant steps for these strategies, and you should pass this audit without any additional effort.

23. User Timing Marks and Measures

This recommendation is only relevant if you’re using the User Timing API. This tool creates timestamps to help you evaluate your JavaScript’s performance. If you’ve set up the API for your site, you’ll see your marks and measures under this heading in PageSpeed Insights:

As you can see, this is another suggestion from Google that doesn’t result in a ‘pass’ or ‘fail’. PageSpeed Insights simply makes this information easily retrievable, so you can use it to assess areas that may require optimization.

If you’re interested in incorporating the User Timing API into your WordPress site, you can learn more in the Mozilla guide on the topic.

24. Avoid an Excessive Document Object Model (DOM) Size

In simplest terms, the DOM is how browsers turn HTML into objects. It involves the use of a tree-structure made up of individual nodes that each represent an object. Naturally, the larger your page’s DOM is, the longer it will take to load.

If your page exceeds certain standards regarding DOM size, it will recommend reducing the number of nodes as well as the complexity of your CSS styling:

A common culprit if you’ve ‘failed’ this audit in PageSpeed Insights is your WordPress theme. Heavy themes often add large volumes of elements to the DOM, and may also include convoluted styling that slows your site down. If this is the case, you may need to switch themes.

Summary

Google PageSpeed Insights should be a staple in your webmaster toolbox. However, fixating on your score and obsessing over reaching the coveted 100/100 probably isn’t the best use of your time. It may take you away from other important tasks that could provide more significant benefits.

In this post, we covered the ways in which your Google PageSpeed Score does and doesn’t matter. We also shared some brief guidelines for putting the platform’s recommendations to work on your site, in order to improve its performance.

Do you have questions about Google PageSpeed Insights or optimizing your site’s performance? Ask away in the comments section below!

---

Power your site with Kinsta’s Managed WordPress hosting, crafted for speed, security, and simplicity. With Kinsta, you get:

• Effortless control in the MyKinsta dashboard
• Unlimited free migrations, handled by our expert migrations team
• 24/7/365 support from WordPress experts
• Google Cloud’s premium infrastructure
• Enterprise-grade security through Cloudflare integration
• Global reach with 37 data centers