Liking performance

Liking performance SydJS, Oct 17, 2012

https://www.facebook.com/plugins/like.php?href=…

Starting: OMG! 2-3 CSS files7-8 JavaScript files

Static resource packaging 1 CSS, 1 sprite, 1 JS

Single CDN hostnameNo domain sharding for so few resources

Async JSvar js = document.createElement(script);js.src = http://path/to/js;document.getElementsByTagName(head)[0] .appendChild(js);

CSS: inline, then lazy

Serializing hidden contentIE still downloads images in display: none

CSS "nubs"

Rounded corners<b></b> <button /><b></b>

RewriteReducing CSS and JS

All CSS inlinesmall enough, dynamic

All images inline, reverted :(

Common JS migrationvar DOM = require(DOM);// …DOM.find(#something .or .other);// …module.exports = Like;

Lazy JSSome inline. Preload some more. Execute on user action.

Loading SDK <script> Async JS FIF

Async JS

http://jsbin.com/axibow/10/edit

Thank you!@stoyanstefanov

by Stoyan Stefanov on Oct 23, 2012