Optimizarea site-ului: Sfaturi si Indicatii

postat acum 4 ani de Stefanescu Mihai in categorie iNoob

Construirea unui website decent nu a fost niciudata mai usor de realizat decat acum. Dar, cu template-urile de-a gata gasite pe net si hosturile pregatite care mai de care, sunt prea multe alegeri de facut. Clientii au atatea alegeri de facut incat este foarte greu sa le captezi atentia.

Foarte multe persoane si/sau afaceri se bazea pe site-urile lor ca vor aduce vizitatori si vor castiga bani, deci nu trebuie sa fii atent decat la design, ci si la viteza de incarcare.

Importanta Optimizarii Siteului

Optimizarea site-ului este de obicei neglijata de programator/administrator la felca si de noii web designeri si programatrorii. Dupa ce ai terminat de lucrat la un design responsiv trebuie sa te gandesti la viteza de incarcare. Cercetarile au aratat ca vizitatorii prefera sa isi petreaca mai mult timp pe site-urile ce se incarca mai repede.

Crearea unui design frumos si functional creaza o impresie buna, dar viteza este ce-a care il face pe vizitator sa decida daca se merita sa ramana pe site-ul tau. Optimizarea se observa cel mai bine pe site-urile mari care necesita multe resurse (evident sunt implicate si costuri destul de mari).Google deja a anuntat ca viteza de incarcare este un factor luat in considerare la stabilirea rank-ului website-ului si afisarea pe pagina de rezultate.

O data ce intelegi cum decurge acest proces de optimizare poti incepe sa incorporezi anumite aspecte in design-ul/ codul tau.

Componentele unui Site

Inainte sa mergem mai departe, hai sa discutam despre componentele unui site.

1. Domeniul

Domain Name Systems (DNS) este cel ce leaga un nume de domeniu (precum cooltips.biz) de o adresa de IP a unui server web.  Din moment ce toti scriem domeniile in bara de cautare a browserului este placut sa inceapa incararea site-ului fara intarziere si fara erori .

2. Web Host

Lucrand intr-o companie de hosting observi cum clientii dau vina pe firma respectiva pentru viteza redusa…sunt de acord ca exista cazuri in care firma este de vina pentru ca nu aloca destle resurse, dar sunt si cazuri in care viteza reduse se datoreaza website-ului.

Folosind ping sau trace de pe calculatorul tau poti afla cat de mult dureaza conectarea la serverul tau.

Ce trebuie sa verifici este modul de conectare la server si timpul de raspuns. Nu exista nicio regula batuta in cuie, dar ce-a mai buna metoda este sa compari viteza siteului tau cu cea a competitorilor tai.

3. Fisierele Siteului

O data ce un utilizator incearca sa se conteze si domeniul face legatura cu serverul tau pagina incepe sa se incarce. Majoritatea site-urilor consta in pagini statici sau dinamice, imagini, fisiere CSS si fisiere JavaScript, etc.Site-urile dinemaice, precum cele ce ruleaza pe baza de WordPress mai au o componenta in plus, baza de date.

Numarul de fisiere, numarul de conexiuni, dimensiunea fisierelor, etc…toate afecteaza intr-un mod sau altul viteza de incarcare a site-ului.

Componente ce pot fi optimizate:

  1. Paginile HTML, PHP, etc.
  2. Baza de date
  3. CSS
  4. Imagini
  5. JavaScript

Unelte de testare

1. DNSStuff

DNSstuff este una dintre cele mai folosite ustensile folosita de administratorii de sistem sa verifice si sa monitorizeze problemele legate de DNS.Majoritatea optiunilor necesita cont platit, dar ofera trial gratuit.

2. YSlow

YSlow este un plugin dezvoltast de yahoo pentru a oferi un set de unele de testare a diverselor aspecte ale unui website. Este valabil pentur toate browserele cunoscute.

3. Google PageSpeed

PageSpeed este un website dedicat optimizarii si testarii valabil si sub forma de plugin firefox, valabil si in Chrome deja integrat, bazat pe o serie de reguli YSlow.

4.Pingdom

Pingdom ofera 3 instrumente web gratuite “Full Page Test”, “DNS health”  si  “Ping & Traceroute”.  Interfata si detaliile sunt usor de inteles pentru oricine. Aceste 3 ustensile te ajuta la aflarea locatiei si timpul de raspuns al serverului pe care este localizat siteul tau.

5. GTmetrix

Alaturi de Pingdom, GTmetrix  a fost si este ustensila mea preferata de vre-o 2 ani pana in prezent. Sunt simple te utilizat, afisand testele de viteza bazate pe PageSpeed si YSlow.

 

Optimizeaza-ti siteul

1.Repararea erorilor DNS si alegerea unui host bun

De obicei cand auzim “optimizare” nu ne gandim la domeniu si host…

Alegerea unui host bun ar trebuii sa fie prima problema, nu conteaza locatia companiei de la care cumperi gazduire, dar incearca sa iti tii site-ul pe un server cat ma apropriat de vizitatorii tai (daca faci un site pentru romani, incearca sa tii serverul cel putin in Europa daca nu chiar in Romania).

Daca este posibil, seteaza domeniul cu NS-urile oferite de host, nu va avea impact major dar iti va fi de ajutor la folosirea infrastructurii DNS-urilor lor.

2.Redu numarul de cereri HTTP

Cand un utilizator incearca sa se conecteze la site-ul tau sunt incarcate toate fisierele aditionale in browser (imagini, CSS, JS, etc).Doar fisierele necesare unei specifice pagini ar trebuii sa se incarce, de exemplu: daca folosesti un plugin jQuery intr-o pagina incarca-l decat acolo nu peste tot.

 

