Performance optimization - Basics
- 1. Performance optimization ID meeting 13 th January 2010 Filip Mares
- 2. Agenda •Why Optimise Front-End? •Importance of performance •34 best practices •Optimize CSS for faster browser rendering •Write efficient CSS •Minify CSS
- 3. Why Optimise Front-End? • More potential for improvement • Typically require less time = lower costs • It’s proven to work
- 4. Importance of performance • Better user experience • More traffic +0.4s = 5-9% drop in full-page traffic (Yahoo!) • More revenue +1sec = 2.8% drop in revenue • Reduced costs HW costs, bandwidth costs
- 5. Make it right before you make it fast
- 6. 34 best practices (by YDN) 1. Make fewer HTTP Requests 18. Preload Components 2. Use a Content Delivery Network 19. Reduce the Number of DOM Elements 3. Add an Expires or a Cache-Control Header 20. Split Components Across Domains 4. Gzip Components 21. Minimize the Number of iframes 5. Put Style sheets at the Top 22. No 404s 6. Put Scripts at the Bottom 23. Reduce Cookie Size 7. Avoid CSS Expressions 24. Use Cookie-free Domains for Components 8. Make JavaScript and CSS External 25. Minimize DOM Access 9. Reduce DNS Lookups 26. Develop Smart Event Handlers 10. Minify JavaScript and CSS 27. Choose <link> over @import 11. Avoid Redirects 28. Avoid Filters 12. Remove Duplicate JS and CSS 29. Optimize Images 13. Configure ETags 30. Optimize CSS Sprites 14. Make Ajax Cacheable 31. Don’t Scale Images in HTML 15. Flush the Buffer Early 32. Make favicon.ico Small and Cacheable 16. Use GET for Ajax Requests 33. Keep Components under 25K 17. Post-load Components 34. Pack Components into a Multipart Document
- 7. 23 best practices for IDs 1. Make fewer HTTP Requests 18. Preload Components 2. Use a Content Delivery Network 19. Reduce the Number of DOM Elements 3. Add an Expires or a Cache-Control Header 20. Split Components Across Domains 4. Gzip Components 21. Minimize the Number of iframes 5. Put Style sheets at the Top 22. No 404s 6. Put Scripts at the Bottom 23. Reduce Cookie Size 7. Avoid CSS Expressions 24. Use Cookie-free Domains for Components 8. Make JavaScript and CSS External 25. Minimize DOM Access 9. Reduce DNS Lookups 26. Develop Smart Event Handlers 10. Minify JavaScript and CSS 27. Choose <link> over @import 11. Avoid Redirects 28. Avoid Filters 12. Remove Duplicate JS and CSS 29. Optimize Images 13. Configure ETags 30. Optimize CSS Sprites 14. Make Ajax Cacheable 31. Don’t Scale Images in HTML 15. Flush the Buffer Early 32. Make favicon.ico Small and Cacheable 16. Use GET for Ajax Requests 33. Keep Components under 25K 17. Post-load Components 34. Pack Components into a Multipart Document
- 8. Optimize CSS for faster browser rendering
- 9. Less HTTP requests • Combine CSS files No separate print CSS • Inline images with data background‐image: url("data:image/png;base64,iVBORw0KG..."); • Lazy-load stylesheets used by JavaScript CSS files on demand
- 10. Less HTTP requests - drawback •Bigger files or more combinations to cache •Not as nice as atomic components •Inline images does not work in IE up to IE7 •Hard to make even small changes •Need of new filename when the „never expire“ policy is on
- 11. Other CSS optimization practices •Put CSS in the document head •Make CSS External •Choose <link> over @import •Avoid Filters •Avoid CSS expressions •Specify image dimensions
- 13. Descendants and child selectors can affect performance, but don’t worry about them so much as to not use them.
- 14. Efficient CSS practices •Group selectors with common declarations •Use CSS shorthand #nav {text-align: center} #main{text-align: center} #nav, #main{text-align: center} #nav {margin:2em 1em 3em 1em; padding: 0em; color:#ffcc00} #nav {margin:2em 1em 3em; padding: 0; color:#fc0} •Group declarations with common selectors •Abbreviate long class and ID names #nav {text-align: center} #nav {color:#eee} #nav {text-align: center; color:#eee} •Combine common styles into shared classes •Keep the cascade in mind •Use inheritance to eliminate duplicate declarations •Remove unused CSS •Make rules as specific as possible •Avoid universal rules •Remove redundant qualifiers •Avoid descendant selectors, especially those that specify redundant ancestors •Avoid the :hover pseudo-selector for non-link elements for IE clients
- 15. Inefficient rules •Rules with descendant selectors body * ul li a •Rules with child or adjacent selectors body > * ul > li > a •Rules with overly qualified selectors form#UserLogin •Rules that apply the :hover pseudo-selector to non-link elements h3:hover
- 16. Minify CSS
- 17. Tested tools •Clean CSS •CSS Optimiser •Icey CSS Compressor •YUI Compressor •flumpCakes Optimiser
- 18. Tested tools - results Tool Used File Size Lines compression ratio: None 12,875 227 Original Clean CSS 11,735 940 9% CSS Optimiser 11,304 2 12% Icey CSS Compressor 10,383 1 19% YUI Compressor 11,175 1 13% 796 0% Flumpcakes Optimiser 12,885
- 19. Questions?
- 21. Links •Best Practices for Speeding Up Your Web Site http://developer.yahoo.com/performance/rules.html •Testing CSS Performance http://blog.archive.jpsykes.com/151/testing-css-performance/ •Performance Impact of CSS Selectors http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/ •Optimize browser rendering http://code.google.com/speed/page-speed/docs/rendering.html •CSS Optimization: Make Your Sites Load Faster for Free http://www.bloggingpro.com/archives/2006/08/17/css-optimization/