Kompresja stron internetowychPatryk JarTech 3 Camp, 18 czerwca 2013 r.
O mnie• Patryk Jar• Webdeveloper• Nor-sta (nor-sta.eu)• yarpo.pl2
3
Agenda• Lepszy kod w przeglądarce• Mniej żądao HTTP• Mniej danych• Narzędzia• Ile możemy zyskad w praktyce?• Podsumowanie4
Lepszy kod CSS• Unikaj @import, CSS expressions• Szybsze selektory:a#id → #idbody div → body > div→ div5Lepszy kod / Mniej...
Lepszy kod HTML• Przeskalowane grafiki• Zwalczaj „divitis”• Pliki wystarczy ładowad raz– Ile razy ładujesz jQuery?• Unikaj...
JS i CSS<html><head><meta charset="utf-8" /><title>Example.com</title><link rel="stylesheet" type="text/css" href="x.css"/...
Zamiast document.writedocument.write(<script src="script.js"></sc+ript>);function loadJS(fileUrl) {var e = document.create...
Mniej żądao HTTP• Content Delivery Network– Google– Microsoft– Wiele, wiele innych<script src="//ajax.googleapis.com/ajax/...
Scalanie plików CSS+ + =10Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie
CSS Sprite• Zamiast wielu osobnych plików (6 kB)• Jeden (4kB)img {background: url(sprite.png);width: 18px; height: 18px;}#...
CSS Sprite - zyskPojedyncze grafiki CSS SpriteLiczba żądao HTTP 11 2Rozmiar danych 6kB 4kBCzas ~500ms ~150ms12Lepszy kod /...
Grafika jako base64<img src="blank.png" /><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAA...
Moduły JavaScript• Moduły JS (np. AMD, CommonJS)– Wielokrotnie wywoływany moduł = 1 żądanie– Ładowanie większej liczby pli...
Zapakuj lepiej dane15Lepszy kod / Mniej żądao / Mniej danych / Zysk / Podsumowanie
JavaScript przed kompresjądefine("dijit/Toolbar", ["require", "dojo/_base/declare", "dojo/has", "dojo/keys", "dojo/ready",...
JavaScript po kompresjidefine("dijit/Toolbar",["require","dojo/_base/declare","dojo/has","dojo/keys","dojo/ready","./_Widg...
Kompresja JavaScriptModuł Bez kompresji Skompresowany Zyskdojo/request/iframe 12kB 7kB 41%dojo/selector/acme 49kB 13kB 73%...
GZIP19Lepszy kod / Mniej żądao / Mniej danych / Zysk / Podsumowanie
Ciasteczka• Wysyłane w nagłówku żądania HTTP• Inna domena na pliki statyczne• HTML 5: sessionStorage, localStorage20Lepszy...
Narzędzia• Diagnoza– YSlow– Google PageSpeed Insights• Kompresja JavaScript– Shrinksafe– JSmin– Closure Compiler• Kompresj...
Ile Nor-sta zyskała na kompresji?22Lepszy kod / Mniej żądao / Mniej danych / Zysk / PodsumowaniePrototyp TCT 5.0 Oficjalne...
Dziękuję za uwagę• Jar.Patryk@gmail.com• yarpo.pl23Lepszy kod / Mniej żądao / Mniej danych / Zysk / Podsumowanie
Pytania?24Lepszy kod / Mniej żądao / Mniej danych / Zysk / Podsumowanie
Upcoming SlideShare
Loading in …5
×

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

1,497 views

Published on

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

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,497
On SlideShare
0
From Embeds
0
Number of Embeds
298
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. Kompresja stron internetowychPatryk JarTech 3 Camp, 18 czerwca 2013 r.
  2. 2. O mnie• Patryk Jar• Webdeveloper• Nor-sta (nor-sta.eu)• yarpo.pl2
  3. 3. 3
  4. 4. Agenda• Lepszy kod w przeglądarce• Mniej żądao HTTP• Mniej danych• Narzędzia• Ile możemy zyskad w praktyce?• Podsumowanie4
  5. 5. Lepszy kod CSS• Unikaj @import, CSS expressions• Szybsze selektory:a#id → #idbody div → body > div→ div5Lepszy kod / Mniej żądao / Mniej danych / Zysk / Podsumowanie
  6. 6. 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="" />6Lepszy kod / Mniej żądao / Mniej danych / Zysk / Podsumowanie
  7. 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>7Lepszy kod / Mniej żądao / Mniej danych / Zysk / Podsumowanie
  8. 8. Zamiast document.writedocument.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);}8Lepszy kod / Mniej żądao / Mniej danych / Zysk / Podsumowanie
  9. 9. 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
  10. 10. Scalanie plików CSS+ + =10Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie
  11. 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" />11Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie
  12. 12. CSS Sprite - zyskPojedyncze grafiki CSS SpriteLiczba żądao HTTP 11 2Rozmiar danych 6kB 4kBCzas ~500ms ~150ms12Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie
  13. 13. Grafika jako base64<img src="blank.png" /><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQIW2P8DwQACgAD/il4QJ8AAAAASUVORK5CYII=" />13Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie
  14. 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 pliku14Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie
  15. 15. Zapakuj lepiej dane15Lepszy kod / Mniej żądao / Mniej danych / Zysk / Podsumowanie
  16. 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]);}});});16Lepszy kod / Mniej żądao / Mniej danych / Zysk / Podsumowanie
  17. 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]); }}); });17Lepszy kod / Mniej żądao / Mniej danych / Zysk / Podsumowanie
  18. 18. Kompresja JavaScriptModuł Bez kompresji Skompresowany Zyskdojo/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%18Lepszy kod / Mniej żądao / Mniej danych / Zysk / Podsumowanie
  19. 19. GZIP19Lepszy kod / Mniej żądao / Mniej danych / Zysk / Podsumowanie
  20. 20. Ciasteczka• Wysyłane w nagłówku żądania HTTP• Inna domena na pliki statyczne• HTML 5: sessionStorage, localStorage20Lepszy kod / Mniej żądao / Mniej danych / Zysk / Podsumowanie
  21. 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 online21Lepszy kod / Mniej żądao / Mniej danych / Zysk / Podsumowanie
  22. 22. Ile Nor-sta zyskała na kompresji?22Lepszy kod / Mniej żądao / Mniej danych / Zysk / PodsumowaniePrototyp TCT 5.0 Oficjalne wydanie TCT 5.0Liczba żądao HTTP 250 27Rozmiar pobranych plików* ~1,2 MB ~300 kBready 90 sekund 7 sekund* - dane przesłane po sieci, w oficjalnym wydaniu były poddane kompresji GZIP
  23. 23. Dziękuję za uwagę• Jar.Patryk@gmail.com• yarpo.pl23Lepszy kod / Mniej żądao / Mniej danych / Zysk / Podsumowanie
  24. 24. Pytania?24Lepszy kod / Mniej żądao / Mniej danych / Zysk / Podsumowanie

×