Download ppt - Gordan Orlić: Optimizacija frontenda

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


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)


“Go for the low hanging fruit”

Backend - 5%

Prijenos podataka - 15%

Frontend - 80%

Prosječno vrijeme učitavanja web stranice


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


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)


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”


Spriteovi


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


CSS datoteke “lijepo” za ljude; samo za razvoj i testiranje

“lijepo” za računalo; nužno u production okruženju


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


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


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)


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


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


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


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


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


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!


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


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


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


Pitanja?

◦ Hvala na pažnji!

Gordan Orlić; [email protected]

Zend PHP 5 Certified EngineerMySQL 5 Certified Developer

Cisco Certified Network Associate