Kompresja stron internetowych

Wielkość: px

Rozpocząć pokaz od strony:

Download "Kompresja stron internetowych"

Julia Domagała
8 lat temu
Przeglądów:

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

2 O mnie Patryk Jar Webdeveloper Nor-sta (nor-sta.eu) yarpo.pl 2

3 3

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

5 Lepszy kod CSS CSS expressions Szybsze selektory: a#id #id body div body > div div 5

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

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>  <script src="a.js"></script> <script src="b.js"></script> </body> </html> 7

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

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> 9

10 Scalanie plików CSS + + = 10

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

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

13 Grafika jako base64 <img src="blank.png" /> <img src="data:image/png;base64, ivborw0kggoaaaansuheugaaaaeaaaabca YAAAAfFcSJAAAAC0lEQVQIW2P8DwQACgAD /il4qj8aaaaasuvork5cyii=" /> 13

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 14

15 Zapakuj lepiej dane 15

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

17 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

18 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

19 GZIP 19

20 Ciasteczka Wysyłane w nagłówku żądania HTTP Inna domena na pliki statyczne HTML 5: sessionstorage, localstorage 20

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 21

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

24 Dziękuję za uwagę yarpo.pl 24

25 Pytania? 25

Podobne dokumenty

Patryk Jar Meet.js, Gdańsk 11 marca 2013 r. MODULARNY JAVASCRIPT

Patryk Jar Meet.js, Gdańsk 11 marca 2013 r. MODULARNY JAVASCRIPT O mnie Patryk yarpo Jar Programista JavaScript (nor-sta.eu) yarpo.pl 2 Agenda Chaos Obiekty Biblioteki AMD Podsumowanie Pytania 3 Dawno,