Cum Să Abordați Recomandările Google PageSpeed Insights
Recomandările Google PageSpeed Insights sunt un aspect dulce-amărui al optimizării performanței web. Acestea sunt într-adevăr sugestii minunate pentru a ajuta la îmbunătățirea performanței site-ului dvs. web.
Cu toate acestea, un raport PageSpeed poate conține o serie de recomandări care pot provoca confuzie și vă pot face să vă simțiți încurcat cu întrebări precum:
Ce înseamnă recomandările PageSpeed?
Cum pot remedia avertismentele PageSpeed?
După testarea performanței site-ului dvs. WordPress, veți primi un raport PageSpeed Insights care include o serie de recomandări și avertismente, împărțite în două categorii principale:
- Oportunități
- Diagnostic
Secțiunea Oportunități se concentrează pe valorile de performanță care ar putea îmbunătăți timpul de încărcare a paginii.
Secțiunea Diagnostic, pe de altă parte, se concentrează mai mult pe cele mai bune practici de dezvoltare web care ar trebui implementate în pagina analizată.
În acest articol, vă vom prezenta cele mai frecvente recomandări Google PageSpeed Insights: le vom explica într-o română simplă și apoi vom vedea cum să le remediați. Rețineți că instrumentul abordează recomandări despre îmbunătățirea valorilor, cum ar fi Largest Contentful Paint, Cumulative Layout Shift și First Input Delay.
Să începem!
Recomandări Google PageSpeed Insights: Oportunități
Cu secțiunea Oportunități, Google PageSpeed Insights dorește să vă ofere sfaturi cu privire la valorile de performanță care ar putea ajuta pagina dvs. să se încarce mai repede. Dacă doriți să obțineți 100% la testul Google Speed Page, trebuie să acordați atenție acestor recomandări.
Fiecare recomandare este însoțită de economiile de timp estimate pe care le-ați putea obține prin implementarea soluției sugerate.
Să vedem care sunt cele mai frecvente recomandări Google PageSpeed Insights din această secțiune și cum să le abordăm.
- Eliminați Resursele de Blocare a Redării
- Eliminați CSS Neutilizat
- Reduceți Timpul de Răspuns al Serverului
- Minify CSS și Minify JavaScript
- Redirecționări de Pagini Multiple
- Activați Compresia Textului
- Preconectați-vă la Origini Necesare
- Preîncărcați Solicitările Cheie
- Amânați Imagini în Afara Ecranului
- Dimensiunea Corectă a Imaginilor
- Codificați Eficient Imaginile și Optimizați Imaginile
- Serviți Imagini în Formatul Next-Gen
Eliminați Resursele de Blocare a Redării
Cu această recomandare, Google dorește să livrați CSS/JS critice în linie sau să amânați fișierele JS și CSS care interferează cu încărcarea conținutului de mai sus al paginilor dvs. web.
Deasupra conținutului de pliere este conținutul pe care îl văd utilizatorii dvs. imediat ce deschid pagina, înainte de a începe derularea.
Pentru a înțelege ce înseamnă PageSpeed atunci când vă cere să eliminați resursele de blocare a redării (fie că este un script sau o foaie de stil) trebuie să înțelegem ce este o resursă de blocare a redării.
Înainte ca browserul să poată afișa o pagină web, trebuie să redea HTML-ul său. În timpul acestui proces, ori de câte ori browserul întâlnește un element care face referire la un script sau la o foaie de stil, acesta trebuie să se oprească, să solicite fișierul, să aștepte descărcarea acestuia de pe server și să îl execute înainte ca acesta să poată continua să analizeze HTML. Cu majoritatea temelor și pluginurilor WordPress care încarcă nu numai unul, ci mai multe fișiere CSS și/sau JavaScript, acest proces poate întârzia timpul de redare a paginii destul de semnificativ.
În timp ce unele resurse CSS și JS trebuie să fie descărcate și procesate înainte de a afișa ceva pe pagină (acestea sunt așa-numitele resurse critice), altele pot fi amânate și încărcate pentru a doua oară fără nicio problemă sau fără pierderea experienței utilizatorului.
Amânarea încărcării resurselor non-critice și efectuarea încărcării acestora după ce browserul a redat pagina, este o practică bună pentru a economisi câteva (milli) secunde din timpul de încărcare.
Deci, cum să amânăm încărcarea blocărilor de redare JS/CSS?
Abordarea manuală a acestei modificări ar putea fi un pic dificilă, deoarece implică săparea și editarea codului. Dacă preferați să continuați programatic, iată un exemplu despre cum să eliminați JavaScript care blochează redarea și unul despre eliminarea CSS care blochează redarea.
Cea mai ușoară soluție este utilizarea unui plugin precum WP Rocket!
Pluginul include două opțiuni care vă vor ajuta să remediați recomandarea Google PageSpeed Insights:
- Optimizați Livrarea CSS
- Încărcați JavaScript Deferred
Merită remarcat faptul că, uneori, poate fi foarte dificil (dacă nu chiar imposibil) eliminarea completă a tuturor CSS și JS care blochează redarea. Posibilitatea de a obține acest rezultat va depinde în mare măsură de modul în care sunt codate tema și pluginurile pe care le utilizați pe site-ul dvs. WordPress.
Dacă nu v-ați codificat site-ul dvs. de la zero și vă bazați pe o temă și pe pluginuri pe care alți dezvoltatori le-au scris, trebuie pur și simplu să acceptați că nu puteți avea control 100% asupra lor.
Este ok să nu amânați TOATE resursele dvs. de blocare a redării CSS și JS, deoarece uneori acest proces poate duce la o pagină spartă (și asta este mult mai rău decât un „scor roșu” de la Google PageSpeed Insight!).
Eliminați CSS Neutilizat
Eliminarea regulilor nefolosite din foile de stil reduce sarcina inutilă de pe site-ul dvs.
Aceasta este ceea ce numim CSS neutilizat.
De exemplu, gândiți-vă la foile de stil care ar putea fi necesare după încărcarea paginii, adică CSS-ul unei ferestre modale care apare doar după ce faceți clic pe un anumit buton.
Un alt caz tipic de CSS neutilizat este atunci când utilizați teme și pluginuri WordPress pre-construite: acestea conțin de obicei mai mult cod decât este necesar pentru fiecare pagină, deoarece autorul nu poate prezice modul în care utilizatorul își va construi site-ul.
Deci, cum să eliminați CSS neutilizat?
Este foarte dificil să automatizați această sarcină cu precizie și chiar mai mult să eliminați manual CSS neutilizat. Chris Coyer, autorul CSS Tricks, explică toate motivele pentru acest lucru.
Cu WP Rocket, puteți utiliza opțiunea Optimizare livrare CSS care diferă încărcarea CSS, dar pluginul nu poate elimina părțile neutilizate. Mai mult, din versiunea WP Rocket 3.9 puteți elimina direct CSS neutilizate:
Reduceți Timpul de Răspuns al Serverului ( TTFB )
Dacă serverul dvs. răspunde încet la solicitările utilizatorilor, experiența generală a utilizatorului site-ului dvs. va fi afectată.
După cum am menționat deja, un server rapid este un element fundamental al performanței site-ului web.
Când Google PageSpeed Insights vă solicită să reduceți timpul de răspuns al serverului, se referă în principiu la indicatorul cunoscut sub denumirea de Time to First Byte.
Am abordat deja acest subiect în articolul nostru: Cum se Reduce Time to First Byte (TTFB) și Timpul de Răspuns al Serverului!
Minify CSS și Minify JavaScript
Aceste două recomandări sunt legate de una dintre cele mai populare tehnici de optimizare a codului: minificare.
Minificarea este tehnica care face ca paginile HTML, scripturile CSS și JS să fie mai puțin lizibile (pentru oameni, desigur), dar mai rapid de încărcat!
Această metodă elimină toate caracterele, marcajele, spațiile și comentariile inutile pe care dezvoltatorii tind să le adauge la paginile web și la fișierele script.
De fapt, dezvoltatorii ar putea avea nevoie de comentarii, marcaje și spațiu pentru a face paginile și scripturile mai lizibile în timpul procesului de dezvoltare.
Dar, când capodopera lor s-a încheiat și site-ul web este online, toate acele elemente suplimentare devin redundante: cresc traficul de rețea și împovărează lățimea de bandă a cererilor de rețea.
Atunci minificarea este utilă: simplifică codul, astfel încât utilizatorul final îl va primi mai repede și timpul de încărcare global se va îmbunătăți.
Deci, cum puteți minimiza fișierele CSS și JS?
Există două moduri de a minimiza CSS și JavaScript:
- Manual
- Automat, cu un plugin
Pentru a afla cum puteți minimiza manual fișierele dvs., consultați articolul nostru: Cele mai bune instrumente de minimizare CSS și JS.
Pentru a vă ocupa automat de minificare și a uita de modificările manuale, puteți utiliza un plugin WordPress.
Există multe pluginuri de minimizare eficiente pe piață, dar, din nou, WP Rocket ar putea fi soluția perfectă pentru dvs.! ?
Pluginul include atât minificare CSS și JS, cât și combinație CSS și JS:
Reduceți și Combinați fișiere CSS
Reduceți și Combinați fișiere JS
După cum s-a menționat deja în nota despre eliminarea resurselor de blocare a redării, reducerea și combinarea sunt caracteristici avansate care uneori pot rupe aspectul paginilor dvs.
Depinde întotdeauna de codul temei și al altor pluginuri pe care le utilizați: unele fișiere JS sau CSS ar putea fi incompatibile cu minificarea, deci ar trebui să fiți atenți întotdeauna atunci când implementați această tehnică.
Consultați documentația WP Rocket pentru a înțelege cum să remediați problemele potențiale legate de reducere/combinație.
Redirecționări de Pagini Multiple
Redirecționările 301 sunt într-adevăr cruciale pentru a vă notifica browserul că o cerere HTTP vine dintr-o altă locație sursă și pentru a evita erorile 404; dar atunci când redirecționările se acumulează, acestea tind să încetinească paginile.
Google PageSpeed Insights consideră redirecționările ca o problemă atunci când o pagină conține mai mult de două dintre ele.
Soluția ideală ar fi, actualizarea legăturilor originale către resursele redirecționate.
Activați Compresia Textului
Cu această recomandare, Google PageSpeed Insights vă solicită să activați compresia GZIP.
Comprimarea textului minimizează dimensiunea de octeți a răspunsurilor din rețea care includ conținut text. Mai puțini octeți descărcați înseamnă încărcare mai rapidă a paginii.
Compresia GZIP este o metodă foarte populară și eficientă pentru a accelera site-ul dvs. WordPress, deoarece reduce dimensiunea totală a paginilor și îmbunătățește timpul de first paint.
Preconectați-vă la Origini Necesare
Acest avertisment Google PageSpeed Insights apare de fiecare dată când aveți conținut terță parte pe site-ul dvs. web (de exemplu, fonturi încărcate de pe Google sau un videoclip de pe YouTube) și nu preluați rezoluțiile DNS corespondente ale acestora.
Ce este Pre-preluarea DNS?
Definiția pe scurt:
Cu prefetch, puteți spune browserului să aducă resursele pe care credeți că ar putea avea nevoie utilizatorul ulterior ca parte a unei viitoare navigări sau interacțiuni, dacă utilizatorul ia măsurile pe care le așteptați. Aceste resurse vor fi preluate cu cea mai mică prioritate din browser, atunci când pagina curentă este terminată de încărcare și există lățime de bandă disponibilă.
În special, cu pre-preluarea DNS puteți spune browserului să efectueze căutări DNS pe o pagină în timp ce utilizatorii o navighează: atunci când resursele externe sunt solicitate, rezoluția DNS ar fi fost deja procesată, reducând latența.
Pre-preluarea cererilor DNS vă poate oferi un timp minor de încărcare și o puteți aplica cu ușurință (și puteți face PageSpeed mulțumit) cu WP Rocket:
Preîncărcați Solicitările Cheie
Acest avertisment se referă la strategia de optimizare a căii critice de redare (CRP). CRP este util pentru a prioritiza unele resurse înaintea altora și pentru a decide ordinea de încărcare a acestora.
În acest fel, browserul poate încărca o pagină mai repede.
Pentru a remedia această recomandare Google PageSpeed Insights, trebuie să declarați linkuri de preîncărcare în HTML, astfel încât browserul să știe că trebuie să descarce resurse critice cât mai curând posibil.
WP Rocket vă permite să aveți grijă de acest avertisment numai pentru fișierele CSS: activând opțiunea Optimizare livrare CSS, WP Rocket adaugă atributul rel = „preload” la fișierele CSS.
Mai multe informații despre modul în care WP Rocket gestionează CSS critice, aici.
Amânați Imagini în Afara Ecranului
Imaginile în afara ecranului sunt cele care nu apar atunci când utilizatorul deschide o pagină. Acestea sunt așa-numitele imagini de mai jos.
Deoarece utilizatorii nu le pot vedea atunci când încarcă o pagină, nu are rost să le descarce ca parte a procesului de încărcare.
Cu această recomandare, Google PageSpeed Insights vă solicită să amânați încărcarea imaginilor de pe ecran într-o etapă ulterioară, și anume atunci când utilizatorul derulează pagina și solicită conținutul de mai jos.
Pentru a amâna imaginile de pe ecran, le puteți încărca LazyLoad.
LazyLoad este o tehnică care vă permite să amânați încărcarea imaginilor.
Puteți să vă descărcați manual fișierele de imagine sau să utilizați un plugin în schimb.
Dacă optați pentru a doua opțiune, aveți două alternative excelente:
WP Rocket, care include opțiunea de a vă descărca lazyload imaginile:
Alegând una dintre cele două, Google PageSpeed Insights va fi satisfăcut și ar trebui să remedieze avertismentul cu privire la imaginile de pe ecran care nu sunt amânate.
Rețineți că, în ceea ce privește LazyLoad de la WP Rocket, nu toate imaginile pot fi încărcate Lazy în acest moment, de ex. imagini de fundal care sunt încărcate din foi de stil. Pentru a afla unde se aplică aceste excepții, consultați documentația pluginului.
Dimensiunea Corectă a Imaginilor
Stăpânirea artei optimizării imaginii este ceva ce puteți învăța cu ușurință. Vă va permite să obțineți o îmbunătățire imensă a vitezei paginii, iar Google PageSpeed Insights va observa cu siguranță și vă va recompensa pentru asta!
Codificați Eficient Imaginile și Optimizați Imaginile
Codificarea imaginilor este procesul de salvare a imaginilor într-un format mai eficient și comprimat. Optimizarea imaginilor este setul de măsuri necesare pentru ca imaginile dvs. să se încarce mai repede, cum ar fi:
- Alegeți formatul de imagine potrivit
- Reduceți dimensiunea fișierului
- Comprimă-le cu atenție
Pentru a avea grijă de strategia dvs. de optimizare a imaginii cu un instrument unic și eficient, puteți utiliza instrumentul gratuit Imagify. Vă va ajuta să lucrați la fișierele dvs. și să remediați majoritatea avertismentelor Google PageSpeed Insights referitoare la imagini.
Serviți Imagini în Formatul Next-Gen
Cu această recomandare, PageSpeed vă solicită să utilizați formate de imagine mai moderne, cum ar fi JPEG 2000, JPEG XR și WebP.
Aceste formate de imagine sunt superioare fraților lor „mai mari”, imaginilor JPEG și PNG, în ceea ce privește calitatea și caracteristicile de compresie: sunt capabile să se încarce mai repede și să consume mai puține date mobile.
Pluginul de optimizare a imaginilor Imagify poate converti imagini în formate WebP, așa că nu ezitați să profitați de acesta!
WP Rocket va oferi asistență WebP foarte curând (va fi adăugat la una dintre următoarele noi versiuni majore).
După cum puteți vedea, WP Rocket este cel mai simplu mod de a aborda cele mai importante oportunități Google PageSpeed Insights în câteva clicuri.
Să trecem la partea următoare!
Recomandări Google PageSpeed Insights: Diagnostice
Toate recomandările incluse în secțiunea Diagnostic se concentrează pe performanță și pe cele mai bune practici care pot ajuta la îmbunătățirea acesteia.
Să vedem care sunt cele mai frecvente recomandări Google PageSpeed Insights din această secțiune și ce puteți face pentru a le remedia.
- Asigurați-vă Că Textul Rămâne Vizibil în Timpul Încărcării Webfont
- Minimizați Lucrul cu Firul Principal și Reduceți Timpul de Execuție JavaScript
- Serviți Active Statice cu o Politică Eficientă în Memoria Cache
- Evitați Încărcăturile Utile de Rețea Enorme
- Evitați Dimensiunea DOM Excesivă
- Minimizați Adâncimea Cererilor Critice
Asigurați-vă Că Textul Rămâne Vizibil în Timpul Încărcării Webfont
Acest avertisment Google PageSpeed Insights se referă la încărcarea fonturilor web, care sunt adesea fișiere mari, care încetinesc mult paginile.
Unele browsere, în așteptarea încărcării fonturilor, ascund textul în pagină, producând efectul cunoscut sub numele de „flash de text invizibil”.
Dar această soluție nu facilitează experiența utilizatorului: soluția ideală, în acest caz, ar permite utilizatorilor să vadă imediat textul folosind un font de sistem.
Acest lucru va produce așa-numitul efect „flash de text nestilat”: dar implicit la un font de sistem, browserul va economisi timp important de încărcare, deoarece va folosi un font pe care îl are deja în sistemul său.
Odată ce fontul web pe care l-ați ales inițial va fi descărcat complet, acesta va fi vizibil pentru utilizator; nimeni nu va trebui să aștepte să privească un text invizibil pe pagină, dacă optați pentru o soluție „flash de text nestilizat”.
WP Rocket 3.3.5 a introdus suport pentru Google Fonts folosind proprietatea de afișare a fontului „swap”:
Aceasta înseamnă că, dacă utilizați fonturi Google, WP Rocket vă va ajuta să aveți grijă de efectul „flash de text nestilizat”.
Combinarea Google Fonts este activată în mod implicit la activare.
Minimizați Lucrul cu Firul Principal și Reduceți Timpul de Execuție JavaScript
Aceste recomandări au legătură cu utilizarea scripturilor JS și impactul acestuia asupra performanței de încărcare a paginilor dvs.
JS are un cost ridicat pentru site-ul dvs. web: odată descărcat, acesta trebuie „citit” și „înțeles” de browser (analizat și compilat) și apoi este executat în browser. Cu cât este mai mult JS pe pagina dvs., cu atât browserul va avea nevoie de mai mult timp pentru a-l analiza, compila și executa.
Conform notei despre „Minimizarea funcției principale”, așa o definește Google PageSpeed Insights:
Luați în considerare reducerea timpului petrecut analizând, compilând și executând JS. Este posibil să găsiți livrarea unor sarcini utile JS mai mici în acest sens.
Pentru a reduce timpul de execuție JS și a reduce la minimum lucrul cu firul principal, trebuie să eliminați JavaScript neutilizat.
Puteți utiliza pluginuri specifice care vă pot ajuta să eliminați JS nedorite din paginile dvs., cum ar fi:
Utilizați-le cu atenție și consultați-vă cu dezvoltatorii și/sau documentația lor înainte de a le utiliza.
Serviți Active Statice cu o Politică Eficientă în Memoria Cache
O politică de cache este setul de pași care trebuie implementați pentru a vă asigura că paginile dvs. sunt stocate în cache și se încarcă rapid.
Așa cum am văzut deja în ghidul despre timpul de încărcare și stocarea în cache, există mai multe straturi de cache disponibile pe care ar trebui să le auditați și să le aplicați, ori de câte ori este posibil, site-ului dvs.: cache de pagini, cache de la server, cache de obiecte și cache de browser.
Când Google PageSpeed Insights solicită să difuzeze materiale statice cu o politică eficientă în memoria cache, se referă la stocarea în cache a browserului.
Dacă utilizați WP Rocket, nu trebuie să vă faceți griji în legătură cu acest lucru: pluginul aplică automat anteturile de Expirare necesare în fișierul htaccess. Dacă utilizați un server NGINX, nu veți avea fișierul htaccess, astfel încât antetele menționate mai sus nu vor fi aplicate. Cu toate acestea, WP Rocket funcționează foarte bine pe serverele NGINX: aici puteți găsi mai multe informații despre aceasta.
Evitați Încărcăturile Utile de Rețea Enorme
Aici Google PageSpeed Insights vă solicită să reduceți numărul de solicitări de rețea.
Solicitările de rețea au un impact mare asupra vitezei de încărcare a paginii, dar afectează și experiența utilizatorului, rata de respingere și SEO.
Pentru a remedia acest avertisment și a reduce cantitatea de solicitări HTTP de pe site-ul dvs., puteți urma acest ghid.
Evitați Dimensiunea DOM Excesivă
Elementele DOM sunt toate etichetele unei pagini (cum ar fi DIV, HTML, BODY etc.).
Conform Ghidului pentru dezvoltatori web Google, un arbore DOM optim include aceste caracteristici:
- Are mai puțin de 1500 de noduri în total.
- Are o adâncime maximă de 32 de noduri.
- Nu are un nod părinte cu mai mult de 60 de noduri copil.
În general, pentru a reduce o dimensiune DOM excesivă, trebuie să examinați temele și pluginurile pe care le utilizați: puteți face acest lucru adresându-vă direct designului site-ului dvs. sau solicitând ajutor unui dezvoltator.
Minimizați Adâncimea Cererilor Critice
Această notă se referă la lanțurile de solicitări critice, adică lista resurselor care sunt încărcate cu o prioritate ridicată pe o pagină. Acesta nu este un audit pe care trebuie să îl „treceți” sau să „eșuați”, dar dacă îl abordați, veți putea îmbunătăți performanța de încărcare a paginii pe site-ul dvs.
Google PageSpeed Insights sugerează abordarea acestui audit „reducând lungimea lanțurilor, reducând dimensiunea descărcării resurselor sau amânând descărcarea resurselor inutile pentru a îmbunătăți încărcarea paginii”.
Cu WP Rocket, puteți îmbunătăți factorul de minimizare a adâncimii cererii critice, eliminând CSS/JS care blochează redarea; aceasta înseamnă activarea opțiunilor pe care le-am prezentat deja mai sus:
- Optimizați livrarea CSS
- Încărcați JavaScript amânat
- Combinați fișiere JavaScript
Concluzie
În acest articol ați aflat cum să interpretați și să abordați recomandările Google PageSpeed Insights depuse în secțiunile Diagnostic și Oportunități.
Învățând să îi interpretați avertismentele, veți putea să verificați starea de sănătate a site-ului dvs. web și să înțelegeți cum să vă îmbunătățiți scorul PageSpeed și Core Web Vitals.
Economisiți timp și lăsați-l pe WP Rocket să facă treaba pentru dvs. WP Rocket va aplica automat 80% din cele mai bune practici de performanță web. Nici măcar nu trebuie să setați ceva. Veți vedea o îmbunătățire instantanee a vitezei și a scorului dvs. PageSpeed imediat – nu sunt necesare cunoștințe tehnice, garantat!
