Click here to load reader

Gordan Orlić: Optimizacija frontenda

  • View
    2.033

  • Download
    4

Embed Size (px)

Text of Gordan Orlić: Optimizacija frontenda

  • 1. Optimizacija frontenda Jednostavni naini ubrzavanja svakog weba

2. Sve bre, i sve sporije

  • brzina pristupa Internetu se osjetno poveava
  • snaga i brzina raunala se takoer poveava
  • brzina uitavanja stranica se ne poveava proporcionalno (ako se uope i poveava)
  • najee usko grlo je frontend

3. Korisnici vide razliku

  • webovi sve ee zamjenjuju desktop aplikacije
  • korisnici ele ugodno iskustvo
  • imaju izbor pa ne toleriraju sporost
  • pola sekunde sporije uitavanjegubitak 20% korisnika (Google)

4. Go for the low hanging fruit Prosjeno vrijeme uitavanja web stranice 5. Fokusirajte se na frontend

  • primjena jednostavnih i provjerenih metoda moe ubrzati web za 50%
  • korisnike ne zanima zato je neto brzo ili sporo, zanima ih ono to vide
  • subjektivni su, pripremite se na to
  • ne rasipajte resurse, optimizirajte ono to ima smisla

6. Smanjite broja requestova

  • jedan requestjedna 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 poeljni kod odreenih tipova stranica (nikako kod portala i foruma)
  • u praksi je minimalni broj requestova 5 po stranici (XHTML, CSS, JS, logo, analytics softver)

7. Spriteovi

  • 1 request umjesto 5, 10 ili 20
  • 12 famfamfam ikona u spriteu8 KB prometa
  • istih 12 ikona u 12 odvojenih datoteka20 KB prometa (i 11 dodatnih requestova)
  • 150% overheada!
  • DNS requestovi predstavljaju dodatni problem i najvie kotaju

8. Spriteovi 9. CSS datoteke

  • dovoljna vam je jedna CSS datoteka!
  • svako ali je problem backenda
  • CSS datoteku stavite u sam vrh dijela dokumenta
  • prikaz stranice (u IE-u i FF-u) poinje tek kada se svi dijelovi CSS downloadaju
  • koristite shorthand deklaracije i minificirajte datoteku

10. CSS datoteke

  • lijepo za ljude; samo za razvoj itestiranje
  • lijepo za raunalo; nuno uproduction okruenju

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 najjae raunalo

12. JS datoteke

  • razlikujmo datoteke zarazvoj i testiranje ( ) odonih pogodnih zaproduction okruenje ( )
  • originalna datoteka: 94 KB
  • minificirana: 15 KB
  • omjer: 1/6

13. Expires header

  • kolike su anse da ete u iduih 10 dana mijenjati logo weba?
  • ne silite korisnika da svaki puta dowloada sve elemente stranice koristite cache
  • oprez! jedini sigurni nain update cachea je preimenovanje datoteke (vi nemate kontrolu nad raunalom korisnika)

14. 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

15. Gzipanje komponenti

  • moderni browseri, crawleri i spideri znaju baratati sa komprimiranim sadrajem
  • komprimiranje i dekomprimiranje kota
  • CSS i JS datoteke mogu se komprimirati oko 50%
  • XHTML datoteke su jo pogodnije za komprimiranje

16. GET za AJAX requestove

  • jako rijetko AJAX treba POST request
  • POST je puno kompleksniji i slui za slanje podataka
  • AJAX prvenstveno koristimo za slanje minimalne koliine podataka, i povremeno primanje vee
  • okanite se prie o veoj sigurnosti POST-a naspram GET-a; jednako su (ne)sigurni

17. Kolaii su zlo!

  • cookiji se alju i obrauju 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

18. 404 je neizbjean

  • kreirajte 404 stranice pogodne za ljude i raunala
  • ljudi ele vidjeti utjehu, raunala ele dobiti adekvatnu informaciju header ('HTTP/1.1 404 Not Found')
  • na 404 se nailazi i kod loe linkanih CSS i JS datoteka oprez, veliki gubici

19. Favikona za sve

  • browser e ju pokuat preuzeti bez obzira odluili se vi imati ju ili ne
  • postavite je na oekivano mjesto: /favicon.ico
  • neka bude to manja i obavezno koristite cache-control
  • favicon zna initi 10% svih requestova na server!

20. Piite kvalitetan kod

  • nikakva optimizacija ne moe popraviti lo kod
  • piite ispravan XHTML sa to manje elemenata
  • ne postoji opravdanje za ne definiranje DOCTYPE-a
  • izbjegavajte kompleksne DOM manipulacije JS-om

21. Alati

  • ne vjerujte svemu to alat kae, potrudite se dublje ui u tematiku
  • Firebug+Yslow FF ekstenzija odlino za imati pri ruci, pogodno za poetnike
  • HTTPWatch za one koji preferiraju IE
  • Fiddler proxy vrlo mono, zahtijeva dosta vremena i znanja
  • IBM Page Detailer standalone aplikacija

22. Za one koji su spavali

  • optimizacija frontenda je jako vana
  • korisnici ne oprataju
  • optimizirajte najlake stvari (low hanging fruit)
  • optimizacija se ne radi kada budemo imali vremena, ona mora biti dio procesa planiranja i izrade weba od prvog dana

23. Pitanja?

  • Hvala na panji!

Gordan Orli; [email protected] Zend PHP 5 Certified Engineer MySQL 5 Certified Developer Cisco Certified Network Associate

Search related