Sfaturi pentru optimizarea unui site web

[aelius]

Avantajele unei incarcari cat mai rapide al site-ului web cred ca sunt destul de evidente, asa ca nu am sa insist sa va explic acest aspect in amanuntime. Cele mai notabile avantaje ar fi:

- Impresia vizitatorului + daca incerc sa deschid un anume site si se va incarca in 90 de secunde, o sa-l evit sau renunt pentru ca timpul costa bani.

- Considerente SEO. Un site bine optimizat care se incarca foarte repede, este mult mai bine vazut in motoarele de cautare precum google.

- Trafic scazut. Nu ma refer la numarul de vizite/hits pe zi, ma refer la traficul ce se face pe serverul web. De multe ori, cu aceleasi resurse, puteti servi mai multe vizite.

Sfaturi bune de luat in seama atunci cand doriti sa va optimizati site-ul web:

- Folositi strict doar imaginile sau elementele grafice care va trebuiesc. Nu incarcati site-ul cu sute de poze. Un potential client vrea sa citeasca despre produsele / serviciile pe care le oferiti, nu vrea sa vada desene animate.

- Minimizati imaginile folosite cu soft-uri specializate care scot din imagini headere si alte informatii nefolositoare. Pentru PNG, un bun exemplu este pngcrush.

- Daca folositi javascript, puneti scripturile inainte de </body>, nu in header. Javascript blocheaza paralel download.

- Nu folositi imagini mari pe care sa le reduceti la dimensiune din codul html, specificand width/height. Aduceti imaginile la dimensiunea corespunzatoare intai, si apoi folositi-le in site.

- Compresati css-urile si evitati spatiile goale si comment-urile. Puteti folosi csstidy pentru acest lucru sau un tool online.

- Evitati includerea in site-ul web a flash-urilor.

- Nu folositi muzica in site. Omul poate asculta Wagner in casti in timp ce navigheaza, sigur nu-i va place mizeria de pe site-ul tau ;-)

- Compresati continutul web cu mod_deflate* si configurati mod_expires**, in special pentru elementele statice. Daca profilul site-ului web va permite, cel mai indicat este sa faceti cache la continutul dinamic, astfel incat sa nu fie interogata baza de date in timp real.

- Folositi un provider de servicii hosting de calitate, si evitati oferte cu 1 euro pe luna si bullshit-uri cu ‘nelimitat’.

- Respectati stimabilul vizitator si nu puneti gramada de coduri de tracking, cookies, scripturi diverse externe, reclame si alte balarii.

* Detalii tehnice pentru mod deflate. Daca exista mod_deflate instalat in apache, puteti folosi in htaccess urmatoarele setari:

  AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4.0[678] no-gzip
  BrowserMatch bMSIE !no-gzip !gzip-only-text/html

** Detalii tehnice pentru mod_expires. Daca exista suport in webserver, puteti adauga urmatoarele linii in fisierul .htaccess:

  ExpiresActive On
  ExpiresDefault "A7200"
  ExpiresByType image/x-icon "access plus 20 years"
  ExpiresByType text/plain A3600
  ExpiresByType image/gif "access plus 20 years"
  ExpiresByType image/png "access plus 20 years"
  ExpiresByType image/jpeg "access plus 20 years"
  ExpiresByType application/x-javascript "access plus 20 years"
  ExpiresByType application/javascript "access plus 20 years"
  ExpiresByType text/css "access plus 20 years"
  ExpiresByType text/html A7200

Tool-uri ce le puteti folosi pe windows pentru a face verificari:

- Extensia firebug pentru Firefox

- Pagespeed

Nota: Daca doriti sa postati acest mic tutorial pe blog-urile voastre, va rog sa specificati sursa cu backlink-ul corespunzator. - Multumesc

Edited October 8, 2012 by aelius

[Xander]

Am intalnit destule librarii facute cu jquery care au nevoie de jquery in header asa ca aveti grija cu jquery inainte de </body> ... in rest foarte bun ce a scris tex dar mai important daca aveti optiunea (serverul vostru) folositi nginx + php-fpm nu se compara cu apache la performanta