Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
jak zrychlit
načítání webu?
Tomáš Krejčí
@tomkrej | superkoderi.cz
Frontendisti Praha
3. 6. 2015
Musí mít
• paralax
• obrovské průhledné fotky
• nespočet různých jQuery pluginů
• speciální funkčností na touch zařízeních...
Hlavně se musí
rychle načítat!
… co s tím?
zamyšlení
Potřebuji vůbec použít
jQuery?
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
96 KB
jQuery UI
Date picker
• Celá jQuery UI

JS.min - 240 KB

CSS.min - 30 KB + 14 KB (thema) + 15 KB (structure)

Obrázky - 35...
Potřebuji plugin?
jquery.easytabs
• S pluginem

26.8 / 9.4 (minifikovaná verze) KB
• Napsáno custom

0.4 KB
jquery.scrollTo...
snížení počtu
requestů
Slučujte JS / CSS
• Slučujte a minifikujte na serveru
• https://code.google.com/p/minify/
• http://yui.github.io/yuicompres...
Používejte Sprity
• online - http://spriteme.org/
• grunt task - https://github.com/karfcz/grunt-sprite-packer
• kompilačn...
• Vlastní subdomény
• Služby třetích stran Google fonty, typekit apod.
Stahování zdrojů z více domén
datová optimalizace
Obrázky
• Picture element
• SVG ikonky / ikon fonty
• base 64
• progresivní JPEG
• Compressive images *
• Minifikace obrázk...
Compressive images
© Machal 5.10.2014 Frontendisti - Ostrava | https://www.youtube.com/watch?v=zsE6caTsi1M
Minifikace obrázků
Spousta nástrojů: Kraken.io, Smush.it, TinyPNG a
další…
Já používám:
• Grunt task

https://github.com/gr...
JPEGmini
http://www.jpegmini.com/ | Appka
Posterizace
Standardní PNG Posterizované PNG
382,8 KB
748.3 KB 365.5 KB
Magickéčíslo37
- Obraz / Přízpůsobení / Posterizac...
ImageOptim
https://imageoptim.com/
+/- 15 %
Nezapomeňte minifikovat i
všechny textové zdroje
• HTML
• CSS
• JS
• SVG
Pozor na fonty
• Nepoužívejte spoustu řezů
• Zkuste znovu vygenerovat ;)
Google font – Open Sans – Regular a Bold
90 KB
*....
server
Nastavení serveru
• expires header
• gzip
• nastavení kešování
Serverová detekce
• free

http://mobiledetect.net/
• placené

https://deviceatlas.com/

http://wurfl.sourceforge.net/

http...
Pomalá odezva ze
serveru
prasárny

(časté chyby)
• display:none; u src elementů
• respond.js

https://github.com/robinpokorny/grunt-legacssy
• @import ve stylech či inline...
budoucnost HTTP/2
• je binární
• Lépe zpracovává požadavky
• cache pushing
• komprese HTTP hlaviček
• lepší zabezpečení
Které prohlížeče už jej dokáží
zpracovat?
Jak použít HTTP/2 dnes
na svém projektu?
https://github.com/icing/mod_h2
nastroje jak měřit
rychlost webu
• PageSpeed
• Yslow
• Chrome DevTools
• Network
• Record Filmstrip

https://twitter.com/malyw/status/581877260082388992
• ...
Děkuji za pozornost!
Tomáš Krejčí
@tomkrej | superkoderi.cz
Prezentace jak zrychlit načítání webu
Prezentace jak zrychlit načítání webu
Prezentace jak zrychlit načítání webu
Prezentace jak zrychlit načítání webu
Prochain SlideShare
Chargement dans…5
×

Prezentace jak zrychlit načítání webu

1 284 vues

Publié le

Slajdy z prezentace #frontendisti z 3. 6. 2015

Publié dans : Internet
  • Soyez le premier à commenter

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

×