Kompresja stron internetowych – omówienie technik redukujących rozmiar serwisów internetowych

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

Agenda
• Lepszy kod w przeglądarce
• Mniej żądao HTTP
• Mniej danych
• Narzędzia
• Ile możemy zyskad w praktyce?
• Podsumowanie
4

Lepszy kod CSS
• Unikaj @import, CSS expressions
• Szybsze selektory:
a#id → #id
body div → body > div
→ div
5Lepszy kod / Mniej żądao / Mniej danych / Zysk / Podsumowanie

Lepszy kod HTML
• Przeskalowane grafiki
• Zwalczaj „divitis”
• Pliki wystarczy ładowad raz
– Ile razy ładujesz jQuery?
• Unikaj błędów 404, 500 itp.
– Nie zostawiaj pustych <img src="" />

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>

<script src="a.js"></script>
<script src="b.js"></script>
</body>
</html>

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);
}

Mniej żądao HTTP
• Content Delivery Network
– Google
– Microsoft
– Wiele, wiele innych
<script src="//ajax.googleapis.com/ajax/
libs/jquery/1.10.1/jquery.min.js"></script>
9Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie

Scalanie plików CSS
+ + =

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" />

CSS Sprite - zysk
Pojedyncze grafiki CSS Sprite
Liczba żądao HTTP 11 2
Rozmiar danych 6kB 4kB
Czas ~500ms ~150ms

Grafika jako base64
<img src="blank.png" />
<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCA
YAAAAfFcSJAAAAC0lEQVQIW2P8DwQACgAD
/il4QJ8AAAAASUVORK5CYII=" />

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

Zapakuj lepiej dane

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]
);
}
});
});

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]); }}); });

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%

GZIP

Ciasteczka
• Wysyłane w nagłówku żądania HTTP
• Inna domena na pliki statyczne
• HTML 5: sessionStorage, localStorage

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

Ile Nor-sta zyskała na kompresji?
Prototyp TCT 5.0 Oficjalne wydanie TCT 5.0
Liczba żądao 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

Dziękuję za uwagę
• Jar.Patryk@gmail.com
• yarpo.pl

Pytania?

Kompresja stron internetowych – omówienie technik redukujących rozmiar serwisów internetowych

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Kompresja stron internetowych – omówienie technik redukujących rozmiar serwisów internetowych

Similar to Kompresja stron internetowych – omówienie technik redukujących rozmiar serwisów internetowych (20)

More from 3camp

More from 3camp (20)

Kompresja stron internetowych – omówienie technik redukujących rozmiar serwisów internetowych