The document discusses techniques for optimizing the performance of a Facebook like button, including: 1. Reducing the number of CSS and JavaScript files needed by combining them into single files and hosting on a single CDN. 2. Loading CSS styles inline initially and lazy loading remaining styles. Loading JavaScript asynchronously and lazily. 3. Addressing challenges like IE still downloading images in hidden elements and using CSS techniques like "nubs" for rounded corners.

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