Kompresja stron internetowych, Tech 3 Camp, Patryk yarpo Jar

  • 339 views
Uploaded on

Prezentacja z występu na Tech 3 Camp. …

Prezentacja z występu na Tech 3 Camp.
Gdynia 18 czerwca 2013 r.
Patryk yarpo Jar

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
339
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Kompresja stron internetowychPatryk JarTech 3 Camp, 18 czerwca 2013 r.
  • 2. O mnie• Patryk Jar• Webdeveloper• Nor-sta (nor-sta.eu)• yarpo.pl2
  • 3. 3
  • 4. Agenda• Lepszy kod w przeglądarce• Mniej żądań HTTP• Mniej danych• Narzędzia• Ile możemy zyskać w praktyce?• Podsumowanie4
  • 5. Lepszy kod CSS• Unikaj @import, CSS expressions• Szybsze selektory:a#id → #idbody div → body > div→ div5Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie
  • 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="" />6Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie
  • 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 żądań / Mniej danych / Zysk / Podsumowanie
  • 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 żądań / Mniej danych / Zysk / Podsumowanie
  • 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>9Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie
  • 10. Scalanie plików CSS+ + =10Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie
  • 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. CSS Sprite - zyskPojedyncze grafiki CSS SpriteLiczba żądań HTTP 11 2Rozmiar danych 6kB 4kBCzas ~500ms ~150ms12Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie
  • 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. 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. Zapakuj lepiej dane15Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie
  • 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 żądań / Mniej danych / Zysk / Podsumowanie
  • 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 żądań / Mniej danych / Zysk / Podsumowanie
  • 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 żądań / Mniej danych / Zysk / Podsumowanie
  • 19. GZIP19Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie
  • 20. Ciasteczka• Wysyłane w nagłówku żądania HTTP• Inna domena na pliki statyczne• HTML 5: sessionStorage, localStorage20Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie
  • 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 żądań / Mniej danych / Zysk / Podsumowanie
  • 22. Ile Nor-sta zyskała na kompresji?22Lepszy kod / Mniej żądań / Mniej danych / Zysk / PodsumowaniePrototyp TCT 5.0 Oficjalne wydanie TCT 5.0Liczba żądań HTTP 250 30Rozmiar 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
  • 24. Dziękuję za uwagę• Jar.Patryk@gmail.com• yarpo.pl24Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie
  • 25. Pytania?25Lepszy kod / Mniej żądań / Mniej danych / Zysk / Podsumowanie