Ghid WPO pentru optimizarea vitezei site-ului tău

Ce este WPO?

Web Performance Optimization, pe care îl numim WPO, este pur și simplu optimizarea diferitelor procese care afectează modul în care se încarcă un site.

Cum să măsori viteza de încărcare a unui site?

Există o mulțime de instrumente pentru măsurarea vitezei de încărcare. Cele mai populare sunt:

• ›

  Google Page Speed

• ›

  Lighthouse

• ›

  GTMetrix

Înainte de a începe un audit, este important să ții cont că viteza de încărcare variază pentru fiecare utilizator. Diferite variabile pot afecta modul în care se resimte viteza pentru un utilizator din Cuenca față de unul din Ottawa.

De aceea, în loc să lucrăm la timpii de încărcare în secunde, îți recomandăm să te concentrezi pe optimizarea:

• ›

  Greutății site-ului (MB)

• ›

  Cererilor

• ›

  Timpului de răspuns al serverului

Dacă îmbunătățim aceste 3 domenii, viteza de încărcare se va îmbunătăți indiferent de locul în care se află utilizatorul.

Vom aprofunda fiecare domeniu și, prin diferitele instrumente, vom vedea cum să lucrăm la ele pentru a îmbunătăți performanța fiecărui URL. De ce spun fiecare URL? Pentru că, deși poate părea evident, am dat peste multe cazuri în care erau evaluate doar datele paginii de start, și, bineînțeles, fiecare pagină de pe un site nu încarcă aceleași resurse.

Instrumentele de dezvoltator Google

Înainte de a începe, vreau să explic câteva opțiuni pe care Google le oferă prin instrumentele sale de dezvoltator. Acest instrument este unul dintre cele mai importante pentru a analiza cum funcționează un site. Dă click dreapta pe pagina pe care browserul o are deschisă și va apărea un panou cu diferite opțiuni. Vom merge la Inspect (Ctrl + Shift + I).

Odată ce acel instrument este deschis, ne vom îndrepta către opțiunea NETWORK pe care o vei găsi în partea de sus. Dacă apăsăm din nou ENTER în browser, instrumentul va afișa încărcarea diferitelor resurse.

În partea de jos a imaginii, putem vedea datele care ne interesează pentru o vedere generală a modului în care se încarcă site-ul.

Aprofundând acest panou din partea de sus și privind structura coloanelor, avem:

• ›

  Name: numele resursei.

• ›

  Status: codul de răspuns al resursei (200, 301, 404...)

• ›

  Type: tipul de resursă (script, font, png, jpg, stylesheet...)

• ›

  Initiator: care resursă declanșează cererea.

• ›

  Time: cât a durat cererea.

• ›

  Waterfall: o reprezentare grafică a timpilor de încărcare ai unei resurse.

Dacă dăm click dreapta în partea de sus, putem adăuga și elimina coloane cu aceste informații.

Activarea unor elemente informative suplimentare precum Domain, Scheme sau Cookies poate ajuta în cazuri specifice la localizarea resurselor care ne-ar putea cauza vreun fel de problemă, dar în acest moment vom rămâne la cele care vin predefinite.

Există un aspect care, deși foarte interesant, îl voi atinge doar ușor ca să îl avem în minte. Viteza conexiunii, mai ales pe mobil, este o piesă cheie a modului în care se încarcă un site. Din acest instrument putem simula viteze mai lente precum 3G pe mobil.

Cum să afli greutatea unui URL și cum să o reduci?

Greutatea, fie în Megabytes, fie în Kilobytes, este unul dintre principalele motive pentru care un URL se încarcă greu. De aceea începem prin a aprofunda acest aspect, întrucât va stabili calea pentru a obține o bună optimizare pe site-ul nostru.

Următoarele date provin din instrumentul menționat mai sus, GTMETRIX, și corespund unui site pe care sunt pe cale să încep să îl optimizez.

