Optimizarea unui Website, cresterea performantei

Optimizarea unui Website, cresterea performantei

Optimizarea unui Website, cresterea performantei – La ora actuala, orice model de website, trebuie sa fie bine optimizat din punct de vedere tehnic, daca dorim sa avem succes in mediul online. In toate discutiile mele pe forum-urile din Romania si strainatate, am incercat sa explic ca o foarte mare importanta o are partea de optimizare SEO on-page, care se refera in mare parte si la viteza de incarcare in browser.

Mai nou, Google, foloseste un algoritm creat special pentru viteza de incarcare in browser, deci, unul dintre factorii importanti care influenteaza pozitionarea in rezultatele organice. Statisticile spun ca mai mult de jumatate din utilizatorii de Internet, se asteapta ca un website sa se incarce in mai putin de doua secunde si este perfect normal, timpul costa bani nu? Pentru a mari viteza de incarcare in browser, a unui website, exista mai multe tehnici dar in articolul de fata voi discuta despre fisierul .htaccess, care ne ajuta in cresterea performantei website-ului prin adaugarea de coduri speciale.

Ce este un fisier .htaccess?

.htaccess este un fișier de configurare care se utilizeaza pe servere web Apache si se afla in directorul radacina sau se mai poate gasi in diverse subdirectoare unde sunt necesare comenzi custom. Fisierul .htaccess, ofera posibilitatea de a controla un anumit director sau o parte a serverului (daca facem referire la shared hosting). Prin utilizarea fișierului .htaccess putem modifica configurarile software de tip server, pentru a opri sau satarta rularea unor functionalitati de server si caracteristicile acestuia la nivel local, adica pe partea noastra din server.

La ce ne ajuta .htaccess?

  • la optimizarea site-ului
  • la imbunatatirea vitezei de incarcare in browser
  • la protejarea prin parola a diverselor directoare, etc.
  • la blocari de IP-uri si multe alte servicii

Fisierul .htaccess, se poate gasi in directorul radacina. Numele acestuia incepe cu punct (.), care arata ca acest fisier, este un fisier ascuns. Fisierul .htaccess, ne poate ajuta la compresia website-ului, adica la reducerea dimensiunii unui document (fisier text, imagine, etc.). Acest fisier reduce durata de raspuns a serverului, adica volumul de date aflat in website si trimis catre browser, va fi mai mic datorita compresiei.

Cele mai folosite module de compresie pe serverele de hosting, sunt “mod_gzip” si “mod_deflate”, pentru Apache, sau echivalentul pentru alt server Web. daca unul din ele nu functioneaza bine, il folosim pe celalalt. Comprimarea datelor de pe server mareste viteza de incarcare in browser si se aplica fisierelor de tip HTML, JavaScript, CSS, imagini, fisiere XML. In general comprimarea datelor poate fi facuta pana la 60-70%.

Pentru viteza de incarcare in browser si optimizarea codului sursa, putem folosi PageSpeed Insights, de la Google. Aceasta unealta gratuita ne ajuta sa vedem procentul de optimizare al website-ului si timpul de incarcare a continutului in browser. In acelasi timp, unealta PageSpeed Insights, ne da detalii despre modul in care se pot rezolva eventualele probleme.

Coduri .htaccess, pentru optimizare

mod deflate – modulul respectiv trebuie sa fie instalat pe server dar majoritatea serverelor de hosting, au instalat acest modul

# START COMPRESIE DEFLATE
<IfModule mod_deflate.c>
# Compresare fisiere HTML, CSS, JavaScript, Text, XML si fonturi
 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
</IfModule>
# FINAL COMPRESIE DEFLATE

Compresie GZIP

# START COMPRESIE GZIP
<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>
# FINAL COMPRESIE GZIP

Cache, pentru browsere

Prin setarea cache-ului pentru browsere, practic se instiinteaza browserul sa pastreze informatia culeasa de pe site-ul nostru pentru o anumita perioada de timp intr-un fisier cache, din memoria locala. Cand website-ul nostru se va interoga din nou in browser, informatia se va incarca foarte rapid din memoria locala, nu de pe serverul nostru de hosting. Pentru acest lucru avem nevoie de doua module Apache, mod_expires si mod_headers, care ar trebui sa existe pe server. Ambele metode pot fi setate in acelasi timp, din fisierul .htaccess.

Comenzi pentru antete (header) – Expires headers

#START COMENZI HEADER
<IfModule mod_expires.c>
# Expirari
ExpiresActive On
# Metoda default: 1 ora de la interogare
ExpiresDefault "now plus 1 hour"
# CSS si JS: 1 saptamana de la interogare
ExpiresByType text/css "now plus 1 week"
ExpiresByType application/javascript "now plus 1 week"
ExpiresByType application/x-javascript "now plus 1 week"
# Imagini: 1 o luna de la interogare
ExpiresByType image/bmp "now plus 1 month"
ExpiresByType image/gif "now plus 1 month"
ExpiresByType image/jpeg "now plus 1 month"
ExpiresByType image/jp2 "now plus 1 month"
ExpiresByType image/pipeg "now plus 1 month"
ExpiresByType image/png "now plus 1 month"
ExpiresByType image/svg+xml "now plus 1 month"
ExpiresByType image/tiff "now plus 1 month"
ExpiresByType image/vnd.microsoft.icon "now plus 1 month"
ExpiresByType image/x-icon "now plus 1 month"
ExpiresByType image/ico "now plus 1 month"
ExpiresByType image/icon "now plus 1 month"
ExpiresByType text/ico "now plus 1 month"
ExpiresByType application/ico "now plus 1 month"
# Fonturi Web
ExpiresByType font/truetype "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
</IfModule>
#FINAL COMENZI HEADER

Control Cache – Cache-Control

# START Cache-Control Header
<ifModule mod_headers.c>
 <filesMatch "\.(ico|jpe?g|png|gif|swf)$">
 Header set Cache-Control "public"
 </filesMatch>
 <filesMatch "\.(css)$">
 Header set Cache-Control "public"
 </filesMatch>
 <filesMatch "\.(js)$">
 Header set Cache-Control "private"
 </filesMatch>
 <filesMatch "\.(x?html?|php)$">
 Header set Cache-Control "private, must-revalidate"
 </filesMatch>
</ifModule>
# FINAL Cache-Control Antete

ATENTIE!! Nu este nevoie sa setam directiva “max-age” pentru Cache-Control Antete, deoarece acesta optiune este deja stabilit de modulul “mod_expires”. In alte cazuri ar trebui sa folosim urmatorul cod .htaccess:

# START Cache-Control Antete
<ifModule mod_headers.c>
 <filesMatch "\.(ico|jpe?g|png|gif|swf)$">
 Header set Cache-Control "max-age=2592000, public"
 </filesMatch>
 <filesMatch "\.(css)$">
 Header set Cache-Control "max-age=604800, public"
 </filesMatch>
 <filesMatch "\.(js)$">
 Header set Cache-Control "max-age=216000, private"
 </filesMatch>
 <filesMatch "\.(x?html?|php)$">
 Header set Cache-Control "max-age=600, private, must-revalidate"
 </filesMatch>
</ifModule>
# FINAL Cache-Control Header

Leave a Comment