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.

serverele de hostingCele 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

ARTICOLE RECOMANDATE

Optimizare SEO, pentru Mobile

  • Optimizare SEO, pentru Mobile – cu aproximativ un an in urma, Google a lansat noua unealta de testare a vitezei de incarcare in browser, pentru paginilor Web. Aceasta unealta ne ajuta sa rezolvam problemele de optimizare SEO, din website. Noua unealta (mai friendly), a fost creata pe principiul PageSpeed Insights, care ne ajuta si la […]

Descrierea ALT, la imagini

  • Descrierea ALT, la imagini – adaugarea unei imagini la o pagina, produs, sau serviciu prezentat, este obligatorie pentru orice model de website. Toate imaginile prezentate in website, trebuie sa contina obligatoriu o descriere alt. Tag-ul Alternative Text, arata motoarelor de cautare despre ce este vorba in imaginea respectiva si ne ajuta la promovarea paginii respective. […]

Raport Text/HTML

  • Ce este un raport Text/HTML? Orice model de website are o anumita cantitate de cod sursa (backend) si o anumita cantitate de text obisnuit in paginile care sunt vizibile vizitatorului (front-end). Raportul TEXT/HTML, se refera la cantitatea de text pe o anumita pagina web fata de codul HTML, de pe aceasi pagina. Rezolvarea acestor probleme […]

Ce este un sitemap, XML si HTML

  • Ce este un sitemap, XML si HTML – orice model de website SEO, ar trebui sa aiba in structura doua modele de sitemap, unul HTML, care sa poata fi studiat de catre vizitatori si un sitemap.xml, care este creat special pentru motoarele de cautare. Un sitemap, etse o harta a site-ului, in care se gasesc […]

Meta Tag-uri Facebook

  • Meta Tag-uri Facebook – Pana nu demult, meta tag-urile, au fost considerate foarte importante pentru un site web. Meta tag-urile ajuta paginile web sa urce in rezultatele organice ale motoarelor de cautare (daca acestea sunt folosite corect). La ora actuala, importanta meta tag-urilor a mai scazut si motivele sunt multiple insa, trebuiesc folosite. Din punctul […]

Scrieti in comentariu pe Info SEO?

Trebuie să fiți logat pentru a posta un comentariu.