Liking performance
•Download as PPTX, PDF•
2 likes•2,135 views
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.
Report
Share
Related slideshows
Liking performance
- 1. Liking performance SydJS, Oct 17, 2012
- 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