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

24
Kompresja stron internetowych Patryk Jar Tech 3 Camp, 18 czerwca 2013 r.

description

Patryk Jar - Politechnika Gdańska: NOR-STA - Kompresja stron internetowych – omówienie technik redukujących rozmiar serwisów internetowych

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

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

Kompresja stron internetowych

Patryk JarTech 3 Camp, 18 czerwca 2013 r.

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

2

O mnie

• Patryk Jar• Webdeveloper• Nor-sta (nor-sta.eu)• yarpo.pl

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

3

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

4

Agenda

• Lepszy kod w przeglądarce• Mniej żądań HTTP• Mniej danych• Narzędzia• Ile możemy zyskać w praktyce?• Podsumowanie

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

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

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

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

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

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

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

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

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

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

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

10

Scalanie plików CSS

+ + =

Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie

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

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

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

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

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

13

Grafika jako base64

<img src="blank.png" />

<img src="data:image/png;base64,

iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQIW2P8DwQACgAD/il4QJ8AAAAASUVORK5CYII=" />

Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie

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

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

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

15

Zapakuj lepiej dane

Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie

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

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

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

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

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

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

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

19

GZIP

Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie

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

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

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

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

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

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

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

23

Dziękuję za uwagę

[email protected]• yarpo.pl

Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie

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

24

Pytania?

Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie