Kompresja stron internetowych, Tech 3 Camp, Patryk yarpo Jar

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 / Mniej żądań / Mniej danych / Zysk / Podsumowanie

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


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 żą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>


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 żądań HTTP 11 2

Rozmiar danych 6kB 4kB

Czas ~500ms ~150ms


Grafika jako base64

<img src="blank.png" />

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

iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQIW2P8DwQACgAD/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.isLeftToRight()?[_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 żą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

23

Dziękuję za uwagę

• [email protected]

• yarpo.pl


Pytania?

Education

Kompresja stron internetowych, Tech 3 Camp, Patryk yarpo Jar