Nimanui nu ii place sa astepte dupa ceva, acest lucru este valabil si in cazul siteurilor web unde un vizitator nu sta in medie mai mult de 5 secunde pentru a vizita o pagina web.
De asemenea si Google claseaza siteurile si dupa viteza incarcare a acestora, astfel paginile web ce se incarca mai repede vor fi afisate mai sus in cautari decat cele ce incarca mai greu.
Optimizarea pagini web poate aduce benefici atat pentru vizitatori cat si pentru webmasteri astfel siteurile nu vor mai consuma atat de mult trafic si vizitatori vor avea o navigare mai placuta pe siteul dvs.
Sa vedem practic ce putem face pentru a mari viteza de incarcare a siteului, aceasta este influentata de mai multi factori:
– Gazduirea web
– Multitudinea de cereri http
– Complexitatea paginii
– Designul paginii
– Marimiea fisierelor descarcate
In cele ce urmeaza va vom prezenta cateva metode de marire a vitezei de incarcare a pagini:
Deseori folosirea programelor gen WebSiteMaker, CoffeCup sau a oricarui generator de coduri html nu este recomandata precum si
exportul din Phtotoshop cu slides, deoarece contine foarte mult cod si foloseste tabele in loc de div-uri.
Fundalul pagini web de multe ori este de multe ori mai mare decat e necesar si prea complex.
Folositi unde e posibil doar o culoare sau o imagine mica repetitiva.
Folositi fisiere css/js externe pentru ca fisierele externe sunt salvate in cacheul browserului.
Folositi “font-weight:700;” in locul “font-weight:bold;”, incercati sa definiti padding-ul/margin-ul/border-ul
dintr-un singur rand (ex in loc de “padding-top:5px; padding-left:10px; padding-bottom:15px; padding-right:50px;” padding:5px 10px 15px 50px;).
Culorile scrise prin codul hex format din 3 caractere repetitive se pot scrie in forma lor scurta:
#000 = #000000
#fff = #ffffff
#f0f = #f0ff0f
Exemplele de culori pot continua.
Scoateti toate chestiile inutile de pe pagina cum ar fi topuri gen utils.ro/popup, popunder, cursoare si altele.
Marimea recomandata a unei pagini web este de maxim 100kb.
Fisierele CSS se includ in sectiunea HEAD si cele javascript, cand este posibil, se includ inainte de sfarsitul tagului BODY.
Folositi CSS sprits, folosirea unei singure imagine cu “background-position” pentru div-uri/clase diferite,
mai jos aveti codul css si imaginea:
#Logo{
background-position:2px -35px;
width:225px;
height:49px;
}
#sbutton1{
width:131px;
height:35px;
}
#sbutton2{
background:url('images/sliders_buttons.gif');
width:131px;
height:35px;
background-position:-131px 0;
}
#sbutton3 {
background:url('images/sliders_buttons.gif');
width:131px;
height:35px;
background-position:-262px 0;
}
Folositi Add-on-ul pentru firefox Page Speed.
Daca folositi tag-ul IMG precizati inaltimea si latimea imaginilor pentru ca browserul sa poata “desena” layoutul paginii inainte sa aibe toate imaginile descarcate si sa nu fie nevoit sa modifice pagina incarcata.
Folositi siteul GTmetrix pentru a optimiza siteul.
Un articol pentru vorbitori de limba engleza gasiti aici cu mai multe sfaturi despre cum se face o incarcare rapida a pagini web.