Exploateaza sistemul de caching al browserelor

By

Traian

Optimizare, Wordpress

Salut,

Cresterea vitezei de (re)afisare a paginii web in browser

Prima postare pe acest blog se refera la optimizarea paginilor de internet:  cresterea vitezei de afisare a paginii web la incarcari repetate in browser.

Dpdv tehnic: vom folosi capacitatea de “caching” a browserelor.

  • Scop: la incarcarea repetata a paginilor vom forta ca imaginile sa se incarce din depozitul “cache” al browserului de pe calculatorul pe care este instalat (al utilizatorului deci…)
  • Rezultat dublu:
  1. reducerea traficului in retea si a consumului de banda
  2. viteza crescuta de incarcare a paginii si deci experienta satisfacatoare pentru user
  • Ce folosim?

Folosim directive in fisierul .htaccess: headerele Expires si Etags. Fisierul .htaccess va trebui sa arate cam asa:

ExpiresActive On
ExpiresByType image/ico “access plus 1 year”
ExpiresByType image/jpg “access plus 1 year”
ExpiresByType image/jpeg “access plus 1 year”
ExpiresByType image/gif “access plus 1 year”
ExpiresByType image/png “access plus 1 year”
ExpiresByType image/bmp “access plus 1 year”
ExpiresByType text/css A300
ExpiresByType text/html A300
ExpiresByType text/javascript A300
ExpiresByType application/javascript A300
ExpiresByType application/x-javascript A300
<FilesMatch “\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|mp3)$”>
FileETag -INode MTime Size
# if you use ETags, you should unset Last-Modified
Header unset Last-Modified
</FilesMatch>
  • Observatii:
  1. daca exista un proxy, atunci vor avea prioritate headerele puse pe acel proxy si codul din htaccess nu va avea rezultatul urmarit
  2. Perioada maxima de pastrare in  cache a elementelor statice (imagini) este 1 an; Pentru fisiere .css.js si eventual .html perioada este 300 secunde, adica 5 minute. (Modificarile in aceste fisiere vor fi vizibile la utilizator dupa cateva minute de la upload)
  • Rezultatul obtinut:
  1. Numarul cererilor catre server pentru imagini la a doua incarcare a paginii vor fi semnificativ mai putine.
  2. Viteza de incarcare a paginii va fi considerabil crescuta. (Incarcare aproximativ instantanee)

Resurse:

 

 

 

 

 

 

Etichete

 

Leave a Reply

Adresa ta de email nu va fi publicată.