Ghidul suprem pentru optimizarea vitezei paginii pentru WordPress

Urmând acest ghid, veți învăța toate tehnicile pentru a accelera drastic un site WordPress. Iată cele mai importante motive pentru care un timp mare de încărcare a paginii în WordPress aduce beneficii afacerii dvs.: utilizatorii nu vă vor abandona site-ul, vor cheltui mai mult timp și bani acolo, iar motoarele de căutare îți vor clasa site-ul mai bine în rezultatele căutării. Gata?

Introducere

Internauții nu au prea multă răbdare, când vine vorba de timpii de încărcare a paginii. Facem clic pe un link sau introducem URL-ul și așteptăm o secundă, două, trei și gata. Statisticile Google arată că 50% dintre utilizatori se așteaptă ca un site mobil să se încarce în 2 secunde și 53% utilizatori sunt probabil să abandoneze pagina, dacă se încarcă mai mult de 3 secunde. Este o perioadă foarte scurtă, dacă ai în vedere că timpul mediu de încărcare a unei pagini de start, pe un dispozitiv mobil, este de 19 secunde (pe o rețea 3G). Timpii de încărcare pe computere sunt mai rapidi și un timp mediu de încărcare este de 5 secunde, dar este încă prea lung.

Luarea ca referință a benchmark-urilor site-ului desktop nu mai este o scuză. Pentru majoritatea site-urilor web de astăzi, cea mai mare parte a traficului provine de pe dispozitive mobile. În acest articol, vom arunca o privire completă asupra celor mai recente tehnici de optimizare a vitezei paginii pentru site-urile WordPress. Urmând acest ghid, veți putea accelera site-ul WordPress, reducând drastic timpii de încărcare pentru dispozitive mobile și desktop și, prin urmare, îl faceți mult mai ușor de utilizat.

Dacă nu aveți un site WordPress, nu închideți încă ghidul. Majoritatea tehnicilor de optimizare a vitezei explicate în acest ghid pas cu pas pot fi aplicate oricărui tip de site web.

Dacă site-ul dvs. a fost creat având în vedere monetizarea, fie că este un magazin de comerț electronic online sau dacă vindeți servicii online/offline, pierderea potențialilor clienți nu este niciodată un lucru bun. Practic lași bani pe masă. Îmbunătățirea vitezei paginii dvs. ar trebui să aibă un impact pozitiv asupra câștigurilor dvs. Fapt amuzant: campania de strângere de fonduri Obama a crescut conversia donațiilor cu 14% prin optimizarea site-ului și reducerea timpului de încărcare a paginii de la 5 secunde la 2 secunde.

În calitate de proprietari sau dezvoltatori de site-uri web, dorim ca vizitatorii noștri să aibă cea mai bună experiență. Creăm site-uri grozave cu o funcționalitate extraordinară, dar de obicei uităm de importanța unui site web rapid. Un site web rapid creează încredere vizitatorilor noștri, crește șansa ca un vizitator să rămână mai mult timp pe pagina noastră și, prin urmare, ar putea cheltui mai mult. Pe de altă parte, dacă site-ul nostru este lent, vizitatorii ar putea să renunțe și nici măcar nu vor vedea site-ul nostru minunat, cu oferta noastră la fel de minunată.

Dacă motivele de mai sus nu au fost suficient de convingătoare, mai am unul. Google și alte motoare de căutare (SE) au dezvăluit că un site web lent va împinge clasamentul în motoarele de căutare, lăsându-vă cu și mai puțini vizitatori. Deci, a avea un site web rapid înseamnă că Google vă va plăcea mai mult și acest lucru vă poate schimba drastic clasamentul SE în favoarea dvs.

Desigur, timpii de încărcare variază din câteva motive, de exemplu, viteza de internet a vizitatorului, locația vizitatorului și cât de „greu” sau umflat este site-ul nostru. Nu putem face nimic cu privire la viteza de internet a vizitatorului, dar ne putem ocupa de alte aspecte și putem îmbunătăți experiența pentru toată lumea. În acest ghid, ne vom uita la cum să optimizăm site-ul nostru WordPress pentru viteză, pentru a-l face rapid și slab, așa că haideți!

Cuprins

• Fundamente
  • Găzduire WordPress
    • Gazduire partajata
    • Găzduire gestionată
    • VPS sau servere dedicate
  • Tema WordPress
  • Pluginuri WordPress
• Pașii de optimizare a vitezei paginii WordPress
  • Instrumente de viteză a paginii
    • Google PageSpeed ​​Insights
    • GTMetrix
    • Test de viteză a site-ului Pingdom
    • Testul paginii web
  • Optimizarea imaginii
    • Mini ghid pentru optimizarea imaginii
    • Imagini optimizate pentru viteza paginii Google
    • Alte îmbunătățiri ale imaginii
    • Îmbunătățiri ale studiului de caz
  • Memorarea în cache a browserului
  • Comprimarea resurselor (Gzip sau Deflate)
  • Eliminați fișierele JS sau CSS care nu sunt necesare
  • JavaScript și CSS care blochează redarea în conținutul de deasupra paginii
  • Memorarea în cache pe partea serverului
    • WP Rocket (plugin de cache pe partea serverului)
  • Rețeaua de livrare de conținut
    • Cloudflare
• Rezultate finale
• Concluzie

Fundamente

Pentru a vă face site-ul cât mai rapid posibil, trebuie să îl construim pe baze bune. La fel cum construiești o casă, nu vrei să o construiești pe nisipuri mișcătoare și să ai probleme chiar la început. Vrei să-l construiești pe fundații solide, așa că va rezista mult timp fără probleme. Cele trei lucruri principale de verificat sunt:

• gazduire
• tema WordPress
• pluginurile WordPress

Găzduire WordPress

Gazduirea este insasi baza site-ului tau WordPress si, prin urmare, este o componenta cruciala, care nu trebuie trecuta cu vederea, chiar daca ai deja o gazduire. Trecerea la un furnizor de găzduire mai bun va accelera timpul de încărcare WordPress cu până la câteva secunde.

Selectarea gazdei web potrivite este importantă și nu ar trebui să vă bazați decizia pe prețul găzduirii. De obicei, cu prețuri mici, obții performanțe scăzute și asta vrem să evităm. Să ne uităm la opțiunile de găzduire disponibile și să explicăm care sunt diferențele.

Gazduire partajata

Aceasta este cea mai răspândită soluție de găzduire pentru că este ieftină. Dar, după cum am spus, cu prețuri mici, obțineți performanțe scăzute. Pe o găzduire partajată, există mii de conturi pe un server fizic, ceea ce înseamnă că resursele serverului sunt partajate între toate site-urile web create de aceste conturi de găzduire.

