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

12. Write efficient CSS

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?

20. Thanks
for listening

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/