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 hostname
No domain sharding for so few resources
Async JS
var js = document.createElement('script'); js.src = 'http://path/to/js'; document.getElementsByTagName('head')[0] .appendChild(js);
CSS: inline, then lazy
Serializing hidden content
IE still downloads images in display: none
CSS "nubs"
Rounded corners
<!-- IE --><b></b> <button /><b></b>
Rewrite
Reducing CSS and JS
All CSS inline
small enough, dynamic
All images inline, reverted :(
Common JS migration
var DOM = require('DOM');// …DOM.find('#something .or .other');// …module.exports = Like;
Lazy JS
Some 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
Top Related