Imaginați-vă o pizza mare (hmmm?…), fiecare site web de pe o găzduire partajată primește o bucată foarte mică. Dar pentru că site-ul tău are mulți vizitatori, are nevoie de mai multă pizza! Îi mai este foame, dar nu mai este pizza :(, pentru că și alte site-uri sunt foame...

Dacă a obține doar o felie mică de pizza nu este suficient de rău, atunci potențialele riscuri de securitate vor înrăutăți probabil cazul de găzduire partajată. Un site web infectat pe o găzduire partajată ar putea cauza probleme de viteză și performanță pentru întregul server și poate pune în pericol și site-ul dvs. WordPress.

Configurația serverului pe găzduirea partajată este foarte limitată și nu aveți prea mult spațiu pentru a o configura după bunul plac. Serverul este preconfigurat la setări specifice, de obicei foarte generice, și ar trebui să ruleze WordPress fără probleme. Problemele apar mai târziu, sub formă de epuizare a memoriei sau într-o formă de setare PHP restrânsă, de care un plugin ar trebui să funcționeze corect.

Nu pot recomanda cu adevărat găzduire partajată pentru niciun site web de afaceri, dar dacă ar trebui, ar trebui să spun, este cel mai potrivit pentru site-urile cu trafic foarte scăzut.

Găzduire gestionată

Acesta este un upgrade important de la găzduirea partajată, deoarece site-ul dvs. primește o bucată mai mare de pizza (o felie întreagă de pizza, da!), dar costă mai mult.

Serverele de pe găzduirea gestionată sunt mai puțin populate și asta se traduce în mai multe resurse de server pentru site-ul dvs. Aceste servere sunt de obicei optimizate pentru a rula WordPress cât mai bine posibil, au mai multă memorie, putere de procesare și un sistem de stocare în cache.

Instalarea hardware și software și configurarea acestor servere de găzduire gestionate sunt realizate de compania de găzduire (de unde și cuvântul „administrat”). Alte servicii, cum ar fi backup-uri, echilibrare de încărcare, recuperare în caz de dezastru și verificări/prevenții de securitate, pot face, de asemenea, parte din găzduirea gestionată, în funcție de oferta companiei de găzduire.

Găzduirea WordPress gestionată este recomandată pentru site-urile web cu trafic scăzut până la mediu.

VPS sau servere dedicate

Dacă rămânem la analogia cu pizza, cu VPS (Virtual Private Server) primești câteva felii de pizza, dar nu pizza întreagă și cu servere dedicate, primești pizza întreagă.

Aceasta înseamnă că, cu serverele dedicate, aveți controlul întregului server cu toate resursele sale, iar cu VPS-ul, obțineți o parte din server pentru că încă partajați mașina serverului fizic cu alții. Când vine vorba de optimizarea vitezei paginii pentru WordPress, nu există limitări la nivelul serverului atunci când vă configurați WordPress fie pe VPS, fie pe un server dedicat. Știți exact câte resurse sunt disponibile pentru site-ul dvs. și îl puteți configura după bunul plac. Puteți implementa funcții de ultimă oră înainte ca furnizorii standard de găzduire să le accepte (care pot rămâne cu ani în urmă cu tehnologia software-ului serverului).

Ambele opțiuni oferă un control și resurse mai mari, dar vin și la prețuri mai mari și necesită mai multe abilități pentru a le configura și menține pe termen lung. Serverele VPS/Dedicate pot fi, de asemenea, gestionate, deci nu trebuie să fiți un guru al serverului pentru a utiliza unul. Sunt potrivite pentru site-urile web cu volum mare de trafic.

Dacă nu sunteți sigur la ce găzduire să alegeți, aș sugera opțiunea de găzduire WordPress gestionată, care ar trebui să poată, de asemenea, să se extindă (aloca mai multe resurse de pe server), dacă este necesar.

O optimizare gratuită a site-ului web, pe care o oferă până acum orice găzduire decentă, este actualizarea versiunii PHP la 7.x. Dacă site-ul dvs. WordPress rulează pe PHP mai mic de 7, cum ar fi 5.6 sau chiar mai vechi, atunci vă rugăm să contactați asistența pentru găzduire și să le cereți să-l actualizeze la cea mai recentă versiune stabilă. Dacă sunteți în căutarea unei noi găzduiri, puteți cere sprijinul acestora, dacă au PHP versiunea 7.x. Ar trebui să răspundă cu toții cu un „da”, dar dacă nu au opțiunea de a folosi PHP 7.x, atunci aș recomanda să stea departe de ei. PHP 7 este, în comparație cu versiunile mai vechi, o mare îmbunătățire când vine vorba de viteză și performanță și este foarte ușor să treceți la el, așa că profitați de el.

O alegere bună de găzduire vă va scuti de multe dureri pe drum și, dacă întâmpinați o problemă, un serviciu bun de asistență pentru clienți ar trebui să vă poată ajuta, așa că aș ține cont și de a alege o gazdă care să ofere un suport bun. . Un truc rapid pe care îl puteți utiliza: adresați-le o întrebare înainte de cumpărare și monitorizați timpul de răspuns, atitudinea și nivelul de profesionalism.

Tema WordPress

Când alegem o temă WordPress pentru site-ul nostru, începem întotdeauna cu designul temei și este în regulă. Mai întâi ar trebui să alegem câteva teme care ne plac, pentru că ne dorim ca site-ul nostru să fie minunat și un design grozav este primul lucru pe care îl vede un vizitator. Al doilea lucru este probabil funcționalitatea temei. Tema sau pluginurile recomandate pentru tema oferă funcționalitatea pe care o dorim? Dacă se întâmplă, grozav! Suntem în afaceri! Ceea ce uităm aproape întotdeauna este să verificăm cât de repede se încarcă tema.

Putem testa timpul de încărcare a paginii demo a temei și vom vedea rapid dacă tema este optimizată pentru viteză. Vom verifica ce instrumente de viteză a paginii să folosim și cum să le folosim într-o secțiune de mai jos, dar pentru moment, vreau doar să vă anunț despre acest pas suplimentar de verificare a temei, înainte de cumpărare. Desigur, timpul de încărcare a paginii demo poate fi îmbunătățit, așa că dacă nu obțineți un scor perfect, nu vă faceți griji, nicio temă WordPress nu va obține un scor perfect de 100%, cu excepția cazului în care are foarte puțin conținut pe pagina sa demo. Ca regulă generală, ar trebui să căutați teme care nu sunt în cifrele roșii (scor 50 sau mai mic în instrumentele de viteză a paginii).

Se reduce la un echilibru bun între designul temei și funcționalitatea față de viteza temei. De exemplu, o temă WordPress goală, cu un pic de text, se va încărca foarte repede, dar o temă umflată cu multă funcționalitate (dintre care majoritatea s-ar putea să nu ai nevoie), cu mult conținut multimedia, se va încărca mult mai lent. Atingerea acel punct favorabil este scopul, atunci când selectați o temă WordPress bună și performantă.

Pluginuri WordPress

O întrebare pe care o văd că apare foarte des este: „Câte plugin-uri sunt prea multe?”. Nu este o problemă în numărul de pluginuri WordPress, ci în calitatea codului și impactul pe care îl are pluginul asupra sistemului. Puteți avea peste 50 de pluginuri active, fiecare dintre pluginuri având grijă de o mică funcționalitate specifică (cu cod bun) și site-ul va rula OK. Pe de altă parte, puteți avea 5 plugin-uri active și unul dintre ele ar putea să vă blocheze sistemul, făcându-vă WordPress încet.

Trecerea peste codul fiecărui plugin este o idee bună, dar „nimeni nu are timp pentru asta”, plus că veți avea nevoie de cunoștințe bune de programare pentru a face acest lucru. Dacă mergi pe acest drum, lucrurile la care trebuie să fii atent sunt plugin-urile care pun multe resurse externe în coadă, fac multe solicitări HTTP, fac interogări inutile (neoptimizate) baze de date și așa mai departe (practic orice ar încetini site-ul WordPress, fără un motiv corect în spate).

Ceea ce aș recomanda este să nu instalați și să nu activați fiecare plugin de care credeți că aveți nevoie.

Mai întâi gândiți-vă, are site-ul dvs. într-adevăr nevoie de această funcționalitate suplimentară? De exemplu, dacă aveți nevoie de un cod scurt pentru buton, verificați documentația temei, poate că tema are un cod scurt pentru acesta și nu trebuie să instalați și să activați un întreg plugin pentru pachetul de coduri scurte doar pentru a utiliza un cod scurt pentru un singur buton. Acesta este un exemplu banal, dar vreau să vă gândiți înainte de a instala și activa noi pluginuri. Fiecare plugin neverificat ar putea face site-ul dvs. mai greu și, prin urmare, mai lent, plus ar putea duce la o încălcare a securității, dacă pluginul este prost codificat sau neîntreținut.

În cele din urmă, un lucru grozav pe care îl puteți utiliza, atunci când selectați pluginul, este o cotă globală mare de WordPress și, în consecință, o comunitate uriașă. Cu lipsa cunoștințelor de codificare, o regulă de bază bună este să rămâneți cu pluginurile populare cu o mulțime de instalări active, scor mediu bun de evaluare și recenzii pozitive. Colegii WordPress vă vor face selecția mult mai ușoară!

Pașii de optimizare a vitezei paginii WordPress

Înainte de a începe cu optimizarea, aș dori să menționez câteva lucruri.

În primul rând, ar trebui să creați o copie de rezervă a site-ului dvs. WordPress, iată un ghid despre cum să faceți asta cu un plugin WordPress. Mai bine să ai grijă decât să-mi pară rău!

În al doilea rând, v-aș avertiza să nu vă așteptați la scorul 100/100 în instrumentele de viteză a paginii pe care le vom folosi în ghidul nostru. A merge după scorul 100/100 nu este o idee bună sau chiar posibilă pe unele site-uri. Totul depinde de ce fel de conținut afișează site-ul tău. Dacă un site are doar un pic de text și o imagine, atunci sigur, un scor perfect este total posibil. Dar dacă aveți o pagină lungă, cu mult conținut multimedia și alte integrări de aplicații terță parte, cum ar fi Google Maps și așa mai departe, atunci scorul 100 nu este în vizorul dvs. și nici nu ar trebui să îl urmăriți.

De ce nu este o idee bună să alegeți 100/100? Dacă urmați instrucțiunile instrumentelor de viteză a paginii și optimizați totul așa cum se spune, este posibil ca site-ul dvs. să nu funcționeze corect. Dacă mutați toate fișierele JS sau CSS care blochează în subsol, atunci va apărea intermitent CSS (întâi ar apărea conținutul nestil, iar când se va încărca CSS, site-ul ar „flash” la locul său), același lucru s-ar întâmpla cu codul JS. , care ar modifica orice elemente DOM după ce codul JS s-ar încărca.

S-ar putea să-ți distrugi site-ul, dacă urmezi orbește instrucțiunile și continui să-ți optimizezi site-ul WordPress pentru un timp de încărcare mai bun, doar pentru a obține scorul perfect. Scorul perfect al vitezei paginii este doar un număr, care de fapt nu contează, dacă vizitatorii dvs. ajung cu un site stricat. Trebuie să căutăm echilibrul dintre viteza paginii și experiența utilizatorului.

Pentru demonstrarea optimizării vitezei paginii WordPress, vom folosi contul meu de găzduire partajată și tema noastră medicală WordPress (cu pluginurile recomandate pentru tema). Da, da, știu că practic am spus să nu folosesc o găzduire partajată, dar vom vedea de ce este capabil și care sunt limitările, plus acesta este doar un test de optimizare a vitezei paginii, nu un site WordPress real de afaceri.

Am instalat cea mai recentă versiune de WordPress, tema MedicPress, toate pluginurile recomandate pentru teme și am importat conținutul demonstrativ. Acesta este punctul nostru de plecare pentru site-ul de testare.

Instrumente de viteză a paginii

Optimizarea vitezei paginii poate fi dificilă, dar, din fericire, există instrumente online care ne ușurează viața și ne sfătuiesc ce să facem, pentru a îmbunătăți viteza site-ului nostru.

Prima regulă de optimizare a WordPress pentru viteză este următoarea: măsurați întotdeauna!

Rulați instrumentele (sau cel puțin unul dintre ele), pe care le vom arunca o privire în secțiunea de mai jos, după fiecare pas de optimizare și urmăriți îmbunătățirile. În acest fel, vei ști care sarcini aduc cele mai mari îmbunătățiri. De asemenea, ar trebui să rulați teste de mai multe ori, pentru a vedea timpul mediu real de încărcare.

Paginile se încarcă diferit, în funcție de locul unde se află serverul de găzduire. De exemplu, dacă serverul dvs. este situat în America de Nord și vizitatorul este din Europa, pagina se va încărca mai lent pentru el decât pentru un vizitator canadian. Această problemă poate fi rezolvată cu un CDN (Content Delivery Network), dar ne vom uita la asta puțin mai târziu în articol. Deocamdată, am vrut doar să subliniez că această problemă este prezentă pentru vizitatorii din întreaga lume și, de asemenea, pentru instrumentele de optimizare a vitezei paginii. Unele instrumente vă permit, de asemenea, să efectuați testul din diferite locații, astfel încât să puteți vedea cum afectează acest lucru timpul de încărcare.

Instrumentele pentru viteza paginii pe care le vom analiza sunt:

• Google PageSpeed ​​Insights
• GTmetrix
• Test de viteză a site-ului Pingdom
• WebPageTest

Există și alte instrumente, dar acestea sunt cele mai populare și vom rămâne cu ele.

Google PageSpeed ​​Insights

După cum puteți vedea din titlul acestui instrument, acesta este un produs Google. Pe lângă scor (divizat în desktop și mobil) și instrucțiunile utile despre ce trebuie făcut pentru a îmbunătăți timpul de încărcare a paginii, putem trage și o concluzie despre ceea ce îi place lui Google să vadă pe un site web. Ce lucruri dorește să fie optimizate pe un site web pentru a se clasa bine în rezultatele motorului de căutare.

Dacă aveți imagini neoptimizate sau fișiere de resurse (JS sau CSS), acesta va genera un fișier zip cu omologii lor optimizați, pe care îl puteți înlocui pe serverul dvs. Destul de îngrijit, nu? Ne vom uita la optimizarea imaginii și a codului mai târziu, doar să știți că Google PageSpeed ​​vă poate ajuta cu asta.

Google PageSpeed ​​Insights nu are multe informații detaliate, ca și alte instrumente, dar este un bun punct de plecare, care acoperă toate aspectele importante ale optimizării vitezei paginii. Acesta enumeră pașii care vă vor îmbunătăți cel mai mult site-ul.

Am rulat acest instrument cu adresa URL a site-ului nostru de testare și am obținut un scor de 71 pentru desktop și 67 pentru mobil, așa că este loc de îmbunătățire. Lista de sugestii posibile de optimizare include:

• Activați compresia (comprimarea resurselor cu gzip sau deflate),
• optimizarea imaginilor,
• reduce timpul de răspuns al serverului,
• eliminați JavaScript și CSS care blochează redarea în conținutul de deasupra paginii,
• reduceți JavaScript.

GTmetrix

Acest instrument vă oferă informații mai detaliate despre ce lucruri sunt optimizate și care nu. Fiecare detaliu de optimizare este listat și evaluat pe o scară de la 0 la 100. Lista este ordonată după importanță, așa că dacă urmați sarcinile de sus în jos și le optimizați pe cele care nu au un scor 100%, veți fi pe calea bună pentru a accelera cât mai repede site-ul WordPress.

Folosind instrumentele de testare PageSpeed ​​și YSlow, GTmetrix generează scoruri pentru pagina dvs. și afișează sarcinile care trebuie îmbunătățite. O caracteristică plăcută a acestui instrument este și raportul Waterfall, care va reprezenta grafic modul în care se încarcă site-ul dvs. și puteți identifica blocajele mai repede. În imaginea de mai jos, puteți vedea că găzduirea mea partajată lentă a durat 1,13 secunde pentru a răspunde cu primele informații. Este mult prea lung, dar vom putea îmbunătăți asta.

De asemenea, vă puteți testa pagina din 7 locații diferite din lume, ceea ce este frumos și, de asemenea, un lucru important de testat, pe care îl vom vedea mai târziu în articol.

Am rulat instrumentul GTmetrix (locație: Vancouver, Canada) pe site-ul nostru de testare și am obținut un scor PageSpeed ​​de 77 și un scor YSlow de 71. Cu acest instrument, obținem și aceste informații utile:

• Timp de încărcare completă: 3,1 s,
• Dimensiunea totală a paginii: 803KB
• Cereri: 54

Cel mai mult îmi place instrumentul GTmetrix, deoarece obțineți o mulțime de informații relevante într-un singur loc. Vom folosi în principal instrumentul GTmetrix pentru a măsura progresul nostru de optimizare în acest ghid.

Test de viteză a site-ului Pingdom

Pingdom este un alt instrument, care afișează informațiile de optimizare puțin diferit. Obțineți aceleași date rezumative de bază ca pe instrumentul GTmetrix (fără scorul YSlow). Cu Pingdom, aveți opțiunea de a testa viteza paginii în 4 locații diferite. Rezultatele sunt toate diferite pentru fiecare locație, ceea ce arată că locația serverului este importantă, dar vom putea îmbunătăți și asta (cu CDN mai târziu în articol). Vom folosi instrumentul Pingdom pentru a testa timpii de încărcare a paginii în cele 4 locații disponibile, deoarece testele Pingdom se desfășoară mai repede.

Pingdom afișează și câteva tabele interesante, cum ar fi dimensiunea conținutului sau numărul de solicitări, filtrate după tipul de conținut sau după domeniu și are și un raport în cascadă.

WebPageTest

Instrumentul WebPageTest are chiar mai multe opțiuni de configurare decât instrumentele anterioare. Are mai multe locații din care să aleagă, o viteză de internet poate fi selectată, puteți activa/dezactiva câteva opțiuni de browser și puteți testa anumite dispozitive.

Este un instrument bun, care afișează un raport detaliat în cascadă pentru fiecare rulare (în mod implicit face 3 rulări, dar îl puteți modifica în setări) și afișează o notă de la A la F pentru fiecare dintre acești factori de optimizare a vitezei:

• Timpul primului octet (timpul de răspuns),
• menținerea în viață activată,
• transfer comprimat (gzip),
• comprima imagini,
• cache conținut static,
• utilizarea eficientă a CDN-ului.

Puteți intra în detalii, verificând toate filele de rezultate, unde veți găsi o mulțime de informații utile. Aș folosi acest instrument, dacă aș avea nevoie de un raport detaliat sau dacă aș avea nevoie să testez o locație disponibilă pe site-ul lor, altfel cred că GTmetrix are informații mai concise.

Am rulat acest instrument pentru site-ul nostru de testare. Puteți vedea rezultatele în captura de ecran de mai jos:

Ne-am uitat la cele mai populare instrumente de viteză a paginii și am făcut testele inițiale de viteză a paginii, așa că acum suntem în sfârșit gata să începem optimizarea site-ului nostru WordPress. Pentru referință, acestea sunt rezultatele punctului de plecare din instrumentele de viteză a paginii pe care le vom folosi pentru a măsura progresul în optimizarea vitezei:

• Google PageSpeed ​​Insights
  • Mobil: 67
  • Desktop: 71
• GTmetrix
  • Viteza paginii: 77
  • YSlow: 71

Optimizarea imaginii

Acesta este probabil cel mai ignorat aspect al performanței site-ului și, în același timp, poate aduce cea mai mare îmbunătățire a vitezei site-ului dvs. Dacă nu te gândești niciodată la optimizarea imaginii înainte de a o încărca pe site-ul tău WordPress, atunci acesta este un prim pas grozav pentru optimizarea timpului de încărcare WordPress.

Încărcarea de imagini mari, neoptimizate, utilizate într-un loc mic de pe site-ul dvs. este un mare „nu nu”. Exemplu: aveți un slot de imagine care nu va fi mai mare de 600 x 400 px pe site-ul dvs. și încărcați o imagine de 1920 x 1080 px (sau chiar mai mare!). Acum, repeți această greșeală de câteva ori și site-ul tău va fi foarte lent.

Primul lucru de făcut este să redimensionați imaginea la dimensiunea potrivită. În exemplul nostru, slotul pentru imagine nu va fi niciodată mai mare de 600 x 400 px, așa că ar trebui să redimensionăm imaginea la acea dimensiune.

„Asta e, treaba gata, nu?” Nu. Putem îmbunătăți și mai mult imaginea. Există o mulțime de instrumente, care optimizează (comprimă) imaginea fără a-și pierde calitatea (ochii noștri nu pot detecta pierderea calității cu aceste instrumente). Acest lucru va reduce, de asemenea, drastic dimensiunea fișierului imagine, făcându-l mai rapid de încărcat.

Comprimarea imaginii se poate face manual sau cu pluginuri WordPress. Colegul meu Marko a scris un ghid fenomenal pentru optimizarea imaginilor, așa că vom folosi cunoștințele obținute din articolul său și vom trece rapid peste tehnicile pe care le poți folosi pentru a-ți optimiza imaginile.

Mini ghid pentru optimizarea imaginii

Alegeți formatul de imagine potrivit – cele mai populare formate de imagine pentru utilizare online sunt JPEG și PNG. Puteți economisi mult la dimensiunea fișierului imagine, selectând formatul corect de imagine (Marko a economisit 45% în articolul său). Ar trebui să utilizați:

• Formatul .jpg pentru fotografii, imagini cu degrade și imagini cu milioane de culori.
• Formatul .png pentru imagini cu culori limitate (logo-uri) și imagini cu transparență.

Redimensionați imaginile - După cum am menționat mai sus, ar trebui să redimensionați întotdeauna imaginile înainte de a le încărca pe site-ul dvs. WordPress. În primul rând, verificați cât de mare este spațiul în care veți folosi imaginea și redimensionați-l în consecință. Puteți redimensiona imaginile cu un program de manipulare a imaginilor, cum ar fi GIMP sau Photoshop.

Comprimați-vă imaginile - Acest lucru se poate face cu un instrument de compresie a imaginilor online sau cu un plugin WordPress:

Instrument de compresie online : Marko recomandă instrumentul online Optimizilla. Pur și simplu încărcați imaginile în aplicația Optimizilla și, odată ce procesul este finalizat, descărcați imaginile optimizate, pe care ar trebui să le încărcați apoi pe site-ul dvs. WordPress. Acest lucru sună puțin obositor, așa că, desigur, există un plugin WordPress, care poate simplifica acest proces.

Plugin de compresie a imaginii WP : Din nou, Marko a testat cele mai populare pluginuri de compresie a imaginii și a declarat câștigător: ShortPixel Image Optimizer. După ce instalați pluginul, va trebui să solicitați o cheie API pentru a utiliza pluginul (un proces foarte simplu). Setările implicite ale pluginului sunt grozave, așa că nu trebuie să configurați nimic, pur și simplu mergeți la Media -> Bulk ShortPixel și faceți clic pe butonul „Începeți optimizarea”. Orice imagine nou încărcată va fi, de asemenea, optimizată. Notă: versiunea gratuită a acestui plugin permite doar 100 de optimizări de imagine/lună, dacă aveți nevoie de mai multe, va trebui să treceți la planul lor plătit. Ne dorim ca clienții noștri să aibă acces la cele mai bune instrumente existente, așa că am colaborat cu ShortPixel, iar acum membrii noștri ProteusClub primesc și 1.000 de credite gratuite pentru a fi utilizate cu pluginul ShortPixel WordPress.

În cele din urmă, nu vă pot recomanda suficient să citiți întregul articol despre optimizarea imaginii în WordPress.

Imagini optimizate pentru viteza paginii Google

Aceasta este o modalitate alternativă de optimizare a imaginilor existente pe site-ul dvs. WordPress. Dacă ai urmat pașii de mai sus, în secțiunea Mini Ghid pentru Optimizarea imaginilor, atunci probabil că ai deja optimizat imagini și, prin urmare, Google PageSpeed ​​nu va avea nicio imagine pentru tine. Bună treabă! Puteți citi în continuare această secțiune cu scop informativ

Am menționat în introducerea instrumentului Google PageSpeed ​​că Google generează un fișier zip cu fișiere optimizate pe care le puteți utiliza pe site-ul dvs. Puteți descărca fișierul zip, făcând clic pe acest link:

În acest fișier zip, aveți un folder numit image , care conține imaginile optimizate. Le puteți încărca prin FTP sau prin intermediul programului de încărcare a fișierelor de găzduire. Înlocuiți/sobrescrieți imaginile în folderele de încărcare corecte (…/wp-content/uploads/…). După aceea, ar trebui să generați și versiunile mai mici (miniaturi) ale acestor imagini pe site-ul dvs. WordPress. Puteți face asta cu pluginul Regenerate Thumbnails.

Alte îmbunătățiri ale imaginii

În această secțiune ne vom uita la câteva îmbunătățiri suplimentare referitoare la imagini, de care putem profita, pentru a obține o performanță suplimentară.

Încărcare leneșă a imaginilor

Lazy Loading este o tehnică de încărcare a imaginilor, în care imaginile sunt încărcate asincron. Imaginile care nu sunt deasupra paginii nu sunt încărcate la încărcarea paginii (sunt încărcate după sau chiar numai atunci când sunt necesare). Aceasta înseamnă că imaginile care pot fi văzute în partea de sus a paginii sunt încărcate, în timp ce alte imagini (nevăzute) sunt încărcate după ce pagina se încarcă sau pe măsură ce utilizatorii derulează în jos pe pagină (la cerere). Dacă aveți o pagină lungă cu multe imagini, puteți economisi mult timp inițial de încărcare a paginii cu această tehnică.

Încărcarea leneră poate fi implementată cu un cod personalizat sau cu un plugin WP. Vom folosi pluginul de cache WP Rocket mai târziu și are și o funcție de încărcare leneșă.

Hotlinking imagini

Ce este hotlinkingul? Afișează o imagine care este găzduită pe un alt server. De exemplu, dacă ai o postare foarte populară și în acea postare, ai o imagine frumoasă. Un vizitator (hoț) poate copia adresa URL a sursei imaginii și o poate folosi pe propriul său site. Asta înseamnă că imaginea va fi solicitată și servită de pe serverul tău. Înmulțiți hoțul cu 100 și aveți mii de solicitări externe la care serverul dvs. trebuie să răspundă, ceea ce vă poate încetini serverul.

Aceasta nu este o optimizare directă a vitezei paginii, ci mai degrabă o optimizare a serverului. Puteți rezolva problema hotlinking-ului cu un cod din fișierul .htaccess. Poți să faci un pas mai departe (fii puțin rău) și să înlocuiești imaginea furată cu o altă imagine, poate nu atât de frumoasă :). Acest lucru se poate face și în fișierul .htaccess. Deschideți fișierul .htaccess pe serverul dvs. și adăugați acest cod la acesta. Înlocuiți site-ul dvs. web.com cu domeniul dvs., google.com cu orice alt domeniu, căruia doriți să-l permiteți să aibă acces la imaginile dvs. și înlocuiți http://replacing-stolen-image-url-goes-here.jpg cu adresa URL a imaginii pe care doriți să o afișați pentru orice imagini furate.

 RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?your-website.com [NC] RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC] RewriteRule \.(jpg|jpeg|png|gif)$ http://replacing-stolen-image-url-goes-here.jpg [NC,R,L]

Dacă nu doriți să înlocuiți imaginea furată cu imaginea personalizată, atunci utilizați acest cod. Aceasta va dezactiva imaginea de pe site-ul lor:

 RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?your-website.com [NC] RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC] RewriteRule \.(jpg|jpeg|png|gif)$ - [NC,F,L]

Îmbunătățiri ale studiului de caz

Să ne uităm la progresul pe care l-am făcut cu site-ul nostru de testare până acum, după optimizarea imaginilor. După cum știți, am importat date demonstrative pentru tema noastră medicală, pe care le folosim ca site de testare. Aceste imagini demonstrative foloseau formatele de fișiere corecte și erau deja dimensionate corect, așa că am putut sări peste acești doi pași. Dacă ar fi să încarc o nouă imagine, nu le-aș omite!

Deci, am instalat pluginul ShortPixel și am rulat optimizatorul în bloc. Pluginul a raportat o optimizare medie a imaginii de 38%. Grozav!

Am rulat instrumentul PageSpeed ​​Insights și Google a subliniat că unele dintre imagini pot fi comprimate și mai mult, așa că mi-am urmat propriul sfat, am folosit imaginile pe care mi le-a pregătit Google și le-am încărcat pe serverul meu prin FTP.

După ce imaginile au fost sortate, rezultatele instrumentelor de viteză a paginii au fost:

