„Viteza de incarcare” este un subiect important in zilele noastre. Nu ne place sa asteptam si daca unui site ii ia prea mult timp sa se incarce, il parasim imediat, in cautarea unei alte optiuni. Acest lucru poate avea efecte negative pentru o companie, de la vanzari mai putine, la o pozitie inferioara in motoarele de cautare.
Daca vrei ca site-ul tau WordPress sa fie mai rapid, sunt cateva lucruri pe care le poti face, pentru a imbunatati viteza de incarcare. Le vom parcurge pe rand.
- Alege un host de calitate
- Optimizeaza imaginile
- Foloseste lazy loading pentru imagini si video-uri
- Activeaza cache-ul
- Activeaza compresia gzip
- Optimizeaza baza de date
- Inlocuieste modulele lente
- Dezactiveaza pingbacks, trackbacks si alte lucruri de care nu ai nevoie
- Dezactiveaza hotlinking-ul
- Redu dimensiunea fisierelor javascript si CSS
- Foloseste un CDN
Dar, inainte de asta, sa vedem de ce viteza de incarcare a website-ului tau este importanta.
De ce viteza de incarcare a site-ului web este importanta
Cand creezi un website, probabil ca tii cont de bunele practici in materie de SEO (Search Engine Optimization – optimizare pentru motoarele de cautare), pentru ca vrei ca site-ul tau sa fie cat mai usor de gasit. Majoritatea traficului din motoarele de cautare este distribuit catre primele 10 rezultate si foarte putine persoane ajung sa caute pe a doua pagina.
Viteza de incarcare a unui site web este unul din factorii de care Google tine cont atunci cand ofera rezultatele unei cautari. Viteza de incarcare este corelata cu rata de respingere (procentul persoanelor care parasesc o pagina web, la scurt timp dupa ce au deschis-o).
O rata de respingere ridicata nu este neaparat un lucru rau. Asta poate insemna ca persoanele nu au gasit ceea ce cautau, ca nu au avut rabdare ca pagina sa se incarce, sau ca au gasit ce cautau si au inchis pagina, multumiti.
Asigurandu-te ca ai un website care se incarca foarte repede, poti elimina din start una din pozibilele cauze ale unei rate de respingere ridicate.
Cum sa masori viteza de incarcare a site-ului tau WordPress
Viteza de incarcare a unui site poate fi influentata de mai multi factori si, pentru a o putea imbunatati, mai intai trebuie analizata.
Pentru asta exista mai multe variante si le vom analiza pe cele mai populare 3 metode.
A. Google PageSpeed Insights
Asa cum se poate intelege din denumire, este un serviciu oferit de Google. Este destul de intuitiv, se introduce link-ul site-ului si se apasa pe buton.
Google va analiza pagina respectiva si va genera un raport. Va oferi, de asemeni, un scor, de la 0 la 100, atat pentru versiunea de desktop/laptop, cat si pentru cea de mobil. In functie de rezultat, vei primi recomandari cu privire la modurile in care poti imbunatati acest scor. Vom vorbi despre ele in acest articol.
Un alt serviciu, oferit de Google, este Test My Site. Acesta va analiza versiunea pentru mobil a website-ului tau si va genera un raport.
Noi nu folosim serviciile oferite de Google, decat pentru a obtine timpul de raspuns al serverului.
B. GTmetrix
Un alt serviciu, care te poate ajuta sa masori viteza de incarcare a website-ului tau WordPress, este GTmetrix. Il poti folosi direct, fara a crea un cont. Insa, daca alegi sa iti faci un cont, vei avea la dispozitie mai multe optiuni, atunci cand analizezi un site (browser, viteza conexiunii sau locatia). In plus, vei avea un istoric al testelor si asta te poate ajuta daca vrei sa optimizezi un site WordPress si vrei sa vezi efectele anumitor modificari.
Dupa ce site-ul tau este analizat, vei primi o nota, de la A la F, si un raport, ce iti va arata ce imbunatatiri poti face. GTmetrix analizeaza viteza de incarcare a website-urilor atat conform parametrilor Google (Google PageSpeed), cat si a celor Yahoo (YSlow). Raportul generat iti poate arata dimensiunea paginii, numarul de interogari si o succesiune a acestora.
C. Pingdom
Un serviciu similar, ce te va ajuta sa analizezi timpul de incarcare a paginii tale, este Pingdom. Este la fel de simplu de folosit si poti analiza site-ul din 7 locatii diferite. Ca si la Google PageSpeed, sau GTmetrix, raportul generat va da o nota site-ului si iti va oferi sfaturi in privinta imbunatatirilor ce pot fi realizate.
Cum poti imbunatati viteza de incarcare a website-ului tau WordPress
In functie de situatia in care se afla site-ul tau web, exista anumite actiuni pe care le poti efectua, pentru a creste viteza de incarcare.
1. Alege un host de calitate
Nu vreau sa spun ca ieftin inseamna neaparat calitate proasta, insa, daca alegi un host ieftin, va trebui ca asteptarile tale sa fie ajustate. Daca timpul de raspuns al serverului, unde este gazduit site-ul tau, are nevoie de mult timp pentru a trimite informatia catre utilizator, orice alta imbunatatire va fi facuta in zadar.
De-a lungul timpului, am avut de a face cu diverse companii de gazduire si sustinem cu tarie ca un host de calitate este foarte important. Tine cont si de asistenta pe care o ofera clientilor, mai ales daca nu ai foarte multa experienta in aceasta arie.
Un alt lucru de luat in calcul este locatia fizica a serverelor. Daca marea majoritate a persoanelor ce viziteaza site-ul tau web sunt dintr-o anumita tara, poate ca alegerea unui host cu serverele in acea tara ar fi o idee buna.
2. Optimizeaza imaginile
Aceasta etapa este foarte importanta, deoarece imaginile ocupa mult spatiu si un impact major asupra vitezei de incarcare a unui website. Daca pana acum nu optimizai imaginile, inainte de a le incarca pe site, aceasta schimbare va creste viteza de incarcare destul de mult.
Pentru a optimiza imaginile poti folosi un software, precum Photoshop, sau una din diversele unelte disponibile online. Un program asemanator cu Photoshop, ce ruleaza in browser, este Photopea. Poti, de asemenea, sa folosesti un modul, pentru a optimiza imaginile.
Chiar daca noi optimizam imaginile, inainte de a le incarca pe site, folosim si un modul, care duce optimizarea chiar mai departe, fara a pierde din calitate. Acesta este Imagify si are si o varianta gratuita, ce ofera 25MB pe luna. Ar trebui sa fie suficient pentru un website de dimensiuni mici. Daca nu iti place acesta, mai exista si alte variante.
3. Foloseste lazy loading pentru imagini si video-uri
Aceasta practica iti va fi folositoare, in special, daca site-ul tau are pagini cu multe imagini sau video-uri. Folosind lazy loading, imaginile se vor incarca progresiv, pe masura ce utilizatorul parcurge pagina. Unele teme au aceasta functie incorporata (ex: Avada). Daca tema nu are aceasta optiune, exista module care te pot ajuta.
Acelasi lucru este valabil si pentru video-uri, iar un bun exemplu de modul este acesta. O abordare mai avansata ar fi sa folosesti imagini pentru video-uri, iar acestea vor porni in momentul in care utilizatorul da click pe imagine. Un tutorial amanuntit poate fi gasit aici.
4. Activeaza cache-ul
De fiecare data cand o persoana deschide o pagina web, toata informatia ce sta la baza acelei pagini (text, imagini, fonturi, scripturi) este descarcata in calculator sau telefon. Avand cache-ul activat, a doua oara cand persoana respectiva intra pe pagina, browser-ul va folosi informatia stocata pe calculator/telefon, si viteza de incarcare va fi mult mai mare. Neavand cache-ul activat, informatia va fi descarcata de pe server, de fiecare data cand pagina este accesata.
Nu de fiecare data, insa, cache-ul este cea mai buna solutie. Daca informatia de pe site este statica (continutul este schimbat din cand in cand), atunci, probabil, ar fi bine sa activezi cache-ul. Daca, in schimb, continutul este dinamic (de exemplu, un magazin online, cu multe comenzi), situatia este un pic mai complexa si activarea cache-ului este discutabila.
Exista host-uri care au cache-ul implementat la nivel de server, si nu trebuie sa faci nimic. In caz contrar, poti folosi unul din modulele special concepute pentru acest lucru. Noi folosim de obicei WP Fastest Cache.
5. Activeaza comprimarea gzip
Cand serverul unde este gazduit site-ul tau are comprimarea gzip activata, informatia dintr-o pagina (HTML si CSS) este mai intai comprimata si abia apoi trimisa catre browser. Acest proces poate reduce dimensiunea fisierelor cu pana la 70% si viteza de transfer va fi mai mare.
Pentru a verifica daca host-ul tau are aceasta optiune activa, exista site-uri unde poti introduce link-ul si poti afla daca comprimarea gzip este activa.
Pentru a activa comprimarea gzip pe site-ul tau WordPress, una din variante ar fi sa folosesti un modul de cache, ce au aceasta optiune (cum ar fi WP Fastest Cache). O alta optiune ar fi sa adaugi manual un fragment de cod in fisierul .htaccess (pentru server Apache) sau in fisierul nginx.conf (pentru server Nginx).
Acesta este codul ce trebuie introdus in fisierul .htaccess:
<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>Iar acesta este codul pentru nginx.conf:
gzip on;
gzip_disable "MSIE [1-6]\.(?!.*SV1)";
gzip_vary on;
gzip_types text/plain text/css text/javascript image/svg+xml image/x-icon application/javascript application/x-javascript;6. Optimizeaza baza de date
Baza de date contine toate informatiile prezente pe site-ul tau web. Pe masura ce site-ul este dezvoltat, marimea bazei de date creste si, din aceasta cauza, ea poate ingreuna functionarea site-ului.
Pentru un scurt exemplu, sa presupunem ca la un moment dat instalezi un modul. Dupa ce il testezi, te hotarasti ca nu e ceea ce iti trebuie si il dezinstalezi. Chiar daca faci acest lucru, in baza de date vor ramane cateva informatii, pentru cazurile in care te razgandesti, sau modulul a fost eliminat din greseala. Exista si module ce iti ofera optiunea sa elimini toate informatiile din baza de date, odata ce il dezinstalezi, dar acestea sunt putine.
Marimea bazei de date poate creste si din cauza reviziilor articolelor, a elementelor sterse si a comentariilor spam. In mod implicit, WordPress va stoca un numar nelimitat de revizii pentru pagini si articole. Pentru a schimba asta, poti adauga urmatoarea linie de cod in fisierul wp-config.php:
define( 'WP_POST_REVISIONS', X );Inlocuieste „X” cu numarul de revizii pe care vrei sa il pastrezi.
Baza de date poate fi optimizata din contul de gazduire, prin phpMyAdmin, dar este o metoda putin mai anevoioasa. O varianta mai simpla ar fi utilizarea unui modul. Exista diverse optiuni, iar noi folosim, de obicei, WP-Optimize, pentru ca avem optiunea de a elimina tabele din baza de date ce nu mai sunt folosite.
Daca vrei sa mentii numarul de module minim, o varianta ar fi sa il instalezi din cand in cand, sa faci optimizarea si apoi sa il dezinstalezi.
7. Inlocuieste modulele lente
Exista o multitudine de module pentru WordPress, ce ofera o varietate de functii pentru site-ul tau. Cu toate acestea, inainte de a instala un nou modul, trebuie sa tii cont de faptul ca acesta va influenta viteza de incarcare a site-ului tau. Unele module mai mult decat altele. Daca poti evita instalarea unui nou modul, prin adaugarea catorva linii de cod, poate ar fi mai bine. Analizand succesiunea interogarilor din analiza GTmetrix (waterfall), poti identifica modulele care au nevoie de cel mai mult timp pentru a functiona. O alta metoda ar fi prin folosirea modulului Query Monitor.
De exemplu, se stie ca Contact form 7 nu este cel mai rapid modul pentru formulare de contact. Daca il folosesti pe site-ul tau, ai putea incerca o alternativa, cum ar fi Caldera forms.
In plus, ar fi de evitat folosirea a mai multor module, care fac acelasi lucru. De exemplu, daca folosesti Yoast, pentru SEO, nu mai ai nevoie de un alt modul pentru a genera o harta a site-ului, deoarece Yoast are deja aceasta optiune.
8. Dezactiveaza pingbacks, trackbacks si alte lucruri de care nu ai nevoie
Nu o sa intru in prea multe detalii despre ce inseamna pingbacks si trackbacks. Mai multe informatii pot fi gasite aici. Daca nu ai nevoie de aceste optiuni, ai putea sa le dezactivezi.
O alta optiune, ce consuma resurse, este API-ul heartbeat. Daca esti singura persoana ce lucreaza la site si nu sunt functii ce depind de hearbeat API, poti dezactiva aceasta functie complet. Varianta simpla ar fi sa instalezi un modul, cum ar fi Heartbeat Control, sau poti adauga cateva linii de cod in fisierul functions.php. Urmatorul cod va dezactiva API-ul heartbeat:
add_action( 'init', 'stop_heartbeat', 1 );
function stop_heartbeat() {
wp_deregister_script('heartbeat');
}Exista si alte lucruri pe care le poti modifica la site-ul tau WordPress si am gasit un modul interesant, ce te lasa sa te „joci” cu mai multe setari, cum ar fi numarul de revizii, pingbacks, heartbeat si altele. Aceste se numeste Clearfy.
Aici ar mai fi de spus ca daca sunt module, pe care le folosesti din cand in cand, cum ar fi cel pentru optimizarea bazei de date, le poti tine dezactivate si activa doar cand le folosesti.
9. Dezactiveaza hotlinking-ul
Hotlinking-ul este o practica ce iti poate consuma din resursele serverului si poate duce chiar la cresterea valorii facturii de gazduire. Prin aceasta operatie, unele persoane incorporeaza pe alte site-uri imagini gazduite pe serverul tau. A crestere brusca a traficului pe aceste site-uri ar putea cauza chiar suspendarea contului tau de gazduire.
Daca observi ca cineva foloseste aceasta practica, cea mai rapida solutie ar fi sa redenumesti imaginile ce sunt preluate. In acest fel, pe acele site-uri va aparea o eroare 404.
Pentru a preveni astfel de probleme, ai putea folosi un CDN (Content Delivery Network), ce include protectie impotriva hotlinking-ului. Un CDN este o retea de servere, ce vor stoca fisierele site-ului tau, asa incat acestea sa poata fi accesate de la o distanta cat mai mica fata de utilizator.
O alta modalitate de a te proteja de hotlinking ar fi prin adaugarea catorva linii de cod in fisierul .htaccess (Apache) sau in fisierul nginx.conf (Nginx).
Acesta este codul pentru Apache:
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?bing.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yahoo.com [NC]
RewriteRule \.(jpg|jpeg|png|gif|svg)$ http://dropbox.com/hotlink-placeholder.jpg [NC,R,L]Iar acesta este pentru Nginx:
location ~ .(gif|png|jpeg|jpg|svg)$ {
valid_referers none blocked ~.google. ~.bing. ~.yahoo. yourdomain.com *.yourdomain.com;
if ($invalid_referer) {
return 403;
}
}Sau mai poti folosi un modul, ce are si aceasta functie printre optiuni, cum ar fi All In One WP Security & Firewall.
10. Redu dimensiunea fisierelor javascript si CSS
Evident ca avand fisiere de dimensiuni mai mici, viteza de incarcare a site-ului va fi mai mare. Pentru a reduce dimensiunea fisierelor javascript si CSS, poti folosi un modul dedicat (cum ar fi Autoptimize), sau poti alege un modul de caching, ce are si aceasta optiune.
11. Foloseste un CDN (Content Delivery Network)
Asa cum am spus si mai sus, CDN-ul este o retea de servere, amplasate in toata lumea, ce stocheaza informatiile site-ului tau. Cand o persoana viziteaza una din paginile website-ului tau, browserul va primi informatii de la cel mai apropiat server din retea. In acest fel, viteza de incarcare va fi mai mare. In plus, CDN-ul include si alte optiuni, cum ar fi SSL, protectie DDoS (Distributed Denial of Service), protectie hotlinking si altele.
Daca ai un website de dimensiuni mici, poti incerca planul gratuit de la Cloudflare. Setarea acestuia este destul de simpla, insa trebuie sa tii cont de faptul ca va trebui sa redirectionezi domeniul tau catre serverele Cloudflare.
Majoritatea modulelor de caching (inclusiv cel pe care il folosim – WP Fastest Cache) se integreaza destul de bine cu Cloudflare.
Tu ce metode folosesti pentru a mari viteza de incarcare a site-ului?