Ne vom concentra pe datele din coloana din dreapta, cea care se referă la (Page Details), mai exact la Total Page Size.

La prima vedere, greutatea acestui site este mult peste medie, dar ține cont că ceea ce contează nu este greutatea totală a site-ului, ci cât durează încărcarea acelei greutăți, pentru că există ceva numit Lazy Load, o funcție care amână încărcarea până când utilizatorul are nevoie de resursă. Vom vorbi despre asta mai târziu.

Putem găsi această informație și în instrumentele de dezvoltator, în panoul pe care l-am privit mai sus, pe care ți-l reamintesc din nou.

Dacă te uiți în partea de jos, atât cei 7,5 MB, cât și cele 215 cereri se apropie foarte mult de cifrele raportate de GTMETRIX. Este important să știi de unde își ia GTMETRIX informațiile în caz că vei dori vreodată să folosești un instrument diferit.

Acum să vedem ce cântărește atât de mult și cum putem rezolva.

Opțiunea Waterfall oferă o privire vizuală asupra modului în care se încarcă resursele, arătând URL-ul resursei, statusul, domeniul și coloana Size. Dacă dăm click pe acea ultimă coloană sortează greutățile de la cea mai mare la cea mai mică și de la cea mai mică la cea mai mare.

Privind greutățile, putem vedea, așa cum se întâmplă în majoritatea cazurilor, că imaginile sunt în mare parte responsabile pentru greutatea excesivă a URL-ului.

Nu există o specificație formală pentru greutatea maximă pe care ar trebui să o aibă o imagine, dar recomandăm nu mai mult de 100 KB și, dacă ai opțiunea (dacă folosești Photoshop o ai), setează imaginile să se încarce progresiv ca JPG și evită PNG ori de câte ori nu ai nevoie de un canal Alpha (transparență).

Prin reducerea greutății imaginilor vom îmbunătăți semnificativ încărcarea site-ului, și există mai multe instrumente pe care le poți folosi. Eu personal optimizez cu Photoshop, dar există opțiuni online interesante:

• ›

  https://imagecompressor.io/compress

• ›

  https://kraken.io/web-interface

Atât GTMetrix, cât și instrumentul Google ne permit să vizualizăm resursele după tip, adică doar imaginile, scripturile, CSS...

Acest lucru este util pentru o perspectivă mai amplă asupra locului unde să lucrezi. Pe acest URL, imaginile reprezintă 4 MB din 7,2 MB, așa că o mare parte din problema greutății se află acolo. Chiar și așa, există alte resurse care ies în evidență ca extrem de grele pentru tipul lor, precum un fișier CSS de peste 700 KB și un Script de peste 300 KB.

În acest punct aș dori să clarific că, atunci când efectuăm o optimizare a vitezei de încărcare (WPO), trebuie să ne confruntăm cu anumite probleme care, deși au soluții, nu ne stau în putere să acționăm asupra lor.

În acest caz vedem un fișier CSS foarte mare. Dacă designerul a creat un CSS de peste 700 KB, optimizarea acelui fișier specific va fi dificilă.

Ce putem face pentru a reduce greutatea acestor fișiere?

Minifică (CSS, JS și HTML)

Minificarea este un proces care caută să reducă greutatea fișierelor prin eliminarea datelor inutile precum comentariile, spațiile, codul repetat și codul neutilizat. Există multe instrumente pentru a efectua acest proces, cu excepția părții de cod neutilizat, care este mai greu de optimizat și ar necesita intrarea manuală în fișier (ceva ce nu recomand).

Instrumente pentru minificarea fișierelor

• ›

  HTML Minifier http://kangax.github.io/html-minifier/

• ›

  CSS Nano https://cssnano.co/

• ›

  Uglify http://lisperator.net/uglifyjs/

Din fericire vorbim despre WordPress și, după cum știm cu toții, în WordPress este foarte rar să nu găsești un plugin care se ocupă de această operațiune.