• Google PageSpeed ​​Insights
  • Mobil: 72
  • Desktop: 77
• GTmetrix
  • Viteza paginii: 81
  • YSlow: 71

Nu este o îmbunătățire mare, deoarece imaginile folosite în datele demo erau deja destul de optimizate, dar totuși suntem cu un pas mai aproape de obiectivul nostru. Dacă aveți imagini neoptimizate pe site-ul dvs., atunci acest pas de optimizare a imaginii vă va aduce o creștere uriașă a scorurilor și va reduce timpul de încărcare a paginii.

Memorarea în cache a browserului

Când un utilizator vă vizitează site-ul prin browser, trebuie să descarce toate resursele (HTML, imagini, JS, CSS, …) de pe serverul dumneavoastră pentru a afișa site-ul pentru vizitator. Când același utilizator vizitează o altă pagină de pe site-ul dvs., fișierele CSS și JS rămân de obicei aceleași, dar browserul le poate descărca din nou de pe serverul dvs., dacă nu aveți o configurație adecvată a serverului.

Proper caching headers and expiration dates should be set on your server, to allow static resources (JS, CSS and other files) to be stored in the browser's cache. This greatly improves the performance for returning visitors or for visitors who look at more than one page on your site.

Usually, the hosting servers have that already configured. If the page speed optimization tools report that you are missing the “Leverage browser caching” optimization or something like that, then it's best to contact your hosting company and let them know that you want to set-up browser caching for your site. They will be able to sort that out for you or at least point you to the right direction on how to do that yourself.

