37
jak zrychlit načítání webu? Tomáš Krejčí @tomkrej | superkoderi.cz Frontendisti Praha 3. 6. 2015
| Date post: | 06-Aug-2015 |
| Category: |
Internet |
| Upload: | superkoderi |
| View: | 420 times |
| Download: | 0 times |
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 • 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
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 UIDate picker
• Celá jQuery UIJS.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 KBObrázky - 4 KBhttp://keith-wood.name/datepick.HTML
286 KB78 KB
Potřebuji plugin?
jquery.easytabs
• S pluginem 26.8 / 9.4 (minifikovaná verze) KB
• Napsáno custom0.4 KB
jquery.scrollTo
• S pluginem2.4 / 5.7 (minifikovaná verze) KB
• Napsáno custom0.3 KB
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/yuicompressor/
• Při kódování• Grunt task
https://github.com/gruntjs/grunt-contrib-uglify • Další nástroje:
Koala …
Používejte Sprity
• online - http://spriteme.org/ • grunt task - https://github.com/karfcz/grunt-sprite-packer • kompilační nástroj jako je compass
• 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/gruntjs/grunt-contrib-imagemin
• JPEGmini *
• Posterizace *
• ImageOptim *
PosterizaceStandardní PNG Posterizované PNG
382,8 KB748.3 KB 365.5 KB
Magické číslo 37
- Obraz / Přízpůsobení / Posterizace- Image / Adjustments / Posterize
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 *.woff - 53 KB*.woff2 - 40 KB
50 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://www.detectright.com/
• vlastníkombinace MobileDetect a Modernizr
Pomalá odezva ze serveru
prasárny (časté chyby)
• display:none; u src elementů
• respond.jshttps://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
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 Filmstriphttps://twitter.com/malyw/status/581877260082388992
• Další
• http://tools.pingdom.com/fpt/
• http://www.webpagetest.org/
• http://gtmetrix.com/
Děkuji za pozornost!
Tomáš Krejčí@tomkrej | superkoderi.cz
