Post on 08-Jun-2015
Optimizacija frontenda
Optimizacija frontenda
Jednostavni načini ubrzavanja svakog weba
Optimizacija frontenda 2/23
Sve brže, i sve sporije
◦ brzina pristupa Internetu se osjetno povećava
◦ snaga i brzina računala se također povećava
◦ brzina učitavanja stranica se ne povećava proporcionalno (ako se uopće i povećava)
◦ najčešće usko grlo je frontend
Optimizacija frontenda 3/23
Korisnici vide razliku
◦ webovi sve češće zamjenjuju desktop aplikacije
◦ korisnici žele ugodno iskustvo◦ imaju izbor pa ne toleriraju sporost◦ pola sekunde sporije učitavanje
gubitak 20% korisnika (Google)
Optimizacija frontenda 4/23
“Go for the low hanging fruit”
Backend - 5%
Prijenos podataka - 15%
Frontend - 80%
Prosječno vrijeme učitavanja web stranice
Optimizacija frontenda 5/23
Fokusirajte se na frontend
◦ primjena jednostavnih i provjerenih metoda može ubrzati web za 50%
◦ korisnike ne zanima zašto je nešto brzo ili sporo, zanima ih ono što vide
◦ subjektivni su, pripremite se na to◦ ne rasipajte resurse, optimizirajte
ono što ima smisla
Optimizacija frontenda 6/23
Smanjite broja requestova
◦ jedan request jedna datoteka◦ (X)HTML, PHP, ASP, CSS, JS, JPG, PNG,
SWF, ICO, …◦ overhead je velik, poglavito za male
datoteke (nerijetko i 100%)◦ inline CSS i JS su poželjni kod određenih
tipova stranica (nikako kod portala i foruma)
◦ u praksi je minimalni broj requestova 5 po stranici (XHTML, CSS, JS, logo, analytics softver)
Optimizacija frontenda 7/23
Spriteovi
◦ 1 request umjesto 5, 10 ili 20◦ 12 famfamfam ikona u spriteu 8
KB prometa◦ istih 12 ikona u 12 odvojenih
datoteka 20 KB prometa (i 11 dodatnih requestova)
◦ 150% overheada!◦ DNS requestovi predstavljaju dodatni
problem i najviše “koštaju”
Optimizacija frontenda 8/23
Spriteovi
Optimizacija frontenda 9/23
CSS datoteke
◦ dovoljna vam je jedna CSS datoteka! ◦ svako “ali” je problem backenda◦ CSS datoteku stavite u sam vrh
<head> dijela dokumenta◦ prikaz stranice (u IE-u i FF-u) počinje
tek kada se svi dijelovi CSS downloadaju
◦ koristite shorthand deklaracije i minificirajte datoteku
Optimizacija frontenda 10/23
CSS datoteke “lijepo” za ljude; samo za razvoj i testiranje
“lijepo” za računalo; nužno u production okruženju
Optimizacija frontenda 11/23
JS datoteke
◦ minimizirajte JS datoteke (oprez, valja provodit unit testove)
◦ var moja_super_duga_varijabla = 5;var a=5;
◦ JS blokira download ostalih datoteka, stavite ga na samo dno dokumenta
◦ kompletan JS se odvija u jednom threadu, intenzivno modificiranje kompleksnog DOM-a usporit će i najjače računalo
Optimizacija frontenda 12/23
JS datoteke
◦ razlikujmo datoteke za razvoj i testiranje () od onih pogodnih za production okruženje ()◦ originalna datoteka: 94 KB minificirana: 15 KB◦ omjer: 1/6
Optimizacija frontenda 13/23
Expires header
◦ kolike su šanse da ćete u idućih 10 dana mijenjati logo weba?
◦ ne silite korisnika da svaki puta dowloada sve elemente stranice – koristite cache
◦ oprez! jedini sigurni način update cachea je preimenovanje datoteke (vi nemate kontrolu nad računalom korisnika)
Optimizacija frontenda 14/23
Expires header
◦ naslovnica Crvenog kartona ima u prosjeku 200 KB i 50 slika tj. 55 requestova
◦ pravilnom upotrebom expires headera to je svedeno na 14 KB i 2 requesta (XHTML + oglasi)
◦ omjer: 14/1
Optimizacija frontenda 15/23
Gzipanje komponenti
◦ moderni browseri, crawleri i spideri znaju baratati sa komprimiranim sadržajem
◦ komprimiranje i dekomprimiranje košta
◦ CSS i JS datoteke mogu se komprimirati oko 50%
◦ XHTML datoteke su još pogodnije za komprimiranje
Optimizacija frontenda 16/23
GET za AJAX requestove
◦ jako rijetko AJAX treba POST request◦ POST je puno kompleksniji i služi za
slanje podataka◦ AJAX prvenstveno koristimo za slanje
minimalne količine podataka, i povremeno primanje veće
◦ okanite se priče o većoj “sigurnosti” POST-a naspram GET-a; jednako su (ne)sigurni
Optimizacija frontenda 17/23
Kolačići su zlo!
◦ cookiji se šalju i obrađuju kod svakog requesta, i na serveru i na klijentu
◦ da, i kod slika, CSS-a, JS-a, flasha …◦ jako nesigurno mjesto za pohranu
podataka◦ kreirajte cookie-free poddomenu
Optimizacija frontenda 18/23
404 je neizbježan
◦ kreirajte 404 stranice pogodne za ljude i računala
◦ ljudi žele vidjeti “utjehu”, računala žele dobiti adekvatnu informaciju – header ('HTTP/1.1 404 Not Found')
◦ na 404 se nailazi i kod loše linkanih CSS i JS datoteka – oprez, veliki gubici
Optimizacija frontenda 19/23
Favikona za sve
◦ browser će ju pokušat preuzeti bez obzira odlučili se vi imati ju ili ne
◦ postavite je na očekivano mjesto: /favicon.ico
◦ neka bude što manja i obavezno koristite cache-control
◦ favicon zna činiti 10% svih requestova na server!
Optimizacija frontenda 20/23
Pišite kvalitetan kod
◦ nikakva optimizacija ne može popraviti loš kod
◦ pišite ispravan XHTML sa što manje elemenata
◦ ne postoji opravdanje za ne definiranje DOCTYPE-a
◦ izbjegavajte kompleksne DOM manipulacije JS-om
Optimizacija frontenda 21/23
Alati
◦ ne vjerujte svemu što alat kaže, potrudite se dublje ući u tematiku
◦ Firebug+Yslow FF ekstenzija – odlično za imati pri ruci, pogodno za početnike
◦ HTTPWatch – za one koji preferiraju IE◦ Fiddler proxy – vrlo moćno, zahtijeva
dosta vremena i znanja◦ IBM Page Detailer – standalone
aplikacija
Optimizacija frontenda 22/23
Za one koji su spavali
◦ optimizacija frontenda je jako važna◦ korisnici ne opraštaju◦ optimizirajte najlakše stvari (“low
hanging fruit”)◦ optimizacija se ne radi “kada
budemo imali vremena”, ona mora biti dio procesa planiranja i izrade weba od prvog dana
Optimizacija frontenda 23/23
Pitanja?
◦ Hvala na pažnji!
Gordan Orlić; gordan@grejp.com
Zend PHP 5 Certified EngineerMySQL 5 Certified Developer
Cisco Certified Network Associate