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 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