Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Gordan Orlić: Optimizacija frontenda

2,208 views

Published on

Published in: Technology, Travel
  • Be the first to comment

Gordan Orlić: Optimizacija frontenda

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

×