Personal îmi place să folosesc unul complet gratuit, Autoptimize, și unul cu plată, WP Rocket.

În acest articol nu vreau să explic atât cum funcționează aceste plugin-uri, cât cum să efectuezi sarcinile de optimizare. Pentru că, dacă folosim alte plugin-uri, ele au de asemenea aceste opțiuni, iar cel mai bine este să înțelegem ce facem.

Minificarea cu WP Rocket

Această parte nu este complexă. Mergem pur și simplu la tab-ul de optimizare a fișierelor și bifăm caseta de minificare HTML. În WP Rocket această opțiune se repetă mai jos pentru fișierele CSS și JS. Totuși, îți recomand să activezi această casetă și să testezi. Repetă această opțiune una câte una, întrucât, dacă ceva eșuează, va fi mai ușor să identifici problema.

Înainte de a verifica efectul minificării trebuie să golim cache-ul, altfel nu vom vedea rezultatul HTML-ului actualizat.

Cum să golești cache-ul browserului?

Aceste tipuri de plugin-uri vin cu opțiuni pentru a goli cache-ul, pe care le putem vedea în partea de sus.

Un alt mod este prin browser, odată ce Google Developer Tools este activat (Ctrl + Shift + I).

Dă click dreapta pe săgeata "reload page" și selectează "empty cache and hard reload."

Minificarea cu Autoptimize

Cu Autoptimize, acțiunea optimize este cea care efectuează minificarea, cu particularitatea de a oferi o opțiune de a păstra comentariile HTML. Aceste comentarii sunt de obicei adăugate de dezvoltatori pentru a păstra informații care pot fi utile în viitor.

Pentru a verifica că această optimizare a avut efect, am merge la codul sursă al URL-ului și ar trebui să vedem ceva de genul acesta:

Codul devine ilizibil, dar funcționalitatea sa este aceeași.

Aceste opțiuni se repetă la fel în WP Rocket și Autoptimize pentru fișierele CSS și JS. După cum am menționat mai devreme, nu recomand să optimizezi totul deodată, ci 1 câte 1. Aceste plugin-uri păstrează copii ale fișierelor minificate, așa că revenirea la original este posibilă prin debifarea casetei corespunzătoare.

Pentru a continua reducerea greutății paginii avem încă 2 opțiuni:

• ›

  Elimină sau reduce plugin-urile care adaugă CSS sau JS la încărcare.

• ›

  Elimină sau taie codul neutilizat din fișierul CSS.

Aceste 2 opțiuni sunt mai complexe și necesită mai multe cunoștințe, întrucât trebuie să fii atent și să te asiguri că nu există apeluri de pe alte pagini către partea pe care o elimini.

Deși eliminarea plugin-urilor nu este întotdeauna posibilă din cauza resursei pe care o oferă, există plugin-uri care sunt mai bine optimizate decât altele, ceea ce înseamnă mai puține cereri și JS mai ușor. Așa că în minunatul ecosistem WordPress există aproape întotdeauna o alternativă.

Timpul de încărcare vs timpul de răspuns

Acum este momentul să vorbim despre cereri, timpul de răspuns și timpul de încărcare. În acest punct trebuie să menționăm o parte fundamentală a procesului: serverul. Optimizarea serverului este de obicei în afara controlului nostru, așa că este important să alegi o soluție eficientă.

Dar să o luăm pas cu pas.

Ce este o cerere?

O cerere, sau HTTP Request, este un apel făcut de la client către server pentru a solicita o anumită resursă. Cererile pot ajunge la servere diferite.

Cererile pot fi fie HTTP, fie HTTPS. Dacă ne uităm la structura unei cereri, putem analiza unde apare întârzierea în timp.

Analiza timpului unei cereri HTTP

Să descompunem ce vedem în acest grafic de timp.

• ›

  Cererea este inițiată, dar blocată sau pusă în coadă: Dacă blocarea durează mult timp poate fi din mai multe motive: cereri cu prioritate mai mare sau multe cereri către această origine.

