Kompresja stron internetowych Patryk Jar Tech 3 Camp, 18 czerwca 2013 r.
O mnie Patryk Jar Webdeveloper Nor-sta (nor-sta.eu) yarpo.pl 2
3
Agenda Lepszy kod w przeglądarce Mniej żądań HTTP Mniej danych Narzędzia Ile możemy zyskać w praktyce? Podsumowanie 4
Lepszy kod CSS Unikaj @import, CSS expressions Szybsze selektory: a#id #id body div body > div div 5
Lepszy kod HTML Przeskalowane grafiki Zwalczaj divitis Pliki wystarczy ładować raz Ile razy ładujesz jquery? Unikaj błędów 404, 500 itp. Nie zostawiaj pustych <img src="" /> 6
JS i CSS <html> <head> <meta charset="utf-8" /> <title>example.com</title> <link rel="stylesheet" type="text/css" href="x.css"/> <link rel="stylesheet" type="text/css" href="y.css"/> </head> <body> <!-- tu cały kod HTML strony --> <script src="a.js"></script> <script src="b.js"></script> </body> </html> 7
Zamiast document.write document.write('<script src="script.js"></sc'+'ript>'); function loadjs(fileurl) { var e = document.createelement("script"); e.async = true; e.src = fileurl; document.body.appendchild(e); } 8
Mniej żądań HTTP Content Delivery Network Google Microsoft Wiele, wiele innych <script src="//ajax.googleapis.com/ajax/ libs/jquery/1.10.1/jquery.min.js"></script> 9
Scalanie plików CSS + + = 10
CSS Sprite Zamiast wielu osobnych plików (6 kb) Jeden (4kB) img { background: url(sprite.png); width: 18px; height: 18px; } #myicon { background-position: -40px 0; } <img src="blank.png" id="myicon" /> 11
CSS Sprite - zysk Pojedyncze grafiki CSS Sprite Liczba żądań HTTP 11 2 Rozmiar danych 6kB 4kB Czas ~500ms ~150ms 12
Grafika jako base64 <img src="blank.png" /> <img src="data:image/png;base64, ivborw0kggoaaaansuheugaaaaeaaaabca YAAAAfFcSJAAAAC0lEQVQIW2P8DwQACgAD /il4qj8aaaaasuvork5cyii=" /> 13
Moduły JavaScript Moduły JS (np. AMD, CommonJS) Wielokrotnie wywoływany moduł = 1 żądanie Ładowanie większej liczby plików równolegle Scalenie do jednego pliku 14
Zapakuj lepiej dane 15
JavaScript przed kompresją define("dijit/toolbar", ["require", "dojo/_base/declare", "dojo/has", "dojo/keys", "dojo/ready", "./_Widget", "./_KeyNavContainer", "./_TemplatedMixin"], function(require, declare, has, keys, ready, _Widget, _KeyNavContainer, _TemplatedMixin){ return declare("dijit.toolbar", [_Widget, _TemplatedMixin, _KeyNavContainer], { /* tu jeszcze 10 linii kodu */ templatestring: '<div class="dijit" role="toolbar" tabindex="${tabindex}" data-dojoattach-point="containernode"></div>', baseclass: "dijittoolbar", postcreate: function() { this.inherited(arguments); this.connectkeynavhandlers( this.islefttoright()? [keys.left_arrow] : [keys.right_arrow], this.islefttoright()? [keys.right_arrow] : [keys.left_arrow] ); } }); }); 16
JavaScript po kompresji define("dijit/toolbar",["require","dojo/_base/declare","dojo/has","dojo/keys","dojo/ready","./_ Widget","./_KeyNavContainer","./_TemplatedMixin"],function(_1,_2,_3,_4,_5,_6,_7,_8){ if(_3("dijit-legacy-requires")){ _5(0,function(){ var _9=["dijit/ToolbarSeparator"]; _1(_9); }); } return _2("dijit.Toolbar",[_6,_8,_7],{templateString:"<div class=\"dijit\" role=\"toolbar\" tabindex=\"${tabindex}\" data-dojo-attach-point=\"containernode\"></div>", baseclass:"dijittoolbar",postcreate:function(){ this.inherited(arguments); this.connectkeynavhandlers(this.islefttoright()?[_4.left_arrow]:[_4.right_arrow],this.islef ttoright()?[_4.right_arrow]:[_4.left_arrow]); }}); }); 17
Kompresja JavaScript Moduł Bez kompresji Skompresowany Zysk dojo/request/iframe 12kB 7kB 41% dojo/selector/acme 49kB 13kB 73% dojo/colors 7kB 5kB 29% dojo/cookie 3kB 2kB 33% dijit/menuitem 7kB 3kB 57% dijit/dialog 22kB 9kB 60% dijit/place 14kB 4kB 71% tct/widgets/nodebrowser 11kB 5kB 54% 18
GZIP 19
Ciasteczka Wysyłane w nagłówku żądania HTTP Inna domena na pliki statyczne HTML 5: sessionstorage, localstorage 20
Narzędzia Diagnoza YSlow Google PageSpeed Insights Kompresja JavaScript Shrinksafe JSmin Closure Compiler Kompresja CSS YUI Compressor CSS Sprite Dowolny edytor, wiele narzędzi online 21
Ile Nor-sta zyskała na kompresji? Prototyp TCT 5.0 Oficjalne wydanie TCT 5.0 Liczba żądań HTTP 250 30 Rozmiar pobranych plików* ~1,2 MB ~300 kb ready 90 sekund 7 sekund * - dane przesłane po sieci, w oficjalnym wydaniu były poddane kompresji GZIP 22
23
Dziękuję za uwagę Jar.Patryk@gmail.com yarpo.pl 24
Pytania? 25