7 Načina za poboljšanje performansi Vaših Internet stranica

By

Programiranje

Puno je načina na koje možete poboljšati performanse Vaših Internet stranica. Počevši od samog hardware-a (boljeg servera), server-side optimizacija skripti, front-end poboljšanje performansi i optimizacija čemu ću u ovom tutorialu najviše vremena posvetiti.

Front-end (HTML, CSS, JavaScript, slike, flash…) je najkorišteniji dio Internet stranica i stoga je njemu potrebno posvetiti najviše pozornosti kod optimizacije. Većina nas zbog niže cijene koristi shared web hosting pakete, pa stoga dijeli iste resurse nekoga servera sa stotinama drugih korisnika. Iz tog razloga potrebno je obratiti pozornost da Vaše Internet stranice ne koriste velik dio resursa kako vas administratori ne bi zaključali jer usporavate rad ostalih Internet stranica smještenih na tom serveru.

Kako bi mogli ostati u tako jeftinom cjenovnom rangu kad je u pitanju web hosting ono što možemo napraviti po pitanju poboljšanja odziva Internet stranica je potrošiti malo vremena oko same fron-end optimizacije. Evo što možete napraviti…

1. Spremajte slike u pravom formatu kako biste im smanjili veličinu

Kada imate puno slika jako je bitno koristiti pravi format, ovisno o sadržaju na slici. Tri su osnovna (najčešća) web formata koja se koriste:

  • JPEG – koristite kod „realističnih“ slika, znači priroda, ljudi… odnosno slike s puno gradijenta i raznih tonova
  • PNG i GIF – koristite za suprotne stvari, jednostavne stvari s manje tonova i gradijenata, tipa logo, grafovi, ikone…

2. Optimizirajte CSS i Java Script datoteke

Time ćete zapravo uštedjeti na nekoliko vama bitnih kilobajta, jer će nepotrebni razmaci, tabovi, komentari biti uklonjeni.

Ne optimizirani CSS

body {
background-color: #fff; /* boja pozadine */
color: #000; /* boja teksta */
font-family: Arial; /* vrsta fonta */
font-size: 14px; /* veličina fonta */
}

Optimizirani CSS

body {background-color: #fff;color: #000;font-family: Arial;font-size: 14px;}

Koristite skraćeni način pisanja CSS-a

Umjesto

#navigacija a {
padding-top:15px;
padding-right:10px;
padding-bottom:5px;
padding-left:2px;
}

Napišite

#navigacija a {
padding:15px 10px 5px 2px;
}

Sve to možete napraviti uz pomoć nekih web alata za css… kojih pogledajte pod Web alati za optimizaciju, formatiranje i provjeru CSS-a. Isto tako za JavaSkripte možete koristiti neke od web alata Web alati za optimizaciju, formatiranje i provjeru JavaSkripti-a

3. Izbjegavajte inline CSS i JavaSkripte

Eksterne CSS i JavaSkript datoteke su „keširane“ od strane korisničkog preglednika. Stoga kada korisnik učita neku drugu Internet stranicu neće biti potrebe za ponovnim skidanjem istih datoteka, već će iste koristiti sa računala. Iz ovoga je jasno vidljivo da je bolje koristiti CSS i JavaSkripte u zasebnim datotekama nego kao inline kod.

4. Kombinirajte CSS i JavaSkripte kako biste smanjili HTTP zahtjeve

Kod generiranja web stranice sa 4 odvojene CSS datoteke potrebno je prema serveru poslati 4 HTTP zahtjeva, isto vrijedi i za JavaSkripte. Tako kombiniranjem istovrsnog sadržaja u jednu datoteku smanjujete broj zahtjeva i samim tim smanjujete vrijeme učitavanja Internet stranica.

Ovo zna bit najveći problem kod korištenja nekih od gotovih CMS rješenja u kombinaciji sa dodatnim modulima, pluginovima koji zasebno učitavaju svoje CSS ili JavaSkript datoteke.

Najlakši način je da sami jednostavno kopirate istovrsni sadržaj u jednu datoteku.

No postoje i drugi načini kombiniranja ukoliko su istovrsne datoteke smještene unutar istog direktorija.

Npr:

Možete napisati ovako:
 

Isto vrijedi i za CSS

5. Koristite server-side kompresiju kako biste smanjili veličinu datoteka

Ovo može biti malo teže, jer neki dijeljeni web hosting paketi nemaju po defaultu uključen server-side kompresiju, o čemu se možete raspitati kod svog hosting providera. Ukoliko koristite neki od gotovih CMS rješenja potražite već gotove pluginove i dodatke koji rješavaju upravo taj dio problema. Umjesto da korisniku šalju izvornu datoteku recimo 50-ak KB, on dobije datoteku veliku svega nekoliko KB u gzip formatu, što znatno ubrzava proces prijenosa podataka.

6. Koristite cache (keširanje)

Ovo je možda jedan od najboljih načina za poboljšanje performansi, zašto? Zamislite da imate stranicu rađenu u nekom od programskih jezika PHP, ASP… (znači ne čisti HTML) koje se ne osvježava tako često i nema nikakvih korisničkih stranica, login modula ili sličnih stvari. Svaki puta kada korisnik otvori neku stranicu na serveru se taj PHP-ASP kod mora izvršiti pribaviti podatke, generirati HTML i poslati korisniku. To naravno zahtjeva vrijeme i troši resurse procesora. Ono što Vi možete napraviti je za neki gotov CMS ako ga koristite pogledati dali postoji kakav ugrađeni ili dodatak za instalaciju kako biste riješili problem keširanja.

Na taj način će se prvi puta generirati HTML stranica koja se spremi na serveru i ovisno o vremenu koje ste podesili za osvježavanje keša svakom novom posjetitelju poslati. Znači server u tom slučaju mora samo dohvatiti tu jednu HTML stranicu i poslati ju korisniku/posjetitelju.

7. Napravite offload datoteka i nekih dodataka korištenih na vašoj stranici

Što to znači?

Sve ono što ne mora biti smješteno na Vašem serveru postavite na neki drugi, kako biste svoj server rasteretili. Koristite Feedburner za distribuciju RSS sadržaja. Slike spremajte na Flickr. Koristite Google AJAX Libraries API ako koistite popularne JavaScript biblioteke kao što su MooTools, jQuery, Dojo…

Na taj način vašem serveru prepuštate brigu oko HTML-a i CSS-a dok ostalima brigu o drugim stvarima.

Postoji još puno načina uz pomoć kojih možete poboljšati performanse i brzinu učitavanja vaših Internet stranica no o tome u kasnijim tutorijalima.

I naravno ako znate za koji lakši ili bolji način slobodno napišite u komentarima.

Tags:

Leave a comment