Slides from SydJS, Sydney 2012

1. Liking performance
SydJS, Oct 17, 2012

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

3. Starting: OMG!
2-3 CSS files
7-8 JavaScript files

4. Static resource packaging
1 CSS, 1 sprite, 1 JS

5. Single CDN hostname
No domain sharding for so few
resources

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

7. CSS: inline, then lazy

8. Serializing hidden content
IE still downloads images in display:
none

9. CSS "nubs"

10. Rounded corners
<!-- IE -->
<b></b>
<button />
<b></b>

11. Rewrite
Reducing CSS and JS

12. All CSS inline
small enough, dynamic

13. All images inline, reverted :(

14. Common JS migration
var DOM = require('DOM');
// …
DOM.find('#something .or .other');
// …
module.exports = Like;

15. Lazy JS
Some inline. Preload some more.
Execute on user action.

17. Loading SDK
<script>
Async JS
FIF

18. Async JS

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

20. Thank you!
@stoyanstefanov