Kompresja stron internetowych – omówienie technik redukujących rozmiar serwisów internetowych
description
Transcript of Kompresja stron internetowych – omówienie technik redukujących rozmiar serwisów internetowych
Kompresja stron internetowych
Patryk JarTech 3 Camp, 18 czerwca 2013 r.
2
O mnie
• Patryk Jar• Webdeveloper• Nor-sta (nor-sta.eu)• yarpo.pl
3
4
Agenda
• Lepszy kod w przeglądarce• Mniej żądań HTTP• Mniej danych• Narzędzia• Ile możemy zyskać w praktyce?• Podsumowanie
5
Lepszy kod CSS
• Unikaj @import, CSS expressions
• Szybsze selektory:a#id → #idbody div → body > div
→ div
Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie
6
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="" />
Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie
7
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>
Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie
8
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);
}
Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie
9
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>
Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie
10
Scalanie plików CSS
+ + =
Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie
11
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" />
Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie
12
CSS Sprite - zysk
Pojedyncze grafiki CSS Sprite
Liczba żądań HTTP 11 2
Rozmiar danych 6kB 4kB
Czas ~500ms ~150ms
Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie
13
Grafika jako base64
<img src="blank.png" />
<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQIW2P8DwQACgAD/il4QJ8AAAAASUVORK5CYII=" />
Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie
14
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
Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie
15
Zapakuj lepiej dane
Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie
16
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-dojo-attach-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]
);}
});});
Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie
17
JavaScript po kompresjidefine("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.isLeftToRight()?[_4.RIGHT_ARROW]:[_4.LEFT_ARROW]); }}); });
Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie
18
Kompresja JavaScriptModuł 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%
Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie
19
GZIP
Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie
20
Ciasteczka
• Wysyłane w nagłówku żądania HTTP
• Inna domena na pliki statyczne• HTML 5: sessionStorage, localStorage
Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie
21
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
Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie
22
Ile Nor-sta zyskała na kompresji?
Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie
Prototyp TCT 5.0 Oficjalne wydanie TCT 5.0
Liczba żądań HTTP 250 27
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
23
Dziękuję za uwagę
• [email protected]• yarpo.pl
Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie
24
Pytania?
Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie