Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Liking performance

2,346 views

Published on

Slides from SydJS, Sydney 2012

Published in: Technology
  • Be the first to comment

Liking performance

  1. 1. Liking performance SydJS, Oct 17, 2012
  2. 2. https://www.facebook.com/plugins/like.php?href=…
  3. 3. Starting: OMG! 2-3 CSS files7-8 JavaScript files
  4. 4. Static resource packaging 1 CSS, 1 sprite, 1 JS
  5. 5. Single CDN hostnameNo domain sharding for so few resources
  6. 6. Async JSvar js = document.createElement(script);js.src = http://path/to/js;document.getElementsByTagName(head)[0] .appendChild(js);
  7. 7. CSS: inline, then lazy
  8. 8. Serializing hidden contentIE still downloads images in display: none
  9. 9. CSS "nubs"
  10. 10. Rounded corners<!-- IE --><b></b> <button /><b></b>
  11. 11. RewriteReducing CSS and JS
  12. 12. All CSS inlinesmall enough, dynamic
  13. 13. All images inline, reverted :(
  14. 14. Common JS migrationvar DOM = require(DOM);// …DOM.find(#something .or .other);// …module.exports = Like;
  15. 15. Lazy JSSome inline. Preload some more. Execute on user action.
  16. 16. Loading SDK <script> Async JS FIF
  17. 17. Async JS
  18. 18. http://jsbin.com/axibow/10/edit
  19. 19. Thank you!@stoyanstefanov

×