3.Optimizeaza-ti pagina si scapa de erorile 404

Inainte de orice, verifica jurnalul (log) siteului sa nu ai erori 404. Fiecare cerere necesita timp, de aceea este necesara rezolvarea tuturor erorilor.

Foloseste fisiere externe pentru CSS si JavaScript, in loc sa le adaugi inline sau intern. Optimizeaza-ti fisierele in asa fel incat HTML-ul, CSS-ul si JS-ul sa fie in fisiere diferite.

4.Asezarea Fisierelor

Am spus si mai devreme, doar un anumit numar de cereri pot fi facute in acelsi timp. Prea multe obiecte ce necesita incarcare are rezulta intr-o durata de incarcare mai mare. Cum CSS-ul este necesar pentru a incarca pagina cum trebuie, toate fisierele CSS ar trebuii incluse din tag-ul <head>.  La incarcarea site-ului este mai importanta functionalitatea decat orice altceva, deci javascripturile (slidere, carusele, etc) ar trebuii sa le incarci ultimele.

5.Redu numarul de conexiuni la baza de date

Conexiunile la baza de date necesita timp, deci daca ai un site ce functioneaza cu o baza de date in spate (precum WordPress), trebuie sa gasesti o metodada de a inputina aceste conexiuni. Acest lucru nu doar ca va ajuta la afisarea informatiei mai rapid, dar va reduce si incarcarea serverului.

6.Optimizarea si combinarea imaginilor

Editoarele de imagini precum Photoshop sau/si Fireworks aduca o multime de metode de comprimare a imaginii, dar tot nu sunt

perfecte. Exista si unelte gratuite precum Smush.it si Image Optimizer.

Oricum, nu folosi HTML pentru a redimensiona o imagine. Foloseste imagini de marimi diferite, iar daca gasesti acest lucru destul de greu de facut foloseste scripturi precum timthumb.

7.Micsoreaza si Comprima Imaginile

Micsorarea, inseamna sa scapi de spatiul gel inutil din fisiere. Daca site-ul tau este static, trebuie sa ai 2 versiuni ale siteului: una pentru teste si una pentru folosire live. pentru site-uri dinamice, precum WordPress exista pluginuri ce micsoreaza nu doar CSS-ul si JavaScriptul, dar ofera si posibilitatea de a combina fisierele CSS.

8.Incarca continutul doar unde este necesar

O tehnica pe care am descoperit-o in ultima perioada, folosita de blog-urile mari, este sa incarcarea continutului necesar. Utilizatorii nu se doc pana in partea de jos a site-ului, nu au nevoie de toate butoanele si scripturile permanent. Daca ai o pagina imensa incarcata cu imagini, javascriptui, etc ar fi o risipa de banda incarcarea ei completa.

9.Optimizare Caching

Fiecare browser are un mod diferit de a lucra cu cache-ul. Cand vizitezi un site pentru prima data, informatia DNS nu este memorata decat in cacheul ISP-ului tau ci si in browserul tau.

Cand o cerere este trimisa catre site-ul tau, diverse tipuri de fisiere, repcum imagini, CSS, JS, etc sunt incarcate, fiecare adaugandu-se la durata totala de incarcare. Unele fisiere raman neschimbate, sa luam ca exemplu cooltips.biz, unde logoul si interfata de navigare sunt memorate de browser iar la urmatoarea vizita vei putea observa cum fisierele neschimbate se incarca mai repede.

Codul urmator va anunta browserul sa salveze anumite lucruri pentru o luna:

[cc name=”wsfcachefb”]

Pentru mai multe informatii despre acest subiect recomand Google Developers section on cachin.

10. Foloseste Content Delivery Network (CDN)

Daca ai folosit pasii de mai sus, nu pot sa iti mai spun decat ca un lucru important este folosirea unui CDN precum  CloudFlare,MaxCDN, etc.

Concluzia

Optimizarea siteului nu iti va afecta cu nimic munca, dar daca ti-ai petrecut zeci de ore gandindu-te cum sa creezi site-ul perfect nu vei muri petrecand alte cateva ore pentru optimizare.

Sunt un tanar programator din Bucuresti ce lucreaza in PHP/Mysql (MySqli/PDO), Laravel, CodeIgniter, MySQL, PostgreSQL, Wordpress, HTML5/CSS3, Sass, Photoshop si multe altele.
Google+ Community Facebook Group
Acest articol a fost mutat de pe vechea platforma.
Pentru orice eroare aparuta la mutare va rog sa ma contactati!
Comentariu postate de Attila-Csaba Szabo
Eroare majora, omule bun, la sectiunea cu expires din screenshotul de mai sus, adica, la ?access 1 day?, vrei sa zici ?access plus 1 month? de exemplu, in primul rand, cache de 1 singura zi, nu are nici un folos, in al doilea rand, daca bagi asa ceva in .htaccess, fara ?plus?, iti va da probabil 500 server error sau in cel mai bun caz, nu se va intampla nimic, deci tot ai ramas fara caching :)
Comentariu postate de Mihai
Imi cer scuze, m-am grabit cand am scris codul?il modific acum. Multumesc pentru raspuns!
Comentariu postate de Cosmin
Eu folosesc PageSpeed? am inteles ca mareste viteza web-site-ului decat pe calculatorul meu?oricum e folositor ca nu astept 10 secunde sa se uploadeze un articol ci doar 3-4. Folositor articolul.Ms
Comentariu postate de Adriana
Foarte bun articolul..felicitari.. eu am sotul care se ocupa de lucrurile astea pentru mine..pe locco..:D