Performance optimization
ID meeting
13 th January 2010

Filip Mares
Agenda
•Why Optimise Front-End?
•Importance of performance
•34 best practices
•Optimize CSS for faster browser rendering
•...
Why Optimise Front-End?
• More potential for improvement
• Typically require less time = lower costs
• It’s proven to work
Importance of performance
• Better user experience
• More traffic
+0.4s = 5-9% drop in full-page traffic (Yahoo!)
• More r...
Make it right
before you make it fast
34 best practices (by YDN)
1. Make fewer HTTP Requests

18. Preload Components

2. Use a Content Delivery Network

19. Red...
23 best practices for IDs
1. Make fewer HTTP Requests

18. Preload Components

2. Use a Content Delivery Network

19. Redu...
Optimize CSS
for faster browser rendering
Less HTTP requests
• Combine CSS files
No separate print CSS
• Inline images with data
background‐image: url("data:image/p...
Less HTTP requests - drawback
•Bigger files or more combinations to cache
•Not as nice as atomic components
•Inline images...
Other CSS optimization practices
•Put CSS in the document head
•Make CSS External
•Choose <link> over @import
•Avoid Filte...
Write efficient CSS
Descendants and child
selectors can affect
performance, but don’t
worry about them so much
as to not use them.
Efficient CSS practices
•Group selectors with common declarations

•Use CSS shorthand

#nav {text-align: center}
#main{tex...
Inefficient rules
•Rules with descendant selectors
body *
ul li a
•Rules with child or adjacent selectors
body > *
ul > li...
Minify CSS
Tested tools
•Clean CSS
•CSS Optimiser
•Icey CSS Compressor
•YUI Compressor
•flumpCakes Optimiser
Tested tools - results
Tool Used

File Size

Lines

compression ratio:

None

12,875

227

Original

Clean CSS

11,735

94...
Questions?
Thanks
for listening
Links
•Best Practices for Speeding Up Your Web Site
http://developer.yahoo.com/performance/rules.html

•Testing CSS Perfor...
Upcoming SlideShare
Loading in...5
×

Performance optimization - Basics

159

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
159
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Performance optimization - Basics"

  1. 1. Performance optimization ID meeting 13 th January 2010 Filip Mares
  2. 2. Agenda •Why Optimise Front-End? •Importance of performance •34 best practices •Optimize CSS for faster browser rendering •Write efficient CSS •Minify CSS
  3. 3. Why Optimise Front-End? • More potential for improvement • Typically require less time = lower costs • It’s proven to work
  4. 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. 5. Make it right before you make it fast
  6. 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. 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. 8. Optimize CSS for faster browser rendering
  9. 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. 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. 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
  12. 12. Write efficient CSS
  13. 13. Descendants and child selectors can affect performance, but don’t worry about them so much as to not use them.
  14. 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. 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. 16. Minify CSS
  17. 17. Tested tools •Clean CSS •CSS Optimiser •Icey CSS Compressor •YUI Compressor •flumpCakes Optimiser
  18. 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. 19. Questions?
  20. 20. Thanks for listening
  21. 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/

×