1 / 23

Optimizacija frontenda

Optimizacija frontenda. Jednostavni načini ubrzavanja svakog weba. 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)

taryn
Download Presentation

Optimizacija frontenda

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Optimizacija frontenda Jednostavni načini ubrzavanja svakog weba Optimizacija frontenda

  2. 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 2/23

  3. 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 3/23

  4. “Go for the low hanging fruit” Prosječno vrijeme učitavanja web stranice Optimizacija frontenda 4/23

  5. 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 5/23

  6. 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 6/23

  7. 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 7/23

  8. Spriteovi Optimizacija frontenda 8/23

  9. 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 9/23

  10. CSS datoteke • “lijepo” za ljude; samo za razvoj i testiranje •  “lijepo” za računalo; nužno u production okruženju Optimizacija frontenda 10/23

  11. 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 11/23

  12. JS datoteke • razlikujmo datoteke za razvoj itestiranje () od onih pogodnih za production okruženje () • originalna datoteka: 94 KB • minificirana: 15 KB • omjer: 1/6 Optimizacija frontenda 12/23

  13. 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 13/23

  14. 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 Expires header Optimizacija frontenda 14/23

  15. 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 15/23

  16. 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 16/23

  17. 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 17/23

  18. 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 18/23

  19. 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 19/23

  20. 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 20/23

  21. 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 21/23

  22. 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 22/23

  23. Pitanja? • Hvala na pažnji! Gordan Orlić; gordan@grejp.comZend PHP 5 Certified EngineerMySQL 5 Certified DeveloperCisco Certified Network Associate Optimizacija frontenda 23/23

More Related