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.

Prezentace jak zrychlit načítání webu

1,203 views

Published on

Slajdy z prezentace #frontendisti z 3. 6. 2015

Published in: Internet
  • Be the first to comment

Prezentace jak zrychlit načítání webu

  1. 1. jak zrychlit načítání webu? Tomáš Krejčí @tomkrej | superkoderi.cz Frontendisti Praha 3. 6. 2015
  2. 2. Musí mít • paralax • obrovské průhledné fotky • nespočet různých jQuery pluginů • speciální funkčností na touch zařízeních • minimálně 5 speciálních přechodů mezi stránkami • animace • a další… Navíc musí být • responsivní • má vypadat stejně ve všech prohlížečích • i pro IE7
  3. 3. Hlavně se musí rychle načítat! … co s tím?
  4. 4. zamyšlení
  5. 5. Potřebuji vůbec použít jQuery? <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 96 KB
  6. 6. jQuery UI Date picker • Celá jQuery UI
 JS.min - 240 KB
 CSS.min - 30 KB + 14 KB (thema) + 15 KB (structure)
 Obrázky - 35 KB • Pouze plugin UI
 JS.min - 40 KB
 CSS.min - 19 KB + 14 KB (thema) + 15 KB (structure)
 Obrázky - 35 KB • Samostatný plugin od autora
 JS.min - 40 KB
 CSS.min - 4.4 KB
 Obrázky - 4 KB
 http://keith-wood.name/datepick.HTML 286 KB 78 KB
  7. 7. Potřebuji plugin? jquery.easytabs • S pluginem
 26.8 / 9.4 (minifikovaná verze) KB • Napsáno custom
 0.4 KB jquery.scrollTo • S pluginem
 2.4 / 5.7 (minifikovaná verze) KB • Napsáno custom
 0.3 KB
  8. 8. snížení počtu requestů
  9. 9. Slučujte JS / CSS • Slučujte a minifikujte na serveru • https://code.google.com/p/minify/ • http://yui.github.io/yuicompressor/ • Při kódování • Grunt task
 https://github.com/gruntjs/grunt-contrib-uglify • Další nástroje: Koala …
  10. 10. Používejte Sprity • online - http://spriteme.org/ • grunt task - https://github.com/karfcz/grunt-sprite-packer • kompilační nástroj jako je compass
  11. 11. • Vlastní subdomény • Služby třetích stran Google fonty, typekit apod. Stahování zdrojů z více domén
  12. 12. datová optimalizace
  13. 13. Obrázky • Picture element • SVG ikonky / ikon fonty • base 64 • progresivní JPEG • Compressive images * • Minifikace obrázků *
  14. 14. Compressive images © Machal 5.10.2014 Frontendisti - Ostrava | https://www.youtube.com/watch?v=zsE6caTsi1M
  15. 15. Minifikace obrázků Spousta nástrojů: Kraken.io, Smush.it, TinyPNG a další… Já používám: • Grunt task
 https://github.com/gruntjs/grunt-contrib-imagemin • JPEGmini * • Posterizace * • ImageOptim *
  16. 16. JPEGmini http://www.jpegmini.com/ | Appka
  17. 17. Posterizace Standardní PNG Posterizované PNG 382,8 KB 748.3 KB 365.5 KB Magickéčíslo37 - Obraz / Přízpůsobení / Posterizace - Image / Adjustments / Posterize
  18. 18. ImageOptim https://imageoptim.com/ +/- 15 %
  19. 19. Nezapomeňte minifikovat i všechny textové zdroje • HTML • CSS • JS • SVG
  20. 20. Pozor na fonty • Nepoužívejte spoustu řezů • Zkuste znovu vygenerovat ;) Google font – Open Sans – Regular a Bold 90 KB *.woff - 53 KB *.woff2 - 40 KB 50 KB
  21. 21. server
  22. 22. Nastavení serveru • expires header • gzip • nastavení kešování
  23. 23. Serverová detekce • free
 http://mobiledetect.net/ • placené
 https://deviceatlas.com/
 http://wurfl.sourceforge.net/
 http://www.detectright.com/ • vlastní
 kombinace MobileDetect a Modernizr
  24. 24. Pomalá odezva ze serveru
  25. 25. prasárny
 (časté chyby)
  26. 26. • display:none; u src elementů • respond.js
 https://github.com/robinpokorny/grunt-legacssy • @import ve stylech či inline styly v HTML • prázdné src a href atributy • zmenšování obrázku za pomocí atributů width a height • nenastavené width a height na <img /> • nevkládat inline JS doprostřed stránky a už vůbec né za tag <body> • nepoužívejte PNG pokud se jedná o fotky • načítaní CSS a JS ze správných míst • obrovské obrázky v responsivní verzi • kompilace preprocesoru až na frontendu
  27. 27. budoucnost HTTP/2
  28. 28. • je binární • Lépe zpracovává požadavky • cache pushing • komprese HTTP hlaviček • lepší zabezpečení
  29. 29. Které prohlížeče už jej dokáží zpracovat?
  30. 30. Jak použít HTTP/2 dnes na svém projektu? https://github.com/icing/mod_h2
  31. 31. nastroje jak měřit rychlost webu
  32. 32. • PageSpeed • Yslow • Chrome DevTools • Network • Record Filmstrip
 https://twitter.com/malyw/status/581877260082388992 • Další • http://tools.pingdom.com/fpt/ • http://www.webpagetest.org/ • http://gtmetrix.com/
  33. 33. Děkuji za pozornost! Tomáš Krejčí @tomkrej | superkoderi.cz

×