Cum sa îmbunătățești viteza de încărcare a unui web site

structura unui web site
Cum trebuie sa fie structura unui web site?
10 iulie 2017
Redesign website
Redesign website
13 septembrie 2017
viteza de încărcare a unui web site

Viteza de încărcare a unui web site este un element absolut decisiv în indexarea unui web site.

Înainte de a demara aceasta acțiune puteți sa verificați acest lucru cu ajutorul instrumentului oferit de google si anume PageSpeedInsights.

Acesta va oferă informații destul de clare si sugestii în cazul in care aveți anumite probleme la încărcarea paginilor web. Daca cineva intra pe site-ul dumneavoastra iar acesta asteapta cateva secunde pana la incarcarea pagini, acesta va iesi in cel mai scurt timp posibil ferm convins ca va gasi informatia dorita pe un alt web site. In acelas mod gandeste si google cand indexeaza site-ul dumneavoastra si la fel de usor puteti fi penalizat pentru o viteza slaba.

Mai jos o sa va explic ce puteti face pentru a imbunatati acest aspect. Ma refer aici numai pentru site-urile gazduite pe un VPS ( Virtual Personal Server ) si pentru site-uri create pe platforma WordPress.

1: Adaugați următoarele coduri în fișierul .htacces

Ce inseamna .htacces si ce rol are acesta? Acesta este un fisier in format ASCII care contine mai multe instructiuni, denumite directive Apache si au rolul de a transmite navigatoarelor anumite informatii. Acesta poate fi creeat/ editat cu un simplu notepad.

Acesta are un rol extrem de important în funcționarea site-ului și numai o mica eroare va poate duce la funcționarea greșita a serverului. Comenzile din .htaccess acționează la nivel de director, influențând toate fișierele din directorul curent (în care acesta se afla) cat si subdirectoarele acestuia. Puteți pune un fișier .htaccess în fiecare director, dacă doriți setări diferite, un subdirector va fi afectat de cel mai aproape .htaccess.

Mai exact, pentru a comprima informatia din web site, adaugati codul urmator in fisierul de care am discutat mai sus:

Activeaza GZIP pe serverul tau:

#BEGIN GZIP Compression
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# END GZIP Compression

 

Aceste set de instructiuni va „spune” navigatorului ( google chrome, Internet Explorer, etc.. ) ca informatia de pe pagina este comprimata generand astfel o foarte mare economie de spatiu.

Puteti testa GZIP Compression pentru site-ul dumneavoastra la pagina urmatoare:

http://www.whatsmyip.org/http-compression-test/

Un alt cod pe care il puteti adauga aici si va poate reduce timpul de raspuns al serverului este urmatorul:

# BEGIN Expire headers
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault „access plus 5 seconds”
ExpiresByType image/x-icon „access plus 604800 seconds”
ExpiresByType image/jpeg „access plus 604800 seconds”
ExpiresByType image/png „access plus 604800 seconds”
ExpiresByType image/gif „access plus 604800 seconds”
ExpiresByType application/x-shockwave-flash „access plus 604800 seconds”
ExpiresByType text/css „access plus 604800 seconds”
ExpiresByType text/javascript „access plus 604800 seconds”
ExpiresByType application/javascript „access plus 604800 seconds”
ExpiresByType application/x-javascript „access plus 604800 seconds”
#ExpiresByType text/html „access plus 600 seconds”
#ExpiresByType application/xhtml+xml „access plus 600 seconds”
</ifModule>
# END Expire headers

 

Ce înseamna mai exact „Expire headers” . Expirarea anteturilor ii spune browser-ului ( navigator web ), dacă ar trebui să solicite un anumit fișier de pe server sau dacă ar trebui să îl captureze din memoria cache a browserului.

Ideea din spatele „Expire headers” nu este doar de a reduce timpul descărcărilor de pe server, ci mai degrabă pentru a reduce numărul de cereri HTTP pentru server.