• ›

  DNS Lookup: browserul rezolvă adresa IP a cererii.

• ›

  Connecting: timpul necesar pentru a se conecta la server pentru a rezolva cererea. Dacă acest timp este ridicat, ar putea indica probleme de rețea, erori de conexiune sau un server supraîncărcat.

• ›

  Sending: se trimite cererea de resursă.

• ›

  Waiting: acesta este timpul pe care serverul îl ia pentru a rezolva o cerere și a trimite un răspuns; dacă este lung, există o problemă pe server.

• ›

  Receiving: primirea resursei.

O cerere HTTPS adaugă încă un pas, arătat aici.

Aceste două capturi de ecran aparțin a două site-uri diferite, unul neoptimizat (HTTP Request) și altul optimizat (HTTPS Request).

Dacă te uiți cu atenție și compari, cea mai mare diferență este în timpul de așteptare. În aceste cazuri, ar trebui să analizezi serverul mai în detaliu.

Cererile către server: cum le putem reduce?

După cum am văzut, numărul de cereri este strâns legat de timpul de încărcare, așa că reducerea numărului de cereri ar îmbunătăți timpii de încărcare ai unui URL. Bunul simț joacă un rol în procesul de optimizare și în a ști dacă o resursă este cu adevărat utilă pentru utilizator sau pentru afacerea noastră. Acesta este momentul să ne luăm rămas bun de la anumite resurse care nu adaugă nimic, dar nu eu sunt cel care decide asta.

Totuși, avem opțiuni pentru îmbunătățirea cererilor, chiar dacă aceste acțiuni nu aduc o schimbare uriașă în încărcarea site-ului. Mă voi repeta: cel mai bine este să elimini resursele care nu adaugă nimic.

Combină CSS și JS

O altă acțiune populară la optimizarea unei pagini web este combinarea resurselor CSS și JS, dar ce înseamnă asta?

Scopul combinării este de a reduce cererile cu prețul creșterii greutății fișierului. Combinarea înseamnă unificarea diferitelor resurse CSS sau JS într-una singură.

Dacă timpii de răspuns sunt lungi, combinarea poate fi benefică. Dacă timpii de trimitere sunt foarte lenți, poate o altă tehnică este mai bună.

Idealul este să combini având un server bun, așa că câștigăm pe ambele părți.

Combinarea resurselor cu WP Rocket și Autoptimize

Operațiunea de combinare cu aceste plugin-uri este la fel de simplă ca înainte. Bifăm pur și simplu caseta corespunzătoare.

În WP Rocket opțiunile pentru combinarea CSS și JS sunt aceleași; panourile sunt practic identice. După cum vedem în imagine, există o casetă pentru adăugarea căii fișierelor pe care nu vrem să le combinăm.

Sub caseta de bifare, vedem de asemenea o notă despre a nu folosi opțiunea de combinare dacă folosim HTTP/2. Acest articol explică mai multe despre HTTP/2.

Autoptimize oferă mai multe opțiuni pentru a lucra cu CSS și a reduce cererile. În opțiunea pe care o marchez, combină și îți dă un avertisment despre efectul pe care l-ar putea avea, dar în cele din urmă acest lucru este întotdeauna relativ.

În această primă parte a articolului, am vrut să explic în ce constau anumite acțiuni de bază, cele pe care le vedem de obicei în practic toate plugin-urile de optimizare WPO, dar mai există multe pe care le putem face pentru a îmbunătăți atât cererile, cât și timpii de încărcare.

Configurarea cache-ului

Fără îndoială, optimizarea cache-ului este una dintre acțiunile în care vom observa cele mai mari îmbunătățiri ale modului în care se încarcă un site. În acest articol despre SEO pentru WordPress am explicat cum funcționează cache-ul. Te încurajez să arunci o privire pentru a înțelege cum funcționează.

