Kako poboljšati svoje HTML performanse?

Profilirajte svoje web stranice kako biste našli «krivca»

Prvi korak je profiliranje web stranica kako biste otkrili aspekte koji se moraju optimizirati, kao i druge komponente koji se trebate riješiti. Dostupni su besplatni web alati koji će vam pomoći odrediti koje su komponente tražene kod korisnika. Te komponente su slike, CSS fajlovi, HTML dokumenti i JavaScrip fajlovi. Dobar web alat će također registrirati veličinu i vrijeme koje treba da se load-a tražena komponenta na vašim stranicama. Te komponente trebate smanjiti što je više moguće – sve manje od 25 KB je dobre veličine.

Smanjite veličinu svojih slika tako da ih «sejvate» u pravom formatu

Tri najčešća web image formata su JEPG, GIF i PNG. Važno je naučiti koji format je optimalan za korištenje na vašim web stranicama, posebno ako koristite velik broj slika. JPEG je najbolji za realistične slike koje imaju glatke prijelaze i tonove boja, dok će slike kao što su grafikoni/dijagrami/tablice i logovi imati najstabilnije boje u GIF i PNG formatu. Iako treba imati na umu da neki slični PNG formati mogu bolje smanjiti fajl od GIF formata.

Smanjite veličinu CSS i JavaScript fajlova

Smanjiti veličinu fajlova naprosto znači da čeće se riješiti nepotrebnih slova/znakova iz source koda. Ti nepoželjni znakovi uključuju tabove, znak za razmak i kod komentare. Vidjet ćete da kad ste s tim gotovi, komad source koda može postati veličine jednog reda na zaslonu. Naravno da je nepotrebno ručno reformatiranje budući da postoji velik broj besplatnih alata koji smanjuju source kodove na vašim CSS i JavaScript kodovima. Neki primjeri dobrih besplatnih alata su: JavaScript Code Improver, YUI Compressor, CSS optimizer i Clean CSS. Ovi alati će vam također pomoći da vratite originalni kod (odnosno da ga ponovno povećate) ako ćete trebati unijeti neke razvojne promjene.

Smanjite HTTP requestove kombinirajući CSS i JavaScript fajlove

HTTP zahtjev kreira se prema serveru za svaku komponentu vaše stranice koja se treba izraziti. To znači da će se za svaki CSS fajl koji imate na vašoj stranici kreirati isti broj HTTP GET zahtjeva za tu web stranicu. Kombiniranjem vaših fajlova smanjit ćete višak HTTP requestova. Možete kombinirati CSS i JavaScript fajlove «copy i paste» metodom ili možete potražiti alternativne metode – iako je «copy i paste» vrlo učinkovit.

Razmislite o rasterećenju nekih dijelova i feature-a stranice prema drugim web servisima

To će značajno smanjiti količinu posla koju vaš web server radi. Sajtovi kao što su Feedburner mogu se korisiti za vaše RSS feedove, a Flickr može služiti za vaše slike (iako se prije toga trebate informirati o prednostima i nedostacima korištenja tog sajta). «Pretovar» komponenata drugim sajtovima omogućit će vašem serveru da obavlja samo CSS, CSS slike pozadine i HTML funkcije. To će poboljšati vrijeme reagiranja (response time) vaših web stranica.