If you want to do things yourself, then you have to know that these browser caching settings vary, depending on the server type your hosting company is using. A good starting point for Apache servers is the .htaccess file of the HTML5 Boilerplate project (check out the “Expires headers” section). An nginx configuration is available as well.

My shared hosting account has browser caching already configured, so there is nothing for us to do on our test site.

Resource Compression (Gzip or Deflate)

Files sent from your server (HTML, JS, CSS, …) to your visitors can be compressed, so that they can be transferred faster, which improves your page speed. This can be done by enabling Gzip or Deflate compression on your server.

You can contact your hosting support and ask them, if they can enable resource compression for your site or you can configure it yourself, but be sure you know which server type your hosting is using. We can again look at the HTML5 Boilerplate project for some tips, they have default server configs for each of the major server types. For example, my hosting is using Apache server, so I found this compression config. I've copied the content of this config, I've located the .htaccess file for my WordPress site via the FTP (it's in the root of your WP installation) and I copied it at the end of the file.

I've re-run the page speed tools, after I've enabled the resource compression for my WordPress site and here are the results:

• Google PageSpeed Insights
  • Mobile: 83
  • Desktop: 90
• GTmetrix
  • PageSpeed: 96
  • YSlow: 82

As you can see, we've improved our scores by a fair amount and all we did, was enable the resource compression, which did not take a lot of time. By compressing resources, we change the total page size from 803KB to 476KB, which is awesome! We made another step towards an optimized site, so let's continue.

Remove unneeded JS or CSS files

If you are using plugins, which include JS or CSS files on all your pages and you actually are not using the plugin features on those pages, then it's best to remove them. This can be done with custom code in your child theme, but I would recommend that you use a plugin for that. It's much easier!

The plugin that will help us do that is WP Asset CleanUp. After you install and activate this plugin, go and edit your home page. Home pages are usually the “heavier” pages, so we will look at it for our example, but you can do that for other pages as well.

Under the page content editor, you will see a section called WP Asset CleanUp . This section will list all CSS and JS files that are included on your front page. Now, your job is to find out, which of these files are not needed on your WordPress front page.

For example, in our test site, we are using the Contact Form 7 plugin, but we are only using the contact form on our “Contact Us” page, so we can safely remove (unload) its CSS and JS files from our home page. I can do the same with WooCommerce assets, since we are not using them on our home page as well. You should look at each asset in the list and check, if you can unload it. Watch out for the files with the red exclamation icon, you should probably never unload these, since they are core WordPress files and they are needed for the site to work properly. This is how my home page Assets CleanUp settings looks like:

I was able to safely remove 11 assets, which will save 11 resource requests when a page loads and that will improve the page speed.

Re-run of page speed test tools showed, that Google PageSpeed Insights score did not change (because it also did not list this as a recommended optimization), but the GTmetrix score did improve:

• Google PageSpeed Insights
  • Mobile: 83
  • Desktop: 90
• GTmetrix
  • PageSpeed: 97
  • YSlow: 86

Our site also loads faster, it now needs 2.7 seconds to load the whole site (in the beginning it took 3.1 seconds). We are improving the WordPress site speed slowly but surely. Bear in mind, I'm using one of our WordPress themes for the test, which are built from the ground up to be performing out of the box. If you're using some other WordPress theme, where the author didn't put any efforts to optimize it for speed, your improved loading speed results will most probably be much greater at this point.

With removing unneeded JS and CSS files from our home page, we improved our scores, load time, number of request and the total page size as well. Bună treabă!

Render-blocking JavaScript and CSS in above-the-fold content

One of the optimizations that Google PageSpeed Insights suggests is also: “Eliminate render-blocking JavaScript and CSS in above-the-fold content”. This is a tricky one. Remember when I said, that it's not good to chase a perfect score in the page speed tools? This is one of the reasons for that.

If we look at our example, the Google tool suggests that the Page Builder front-flex.css should be deferred or loaded asynchronously. We are using the Page Builder by SiteOrigin plugin for building content in our pages. So, if this file is responsible for making our layout of the page look good, then I might not respect Google suggestion and simply ignore it.

“But why would you disrespect Google? How dare you!” Well, this is only a tool and it gives you suggestions on what to do, but it does not know, if implementing some of these changes will break your site or ruin good user experience (UX) for your visitors. For example, if the tools had suggested that we load the style.css file with all the theme styles asynchronously, then it would have created the FOUC: Flash of unstyled content:

This is a bad UX, so I would ignore the suggestion from the tool and keep a good UX instead of improving our score. After all, Google is also using other factors it can gather from your website to rank it in the search results and user experience is one of them. When optimizing the website for speed, don't follow the recommendations blindly and forget about all the other aspects and goals your WordPress website has.

If the files that the tool suggests to be loaded asynchronously are valid candidates and they don't break anything, then of course we can implement that change. The best way is to just try to asynchronously load each suggested file and see, if the page still loads ok. Don't forget to reload the page without browser cache, so that a fresh copy of the page loads. You can do that by hard refreshing your site.

We will look at how to load files asynchronously in the WP Rocket plugin section below. There are other standalone plugins that offer this functionality, but since the WP Rocket has it build in, we don't need to pollute our WP installation with more plugins.

Server Side Caching

We've already talked about browser cache, but now we also have to take care of the server side cache. To understand server side caching we have to know the basics of how WordPress works, so let's look at that first.

When a visitor opens a WordPress page, the following things happen (basic explanation):

1. Server receives a page request.
2. WordPress PHP code begins to execute.
3. WordPress access the database to get the information it needs to build the requested page.
4. WordPress produces the HTML.
5. Server responds with the HTML for the browser to display it to the visitor.

These 5 steps have to be repeated for each page view, for each visitor. That's a lot of repetitive work for content that stays the same for each visitor (if your site is displaying mostly static content, which majority of websites is).

Server side caching eliminates pretty much all the server's hard work. It removes the need for repeating steps 2,3 and 4. So, when we enable server side caching, the process of a page request looks like this:

1. Server receives a page request.
2. Server retrieves the page HTML from the cache (if a cached version is available).
3. Server responds with the HTML for the browser to display it to the visitor.

As you can see, the hard work of running the WordPress code and accessing the database is bypassed, which means that the page loading time should be much faster.

If we look at the Google PageSpeed Insights tool suggestions, we will spot the “Reduce server response time” task. The tool says that our server responded in 0.98 seconds, which is not good. The slow shared hosting I'm using is definitely to blame for some chunk of that 1 second response time, but we'll be able to shorten it with server side caching.

Each page cache is usually saved with an expiration time of 24 hours, but that setting can be changed. This means that instead of thousands of page requests running the whole WordPress HTML building process, it will only be run once a day, to generate that cached page and the server will serve that cached page to other visitors. So, not only the page will be quicker, but the server will also have to do less work.

If you are updating a page in WordPress and an old cached version of the page is still available on your server, then you would have to clear that cache manually (usually with the click of a button) or some tools would do that for you automatically.

Some hosting companies already have a server side caching in place for their users, but this feature is usually available for managed WordPress hosting packages. So, before you follow instructions below, on how to setup server side caching, you should make sure that your server is not doing that for you already.

We will look at how to setup the WP Rocket plugin to enable server side caching and other features that it has (like lazy loading images, loading assets asynchronously, minification of JS and CSS files and much more). WP Rocket is a premium (paid) plugin, but I believe it's worth the investment. If you don't agree with me, that's fine WP Super Cache is a good free alternative, but it does not have the same extra features as WP Rocket and it's a little bit more cumbersome to setup.

WP Rocket (server side caching plugin)

As soon as we install and activate the WP Rocket plugin it will have some basic features enabled out of the box:

• Caching of all the pages for quick viewing.
• Decrease bandwidth usage with our GZIP compression.
• Management of the headers (expires, etags…).

The WP Rocket plugin default settings are a good starting point.

I've run the page speed tools a couple of times, so that they picked up the cached version of the site and these are the new results:

• Google page speed insights
  • Mobile: 91
  • Desktop: 97
• GTmetrix
  • PageSpeed: 97
  • YSlow: 87

The Google PageSpeed Insights tool no longer displays the “Reduce server response time” optimization suggestion, because we reduced it from 1 second to 121ms, that's a 88% improvement in server response time, just by activating the WP Rocket plugin! With this improvement, our fully loaded time is now 1.9 seconds, but we are not stopping here

Să ne uităm la setările pe care pluginul WP Rocket le are de oferit. WP Rocket are un meniu de comenzi rapide frumos în bara de meniu superioară a administratorului WP. De acolo, puteți accesa pagina de setări, ștergeți memoria cache și puteți accesa alte informații utile referitoare la acest plugin.

Înainte de a continua și de a încerca diferite setări WP Rocket, aș dori să menționez că, după fiecare modificare pe care o faceți, ar trebui să vă verificați site-ul într-o filă de browser incognito/privată . Dacă sunteți conectat la site-ul dvs. WordPress, atunci nu veți vedea versiunea stocată în cache a site-ului. În fila browser incognito nu veți fi autentificat și veți primi o versiune în cache a site-ului, astfel încât să puteți verifica dacă funcționează ok.

De asemenea, știți că activarea fiecărei setări WP Rocket poate avea rezultate diferite sau chiar efecte negative asupra vitezei dvs. WordPress, în funcție de tema sau pluginurile pe care le utilizați, așa că doar activarea tuturor setărilor WP Rocket nu este calea de urmat. Ar trebui să încercați fiecare setare și să o măsurați cu instrumente de viteză a paginii, pentru a vedea diferența. După cum veți vedea, unele tehnici nu vor îmbunătăți viteza paginii noastre, prin urmare nu le vom folosi.

Goliți memoria cache

Memorarea în cache pe server va începe să funcționeze de îndată ce activați pluginul WP Rocket, așa că haideți să vedem cum îl putem șterge. Puteți șterge manual memoria cache, dacă faceți clic pe elementul de meniu „Ștergeți memoria cache” din meniul de comenzi rapide WP Rocket. Pluginul se va ocupa, de asemenea, de ștergerea automată a memoriei cache, atunci când actualizați setările de personalizare, modificați/actualizați widget-urile, categoriile, ... și va șterge parțial memoria cache atunci când actualizați o pagină. Pentru mai multe informații despre când va avea loc ștergerea automată a cache-ului, vă rugăm să consultați această întrebare WP Rocket.

Cache-ul are o durată de viață care poate fi setată în fila „De bază” a setărilor WP Rocket. Vă sugerez să setați acest lucru la 1 zi.

Preîncărcați memoria cache

O caracteristică plăcută a WP Rocket este „Preîncărcare cache”, care va preîncărca cache-ul paginii dvs. de pornire și paginile către care se leagă, astfel încât utilizatorii dvs. vor primi întotdeauna o versiune în cache a paginii. Aș putea folosi această funcție înainte de a rula instrumentele de viteză a paginii și nu ar trebui să rulez instrumentele de mai multe ori pentru a obține rezultatele versiunii stocate în cache.

Setările cache-ului de preîncărcare pot fi accesate în pagina de setări din fila „Preîncărcare”. Căutați opțiunea „Preload bot”, acolo veți găsi o opțiune manuală și o opțiune automată. Dacă activați opțiunea bot automat, memoria cache de preîncărcare va rula de fiecare dată când actualizați sau creați o pagină sau dacă memoria cache expiră. Această opțiune poate influența performanța serverului dvs., așa că fiți cu ochii pe jurnalele de performanță dacă o activați. Dacă actualizați și creați o mulțime de postări/pagini și aveți o găzduire partajată, vă sfătuiesc să nu activați această opțiune. În schimb, ar trebui să activați doar opțiunea manuală a botului, care va crea un alt element de meniu de comenzi rapide WP Rocket, intitulat „Preload Cache” și va preîncărca cache-ul doar când faceți clic pe el (după ce ați terminat de editat postările și paginile).

În fila de setări „Preîncărcare”, veți găsi, de asemenea, setări pentru a preîncărca memoria cache dintr-un hartă site, astfel încât să puteți defini un hartă site și va folosi adresele URL din harta site-ului pentru a preîncărca memoria cache pentru acele pagini.

LazyLoad

Am explicat deja încărcarea leneșă a imaginilor în secțiunea de optimizare a imaginii din acest articol, dar acum că avem WP Rocket instalat, putem activa această funcție. Accesați fila „De bază” a setărilor WP Rocket și activați LazyLoad pentru imagini, iar dacă utilizați videoclipuri sau cadre iframe, atunci puteți activa și asta.

După ce activați această funcție, ar trebui să vă verificați întotdeauna site-ul și să vedeți cum se încarcă imaginile. LazyLoad s-ar putea să vă distrugă aspectul site-ului sau s-ar putea să nu vă placă modul în care sunt încărcate imaginile (sărirea conținutului), așa că verificați întotdeauna paginile. Această caracteristică este foarte utilă, atunci când aveți o mulțime de imagini dedesubt și vă va ajuta să reduceți numărul de solicitări de imagini la încărcarea paginii originale. Pe site-ul nostru de testare, avem doar 5 imagini dedesubt, așa că am salvat 5 solicitări de imagini, iar timpul de încărcare a paginii noastre a scăzut acum la 1,7 secunde, în timp ce scorurile instrumentelor de viteză a paginii au rămas aceleași. Acesta este un indicator bun, că vă puteți îmbunătăți viteza paginii cu anumite sarcini pe care instrumentele nu le sugerează.

Reduceți fișierele

Unele dintre sugestiile GTMetrix pe care le putem îmbunătăți în continuare sunt reducerea fișierelor HTML, CSS și JS. Deoarece tema noastră WordPress și majoritatea pluginurilor recomandate folosesc deja versiuni reduse pentru fișierele JS/CSS și avem Gzip activat pe serverul nostru, această optimizare WP Rocket nu va aduce nicio îmbunătățire semnificativă pentru site-ul nostru de testare, dar cazul dvs. ar putea fi diferit. Accesați fila „Fișiere statice” din setările WP Rocket și verificați toate cele 3 opțiuni din opțiunea Minify files . Salvați setările și verificați site-ul dvs. într-o filă incognito/privată, astfel încât să puteți căuta orice probleme pe care aceste opțiuni le-ar putea aduce site-ului dvs. Pe site-ul meu WordPress de testare, minificarea CSS a spart coada de fișiere flexbox CSS a generatorului de pagini, așa că a trebuit să dezactivez opțiunea de reducere a fișierului CSS. Opțiunile HTML și JS au funcționat OK.

Am întrebat suportul WP Rocket care ar putea fi problema și au fost suficient de drăguți pentru a depana această problemă pe site-ul meu. Problema a fost cauzată de memoria cache Varnish folosită pe găzduirea mea partajată. Mi-au sugerat să schimb configurația Varnish pe serverul meu de găzduire. Mi-am contactat asistența pentru găzduire și, după cum bănuiam, nu pot schimba configurația Varnish pe găzduirea mea partajată, dar aș putea, dacă aș face upgrade la pachetul de găzduire VPS. După cum puteți vedea, utilizarea unei găzduiri partajate nu este o idee bună

Dacă ați avut unele probleme cu minimizarea CSS sau JS, puteți adăuga adresa URL a fișierului care a cauzat problemele în caseta de fișiere JS sau CSS excluse. Găsirea fișierului responsabil pentru probleme poate fi dificilă, dar, de obicei, știți care funcționalitate este defectă și ce plugin este responsabil pentru acea funcționalitate, așa că verificați codul sursă a paginii și inspectați fișierele incluse de acel plugin. Dacă pluginul are mai multe fișiere JS sau CSS, atunci puteți încerca doar să le adăugați la lista de excluderi și să vedeți dacă problema dispare.

Combinați fișierele JS și CSS

Fila YSlow din instrumentul GTmetrix ne spune să „Faceți mai puține solicitări HTTP”. Spune că WordPress-ul nostru folosește 9 script-uri JS externe și că ar trebui să încercăm să le combinăm în 1 și că pagina folosește 4 fișiere CSS externe și ar trebui să încercăm să le combinăm și într-un singur fișier. Dacă vă amintiți, am eliminat deja fișierele JS și CSS care nu sunt necesare din secțiunea Eliminați fișierele JS sau CSS care nu sunt necesare din acest articol.

Combinarea tuturor fișierelor JS și CSS într-un singur fișier nu este o idee bună, deoarece browserele pot descărca 6 fișiere mai mici în paralel, mai rapid decât 1-2 fișiere mari. Celălalt motiv este că unele dintre fișiere sunt incluse în capul documentelor HTML și altele la sfârșitul documentului, așa că trebuie să le împărțiți în cel puțin 2 fișiere.

Pentru a combina fișiere cu WP Rocket, accesați fila „Fișiere statice” din setările pluginului și activați opțiunile din Combină fișiere . Ca întotdeauna, verificați-vă site-ul într-o filă de browser incognito/privată pentru a verifica eventualele probleme.

În exemplul nostru, WP Rocket a avut din nou probleme, din cauza problemei de configurare a găzduirii partajate Varnish menționată mai sus, așa că a trebuit să dezactivez opțiunea de combinare a fișierelor JS.

Din nou, dacă ați avut probleme cu concatenarea CSS sau JS, puteți adăuga adresa URL a fișierului care a cauzat problemele în caseta de fișiere JS sau CSS excluse, la fel ca în pasul de minificare de mai sus.

Eliminați șirurile de interogare din resursele statice

GTMetrix ne recomandă să eliminăm șirurile de interogare din resursele statice, deoarece unele servere proxy nu pun în cache resursele cu șiruri de interogare.

Șirurile de interogare dintr-o resursă statică (de obicei fișier JS sau CSS) este un atribut URL, care marchează versiunea fișierului menționat. Arată astfel: ?ver=2.5.8 și este atașat la sfârșitul adresei URL: http://domain.com/css/front-flex.css?ver=2.5.8

Putem elimina cu ușurință aceste șiruri de interogare cu WP Rocket. Accesați fila „Fișiere statice” din setările pluginului și activați opțiunea Eliminare șiruri de interogare .

După activarea acestei opțiuni, scorul nostru GTmetrix PageSpeed ​​s-a schimbat la 98, dar timpul de încărcare a paginii nu s-a schimbat.

CSS/JS care blochează randarea

Singura sugestie de instrument Google PageSpeed ​​Insights rămasă este „Eliminați JavaScript și CSS care blochează randarea în conținutul de deasupra paginii”. Aceasta înseamnă că există unele fișiere JS sau CSS care blochează încărcarea paginii în conținutul de deasupra paginii. Ceea ce instrumentul vrea să facem este să amânăm sau să încărcăm asincron aceste resurse de blocare.

Încă o dată, pluginul WP Rocket vine în ajutor. Accesați fila „Fișiere statice” și căutați opțiunile CSS/JS care blochează randarea . Acolo puteți activa opțiunile JS și CSS care pot rezolva această problemă. Odată ce activați opțiunea JS, va apărea o opțiune Safe mode (recomandată) . Acest mod sigur va încărca biblioteca jQuery (bibliotecă WP implicită în coadă) în capul paginii, lăsând-o ca fișier de blocare, dar nu va sparge nicio pagină care are cod jQuery în linie pe pagină. Deoarece jQuery este încă încărcat în cap, instrumentul PageSpeed ​​încă se plânge că avem un fișier JS care blochează randarea.

Deci, dacă dezactivez modul sigur pentru site-ul nostru de testare, instrumentul Google PageSpeed ​​ne oferă un scor perfect, 100 pe mobil și 100 pe desktop. Grozav, nu? Nu chiar! Site-ul nostru încă funcționează corect, dar să vedem cum se încarcă site-ul:

Flash de conținut fără stil (FOUC) poate fi remediat utilizând opțiunea Critical path CSS din setările WP Rocket (chiar sub opțiunea CSS/JS de blocare a randării). Teoria este că ați putea adăuga codul CSS necesar pentru partea de mai sus a paginii, astfel încât acest efect flash de text fără stil să nu apară la încărcarea paginii. Acest lucru este mai greu decât pare. Există instrumente care ar trebui să genereze acest CSS critic pentru dvs., dar nu am avut prea mult succes cu ele.

Pentru a genera codul CSS al căii critice:

1. Dezactivați pluginul WP Rocket pe site-ul dvs.
2. Accesați instrumentul Critical Path CSS Generator.
3. Introduceți adresa URL a site-ului dvs. și rulați-l.
4. Copiați codul CSS al căii critice.
5. Activați pluginul WP Rocket.
6. Lipiți codul CSS în caseta „Critical path CSS” din setările WP Rocket.
7. Verificați dacă există căi URL relative în codul CSS critic și schimbați-le în căi absolute.

Iată cum arată acum încărcarea site-ului nostru de testare WordPress:

E mai bine, dar tot nu-mi place. Da, scorul Google PageSpeed ​​de 100/100 este grozav, dar timpul total de încărcare este mai lent și mai avem încă 2 solicitări, deoarece am activat această opțiune CSS/JS de blocare a randării. Problema principală pentru mine este încă experiența utilizatorului în ceea ce privește încărcarea paginii, așa că am dezactivat această opțiune WP Rocket.

WP Rocket este cu siguranță un plugin pe care fiecare proprietar de site web WordPress ar trebui să-l folosească, deoarece are toate caracteristicile pentru a vă accelera site-ul. Doar activarea pluginului vă va oferi un impuls uriaș. Alte caracteristici trebuie testate pentru fiecare site web, deoarece fiecare temă și plugin poate aduce propriile probleme la amestec.

Suntem aproape la sfârșitul pașilor noștri de optimizare. Singurul lucru rămas este să folosim un CDN pentru activele site-ului nostru.

Rețeaua de livrare de conținut (CDN)

Am menționat deja de câteva ori în acest articol că timpii de încărcare a paginii diferă, în funcție de locația serverului și locația vizitatorului. De exemplu, serverul meu de găzduire partajată pe care îl folosim pentru testare se află în Austin, Texas (SUA), iar la început, în secțiunea Instrumentul de viteză a paginii Pingdom a acestui articol, am testat 4 locații. Iată rezultatele:

• Dallas, Texas (SUA) = 1,65 s
• San Jose, California (SUA) = 2,53 s
• Stockholm, Suedia (UE) = 3,06 s
• Melbourne (AUS) = 5,38s

Acum că am optimizat site-ul, cu toți pașii menționați în acest articol, timpii noștri de încărcare sunt:

• Dallas, Texas (SUA) = 0,63 s
• San Jose, California (SUA) = 0,76 s
• Stockholm, Suedia (UE) = 1,21s
• Melbourne (AUS) = 2,24 s

Vom folosi acești timpi pentru a compara timpul nostru de încărcare WordPress, când vom configura site-ul nostru pentru a utiliza un CDN.

Putem vedea că aceste vremuri sunt foarte diferite; asta pentru că datele trebuie să parcurgă un drum mai lung de la locația serverului nostru la vizitatorul australian, decât la un vizitator din Dallas. Aici un CDN ne va ajuta să reducem acești timpi de încărcare.

Un CDN este o rețea distribuită geografic de servere proxy și centrele lor de date. Scopul lor principal este de a distribui conținutul site-ului dvs. vizitatorilor dvs. de pe un server cel mai apropiat de vizitator. Aceasta înseamnă că conținutul static al site-ului tău web (imagini, JS, CSS, …) va fi servit de serverele lor, care sunt răspândite în întreaga lume, făcând site-ul tău mai rapid de încărcat pentru toată lumea.

Utilizarea unui CDN WordPress are o multitudine de beneficii, inclusiv:

• Scăderea latenței, care este timpul și/sau întârzierea distanței pe care trebuie să o parcurgă.
• Reduce timpul până la primul octet (TTFB), care este o măsură a cât timp trebuie să aștepte browserul înainte de a primi primul octet de date de la server.
• Servește conținut din cache pentru timpi mai rapidi de încărcare a paginii și mai puțină presiune pe serverul de găzduire (de origine).
• Utilizează HTTP/2 peste conexiuni securizate pentru a profita de multiplexare, paralelism, server push și compresie HPACK.
• Comprimă datele cu GZIP sau Brotli pentru a asigura fișiere HTML, foi de stil și JavaScript mai mici.

În zilele noastre, CDN-urile oferă o grămadă de alte funcții, în special în departamentul de securitate. De obicei, oferă protecție DDoS, detectarea/prevenirea boților și așa mai departe.

Ne vom uita la unul dintre cele mai populare CDN-uri, numit Cloudflare. Ei oferă un pachet gratuit, care include utilizarea CDN-ului lor global și de asta avem nevoie.

Cloudflare

Mai întâi accesați cloudflare.com și înscrieți-vă pentru un nou cont gratuit. După ce vă creați un cont, va trebui să vă configurați site-ul pe Cloudflare, pentru ca acesta să vă servească conținutul static (activele).

Când vă conectați la noul cont Cloudflare, vi se va cere să adăugați site-ul web (domeniul) pentru a prelua automat înregistrările DNS.

Introduceți domeniul și faceți clic pe „Începeți scanarea”. Chiar dacă folosesc un subdomeniu ( speed.gregorcapuder.com ), a trebuit să introduc doar domeniul rădăcină: gregorcapuder.com . Finalizarea părții de scanare a durat aproximativ un minut și, între timp, puteți viziona un scurt videoclip, care va explica ce se întâmplă. După ce s-a terminat scanarea, puteți face clic pe butonul „Continuare”.

În pasul următor, veți vedea toate înregistrările DNS pe care Cloudflare le-a putut găsi pentru domeniul nostru. Aici trebuie să adăugați orice înregistrări care ar putea lipsi, așa că parcurgeți lista și verificați dacă lipsește ceva. În exemplul nostru, subdomeniul de viteză lipsea, așa că l-am adăugat în listă. În introducerea numelui am introdus „speed” (numele subdomeniului meu), în adresa IPv4 am introdus aceeași adresă IP ca și domeniul meu principal (gregorcapuder.com) și apoi am dat clic pe „Add Record”. După cum puteți vedea în captura de ecran de mai jos, am activat Cloudflare pentru domeniul meu principal, precum și pentru subdomeniul de viteză (marcat de un nor portocaliu cu o săgeată care rulează în spatele norului). Aceasta înseamnă că pe aceste două site-uri, traficul va fi gestionat și protejat de Cloudflare.

Când ați terminat cu înregistrările DNS, puteți continua cu pasul următor, unde selectați planul „Site web gratuit” și continuați.

Ultimul pas pentru a activa Cloudflare pentru site-ul dvs. web este să vă conectați la tabloul de bord al registratorului de domenii (de unde v-ați cumpărat domeniul) și să schimbați serverele de nume pentru domeniul dvs. Se spune că poate dura până la 48 de ore pentru ca noile servere de nume să intre în vigoare, dar în cazul meu, a fost actualizat în 1 oră. Între timp, site-ul web nu va fi oprit, așa că nu vă faceți griji.

Odată ce serverele de nume sunt actualizate pentru site-ul dvs., veți vedea că starea site-ului dvs. Cloudflare se schimbă în „activ”.

Am lăsat implicit toate setările Cloudflare din tabloul de bord, singurul lucru pe care l-am schimbat a fost nivelul de securitate. Accesați fila Firewall și ajustați „Nivelul de securitate” la Scăzut . Asta pentru că nu vreau ca vizitatorii mei să primească o „pagină de provocare” la detectarea unui atacator fals.

Acum, că am configurat partea Cloudflare, ar trebui să activăm și setările Cloudflare pe pluginul nostru WP Rocket.

Conectați-vă la tabloul de bord WordPress și accesați setările pluginului WP Rocket. Navigați la fila „CDN”, activați fila Afișare setări Cloudflare și salvați setările. Aceasta va afișa o nouă filă „Cloudflare” în setările WP Rocket și ar trebui să o deschideți. Acolo ar trebui să introduceți e-mailul contului Cloudflare, domeniul și, de asemenea, ar trebui să copiați și să lipiți cheia API globală Cloudflare. Pentru a prelua cheia API globală, accesați tabloul de bord Cloudflare (fila Prezentare generală) și faceți clic pe linkul „Obțineți cheia API”. Veți vedea o secțiune „Cheie API” pe această pagină nouă și ar trebui să faceți clic pe butonul „Vizualizare cheie API” pentru rândul „Cheie API globală”. După ce inserați cheia API globală în setările WP Rocket, aș sugera și activarea opțiunii „Setări optime” în WP Rocket. Salvați setările și apoi faceți clic pe butonul „Șterge cacheul Cloudflare”, doar pentru a verifica dacă totul funcționează OK.

Acum, când CDN-ul este configurat, putem testa din nou timpii de încărcare din diferite locații și putem vedea îmbunătățirile (teste Pingdom).

• Dallas, Texas (SUA) = 0,54 s
• San Jose, California (SUA) = 0,70 s
• Stockholm, Suedia (UE) = 0,91s
• Melbourne (AUS) = 1,16 s

După cum era de așteptat, timpii de încărcare din Europa și Australia s-au îmbunătățit cel mai mult. Și toți timpii noștri de încărcare sunt de aproximativ 1 secundă sau mai puțin. Acesta este un timp grozav de încărcare!

Când testați site-ul dvs., nu îl testați doar cu o singură rulare a instrumentului de viteză a paginii pentru o singură locație. Trebuie să-l testați de câteva ori. Când rulați pentru prima dată instrumentul pentru o anumită locație, fișierele din cache trebuie mai întâi stocate pe cel mai apropiat server Cloudflare, fiecare test ulterior ar trebui să vă arate timpul real de încărcare al versiunii din cache. Vă sugerez să testați de 3-5 ori, pentru a obține o medie bună a cât de repede se va încărca pagina dvs. dintr-o anumită locație.

Rezultate finale

Scorurile finale ale instrumentului de viteză a paginii sunt:

• Informații Google PageSpeed
  • Mobil: 91
  • Desktop: 97

• GTmetrix
  • Viteza paginii: 98
  • YSlow: 91

Iată capturile de ecran:

Să comparăm datele GTmetrix înainte și după optimizarea noastră:

Ne-am îmbunătățit performanța site-ului web din toate punctele de vedere. Site-ul se încarcă mai repede, este nevoie de mai puține solicitări pentru a afișa site-ul utilizatorului, necesită mai puțină lățime de bandă și se încarcă rapid pentru vizitatorii din întreaga lume. În același timp, am păstrat toate funcționalitățile și stilul site-ului nostru așa cum era la început. Minunat!

Pentru final, am pregătit o reprezentare vizuală frumoasă a rezultatelor pentru fiecare pas individual de optimizare pe care l-am finalizat:

Concluzie

În acest ghid final de optimizare a vitezei paginii WordPress, ne-am uitat la pașii mai importanți pe care îi puteți face pentru a vă îmbunătăți drastic performanța site-ului. Urmând sfaturile din acest articol, site-ul dvs. va fi ușor și rapid, ceea ce vă va îmbunătăți timpul de încărcare a paginii și, prin urmare, experiența utilizatorului. Aceste îmbunătățiri ar putea aduce, de asemenea, mai mulți bani și să vă ajute să economisiți o parte din costurile serverului, așa că este un câștig pentru toată lumea!

Aș dori să închei acest articol spunând că viteza nu este totul, este o altă piesă a puzzle-ului unui site. Construim site-uri web pentru oameni, potențiali clienți, așa că ține întotdeauna asta în minte. Găsiți un echilibru bun între conținut, multimedia, design, experiența utilizatorului și viteza paginii. Nu fi obsedat de viteza paginii și scorurile instrumentului de viteză a paginii. Atâta timp cât vă îmbunătățiți experiența vizitatorilor, obiectivul dvs. va fi atins.

Am ratat vreun pas de optimizare a site-ului, despre care credeți că poate aduce o îmbunătățire crucială a timpului de încărcare a paginii? Anunță-mă în comentariile de mai jos!

Dacă ți se pare util articolul nostru și i-ai urmat pașii, te rog să-mi spui în comentariile de mai jos ce fel de îmbunătățiri ai obținut.