Autoptimize și WP Rocket efectuează acțiuni de caching, dar WP Rocket îți oferă câteva opțiuni în plus. Merită menționat că plugin-urile au transformat această optimizare în ceva mai simplu: abia ai câteva opțiuni, iar procesul este rapid și nedureros.

După cum vezi, WP Rocket îți permite să lucrezi la 4 lucruri:

• ›

  Activează caching-ul pentru dispozitivele mobile.

• ›

  Salvează fișierele separat pentru dispozitivele mobile.

• ›

  Activează caching-ul pentru utilizatorii autentificați.

• ›

  Specifică timpul pentru golirea cache-ului.

Depinde de fiecare proiect ce opțiune să selectezi, dar cu toate acestea în minte, sfatul meu este:

• ›

  Cache pentru mobil întotdeauna, pentru că, deși majoritatea site-urilor sunt responsive, există conținut pe care s-ar putea să îl ai pe mobil, dar nu pe desktop.

• ›

  Fișiere separat.

• ›

  Fără cache pentru utilizatorii autentificați, mai ales pentru că, dacă fac editări, nu vreau caching.

• ›

  Timpul de cache, care depinde de câte modificări faci pe site-ul tău. Dacă este un site de știri zilnic, scurt; dacă este conținut care nu se actualizează frecvent, mai lung.

Lazyload

Funcția lazyload ajută la afișarea resurselor (Imagini și Iframe-uri) când utilizatorul are nevoie de ele; adică, browserul nu încarcă aceste resurse până când utilizatorul nu face scroll până la ele. Această funcție este implementată în multe plugin-uri și chiar vine preconfigurată în unele teme WordPress. De la versiunea Chrome 76 încolo, vine chiar nativ în browser.

Aceasta înseamnă că, prin adăugarea atributului loading="lazy", browserul interpretează deja încărcarea lazy a imaginii, dar bineînțeles că nu orice browser va interpreta acest lucru, așa că îți recomand să continui să folosești plugin-ul. Iată un videoclip preluat de pe web.dev care arată un exemplu despre ce înseamnă încărcarea lazy a imaginilor.

Optimizarea iframe-urilor

Dacă folosim iframe-uri pentru a integra conținut de pe alte site-uri, avem două acțiuni pe care le putem folosi pentru a îmbunătăți încărcarea noastră.

• ›

  Încărcarea lazy prin funcția lazyload

• ›

  Sau înlocuirea iframe-ului cu o imagine până când utilizatorul dă click pe ea.

Atât prima, cât și a doua opțiune pot fi activate prin, încă o dată, plugin-ul nostru de bază WP Rocket.

Autoptimize nu are această parte, dar oferă instalarea unui plugin complementar pentru a o face https://wordpress.org/plugins/wp-youtube-lyte/

Încărcarea amânată a fișierelor JS cu Defer sau Async

Fișierele JS sunt unul dintre vinovații pentru ceea ce auditurile de viteză numesc blocarea randării unei pagini. Acest lucru se întâmplă când, în timpul randării, browserul se oprește pentru a descărca un fișier JS și a-l executa. Scopul optimizării WPO este de a livra informații utilizatorului cât mai curând posibil, motiv pentru care acest lucru este considerat blocare, pentru că nu se randează nimic până când JS-ul descărcat nu se execută.

De aceea acest tip de acțiune tinde să fie semnalat în audit. Când folosim plugin-uri sau teme de la terți care nu sunt bine optimizate, putem avea JS care blochează randarea pentru că se află, de exemplu, în header.

În aceste cazuri ar trebui să folosim două atribute care sunt adăugate în codul de apel al JS-ului, Defer și Async. Pentru ca aceste atribute să funcționeze, scripturile trebuie să fie externe.

La SEO Alive folosim plugin-ul Pre Party Resource Hints, care îți permite să selectezi ce fișiere și ce metodă de încărcare vrei să aplici. O minune!

Care este diferența dintre Defer și Async?