Când vizitați un site web, browserul dvs. este responsabil pentru comunicarea cu serverul web pentru a descărca toate fișierele necesare. Apoi compilează aceste fișiere pentru a afișa pagina web. Pe măsură ce paginile web devin mai bogate în grafică și conținut, tot mai multe fișiere sunt transferate între aparatul dvs. și serverul web.

Cum functioneaza Expire headers„?

Expire headers” sunt destul de simple în modul în care funcționează. Ei spun browser-ului cât timp să stocheze un fișier în memoria cache, astfel încât vizualizările ulterioare ale paginilor și vizitele la care nu trebuie să descarce din nou fișierul.

ATENTIE: Folosirea acestui cod ajută la creșterea timpului de încărcare pentru vizitatorii care se întorc si nu la prima incarcare a site-ului pe dispozitivul dumneavoastra insa acest element contribuie destul de mult la viteza de încărcare a unui web site.

Adaugați deasemenea și codul următor în .htacces

# 1 Month for most static assets
<filesMatch „.(css|jpg|jpeg|png|gif|js|ico)$”>
Header set Cache-Control „max-age=2592000, public”
</filesMatch>

Ce inseamna Cache-Control? 

Cache-Control este un antet HTTP care definește timpul și modul în care trebuie să fie stocat un fișier.

Atunci când un fișier este accesat de un browser, antetele HTTP sunt de asemenea preluate. Când se include antetul Cache-Control, browserul va respecta valorile găsite acolo.

Dacă un browser vede că un fișier ar trebui să fie stocat în memoria cache timp de cinci minute, acesta va rămâne în cache-ul browser-ului timp de cinci minute, iar fișierul nu va trebui să fie recuperat dacă acesta este apelat din nou.
Insa la fel ca mai sus, acest element îmbunătățește viteza de încărcare a unui web site după prima vizita!

2: Instalati modulu WP Smush

Cu o medie de 4,8 din aproximativ 3.200 de recenzii WP Smush face o treaba excelenta. Eu personal am testa acest plugin pe mai multe proiecte și am fost mulțumit.

viteza de încărcare a unui web site

Smush Image Compression and Optimization

Ce face mai exact WP Smush

Redimensionați, optimizați și comprimați toate imaginile dvs. cu doar un click!

WP Smush scanează cu meticulozitate toate imaginile pe care le încărcați – sau le-ați adăugat deja pe site-ul dvs. – taie toate datele inutile și le redimensionează pentru dvs. înainte de a le adăuga la biblioteca dvs. media.

Este posibil să doriți să comprimați imaginile stocate în alte foldere. Smush vă permite să comprimați orice imagine din orice director, astfel încât să puteți optimiza toate imaginile de pe site-ul dvs. – inclusiv imaginile NextGEN sau o alta galerie de imagini.

Acest modul este oferit in mod gratuit de către dezvoltator insa dispune si de versiunea PRO care aduce mai multe beneficii cum ar fi redimensionarea imaginilor mai mari de 1G . In versiunea gratuita acest lucru nu este posibil!

Deasemenea in versiunea gratuita acesta acționează pentru maxim 50 de imagini dupa care trebuie redemarat din nou. In varianta PRO acest lucru permite scanarea unui număr nelimitat de imagini.

Dupa ce este finalizata acțiunea de redimensionare la fiecare imagine se afișează un mic raport cu economia de spațiu făcuta de acesta. Va recomand instalarea acestuia încă de la demararea unui web site în WordPress.

3: Instalați modulul Autoptimize pentru viteza de încărcare a unui web site

Acesta are o medie de 4,7 din partea utilizatorilor din aproximativ 250 de recenzii, ceea ce este un scor foarte bun pentru un plugin de optimizare web.

Autoptimize

Autoptimize, modul wordpress de optimizare viteza de incarcare