Deși ambele atribute au un scop similar, împiedicarea opririi interpretării HTML a DOM-ului de către JS, există o diferență notabilă între cele două.

Cu atributul Async resursa este descărcată fără a opri încărcarea HTML-ului, dar odată descărcată, încărcarea HTML este pusă în pauză pentru a executa JS-ul; cu atributul defer resursa este de asemenea descărcată în paralel cu încărcarea HTML-ului, dar rulează când încărcarea se termină, așa că nu există blocare din partea scriptului.

În această privință există diferențe între WP Rocket și Autoptimize. WP Rocket îți face deciziile mult mai ușoare și acționează într-un mod semi-automat pentru a împiedica JS-ul să blocheze randarea; în Autoptimize, pe de altă parte, poți doar comuta opțiunea Async.

În Autoptimize, sub tab-ul extra avem această opțiune de a adăuga fișierele JS pe care vrem să le încărcăm cu Async, dar pentru o flexibilitate mai mare recomandă un alt plugin complementar, "Async Javascript".

Cu acest plugin putem lucra atât cu Defer, cât și cu Async, și chiar oferă opțiuni cu un singur click pentru a ușura lucrurile. Lucrul bun la acest plugin este că putem lucra cu scripturi și le putem exclude pe cele pe care le considerăm necesare. În WP Rocket, pe de altă parte, trebuie să avem încredere în ceea ce face plugin-ul, deși o face bine.

Această opțiune se află în același tab de optimizare a fișierelor.

Ce este un CDN și cum ne poate ajuta?

Un CDN este ceea ce este cunoscut ca o rețea de distribuție a conținutului. CDN-ul este responsabil pentru salvarea unei părți din informații și resurse pentru a ușura încărcarea serverului pentru acele resurse și a răspunde mai bine la încărcare. CDN-urile au de asemenea o funcție de copiere geografică, pentru a menține resursa disponibilă în diferite puncte și a o livra utilizatorului indiferent de unde se conectează. De obicei acest tip de serviciu este folosit pentru fișiere grele precum Imagini și Videoclipuri.

Înscrierea la acest serviciu este importantă când avem site-uri cu mult trafic, deși nu ar trebui exclusă pentru site-urile cu puțin trafic.

Alte acțiuni care ne vor aduce puțin mai multă îmbunătățire

Pentru a încheia articolul avem încă 3 îmbunătățiri care, deși nu vor produce schimbări uriașe în timpii de încărcare, ne vor ajuta să reducem cererile, și în cele din urmă asta este ceea ce vrem.

Optimizarea fonturilor

Optimizarea fonturilor se poate face prin plugin-uri sau manual prin editarea și optimizarea CSS-ului. Idealul ar fi să apelezi doar fontul pe care urmează să îl folosești și nu, așa cum se întâmplă în multe cazuri, să descarci un fișier cu toate Google Fonts.

Autoptimize are o opțiune pentru a lucra la fonturi.

Este greu de spus ce opțiune să alegi fără a vedea proiectul, pentru că nu știu ce font folosește șablonul tău și când se încarcă, așa că cel mai bine este să testezi și să vezi rezultatul.

După cum vezi, imediat după opțiunile Google Fonts avem "Remove Emoji", care ne va economisi o cerere către server. Funcția sa este pur și simplu de a converti simbolurile care reprezintă emoji-uri în pictogramă.

WP Rocket ne permite de asemenea să dezactivăm aceste emoji-uri și oferă de asemenea opțiunea de a împiedica integrarea conținutului pe site-uri terțe.

În cele din urmă există multe acțiuni pentru îmbunătățirea vitezei de încărcare a unui site. Nu este întotdeauna posibil să lucrezi în profunzime pentru a optimiza fiecare resursă, pentru că depinde de tipul de afacere și de ceea ce are nevoie.

Sper ca acest ghid de optimizare WPO să fie util și să îl poți aplica proiectelor tale sau pentru clienții tăi.