Una din erorile cele mai des întâlnite atunci când realizați un test pentru viteza de încărcare a unui web site este:
Eliminați resursele JavaScript și CSS care blochează redarea conținutului din partea superioară a paginii

Ce înseamna acest lucru? Toate site-urile conțin pana în ” /head” informații utile  pentru pagina cum ar fi scripturi Java și legături către fișiere CSS, elemente foarte importante pentru aspectul și funcționarea site-ului însa atunci când un navigator încarcă o pagina web, este nevoit sa încarce si aceste scripturi ceea ce face sa încetinească viteza de încărcare.

Modulul Autoptimize muta aceste scripturi în „subsolul” paginii. Acest lucru este și sugestia de la Google page speed Insight.

In mod normal acest lucru se poate face si manual insa necesita anumite cunostinte de programator deoarece trebuie identificat ID-ul scriptului care doriti sa il mutati in footer iar apoi trebuie sa creați un set de instrucțiuni in PHP care sa facă acest lucru. Va spun sincer ca nu este o munca ușoara!

Este recomandat ca o data cu acest modul sa instalați și WP Super Cache, despre care vom discuta mai departe.

4: Instalați modulul WP Super Cache

Este un modul cu o medie de 4,3 din aproximativ 1.300 de recenzii.

 

Dupa instalarea acestui modul, pentru a il activa mergeti la Settings » WP Super Cache.

După ce activați memoria cache, faceți clic pe butonul de test pentru a verifica dacă funcționează. WP Super Cache va prelua de două ori site-ul WordPress și va compara timbrele ambelor pagini. Dacă ambele timbre se potrivesc, aceasta înseamnă că caching-ul funcționează acum pe site-ul dvs.instalare wp super cache

 

Cum functioenaza WP-Super-Cache?

Acest modul generează fișiere html statice din blogul tău dinamic WordPress. După ce un fișier html este generat, serverul tău web va servi acest fișier în loc de a procesa scripturi PHP din WordPress, care sunt comparativ mai greoaie și mai scumpe.

Fișierele html statice vor fi servite pentru marea majoritate a utilizatorilor tăi:

  1. Utilizatorii care nu sunt autentificați.
  2. Utilizatorii care nu au lăsat un comentariu pe blogul tău.
  3. Sau utilizatorii care nu au văzut o parolă protejată pentru articol.

SETĂRI RECOMANDATE

  1. Cache simplu.
  2. Comprimă paginile.
  3. Nu servii pagini cache pentru utilizatorii cunoscuți.
  4. Reconstruiește cache.
  5. Suport CDN.
  6. Verificări suplimentare pentru prima pagină.

 

Acest modul se poate instala în limba Romana sau Engleza, acest lucru depinde ce limba selectați la instalarea platformei.

Tot ce am scris mai sus se bazează pe experiența mea si va pot garanta ca au dat rezultate. Sunt absolut sigur ca exista mult mai multe variante pentru a îmbunătății viteza unui web site însa un scor de peste 85-90% va poate garanta un progres foarte bun.

De exemplu, eu am aplicat aceste elemente pentru optimizarea unui web site care avea scorul de încărcare 23/100 + 25/ 100 ( rezultatul pe mobil + rezultatul pe desktop )  și după a ajuns la 70/ 100 + 85/ 100 ceea ce a fost destul de satisfăcător.

In multe cazuri depinde foarte mult de tema folosita însa recomandarea mea este sa achiziționați o tema premium pentru siguranța dumneavoastră.

Daca întâmpinați probleme nu ezitați sa a contactați la adresa contact@creare-site-web.com si va pot consilia cu tot ce doriți.

 

 

 

Dragoescu Alin
Dragoescu Alin
Suntem o firma de web design si promovare pe internet din Pitesti pregatita oricand pentru un nou proiect de creare site din orice domeniu de activitate. Profesionalismul înseamnă să ştii cum să faci, când să faci şi să faci.

Sunati acum