I attended Nicole Sullivan's awesome high performance web site workshop. Some really interesting things I learned:
Yahoo's work
Performance: http://developer.yahoo.com/performance/
Performance Rules: http://developer.yahoo.com/performance/rules.html
iPhone cacheability: http://yuiblog.com/blog/2008/02/06/iphone-cacheability/
Tools
YSlow is a firefox plugin that evaluates a web page against the performance rules
IBM Page detailer does an awesome job of looking at the exact times of requests.
Smush.it will reduce image sizes, but you have to be careful about copyright information removal.
Rules
The Yahoo performance rules I'll list below:
1. Decrease HTTP requests
Sprites are collections of images together, example is shine.yahoo.com. Use extra markup to increase perf, like expanding images, reducing tabs. Make a module transparent on the inside, then you can swap out the inside. Example is a red rounded box.
Combined scripts, combined stylesheets
2. Use a Content Delivery Network
3. Add an expires Header
Not just for images. median age for *.coms, 1, 1, 2, 34, 114, 220,140, 450 days.
4. Gzip
5. Put stylesheets at the top. Stylesheets freeze rending in IE6
Actually renders page slower, but renders progressively
6. Put scripts at the bottom
An example is secondary tabs
7. Avoid CSS Expressions
8. Make CSS and Javascript external
9. reduce dns lookups
10. Minify Javascript and CSS
11. Avoid Redirects
12. remove duplicate scripts
13. Configure ETags
There are many more but those are the ones that YSlow will check.
Graceful image degradation
Avoid filters AlphaImageLoader which is a filter that forces alpha transparencies. It blocks rendering, and is evaluated per element not per image.
Use PNG8 which degrades gracefully in IE<7. This removed 100ms from yahoo changing for sprite.
As a Fallback use underscore hack
#elem {
_filter:progid:...
}
PNG8 authoring tools aren't common, fireworks is one.
(I'm not sure I quite follow all that but seemed very worthwhile to note)
Yahoo's work
Performance: http://developer.yahoo.com/performance/
Performance Rules: http://developer.yahoo.com/performance/rules.html
iPhone cacheability: http://yuiblog.com/blog/2008/02/06/iphone-cacheability/
Tools
YSlow is a firefox plugin that evaluates a web page against the performance rules
IBM Page detailer does an awesome job of looking at the exact times of requests.
Smush.it will reduce image sizes, but you have to be careful about copyright information removal.
Rules
The Yahoo performance rules I'll list below:
1. Decrease HTTP requests
Sprites are collections of images together, example is shine.yahoo.com. Use extra markup to increase perf, like expanding images, reducing tabs. Make a module transparent on the inside, then you can swap out the inside. Example is a red rounded box.
Combined scripts, combined stylesheets
2. Use a Content Delivery Network
3. Add an expires Header
Not just for images. median age for *.coms, 1, 1, 2, 34, 114, 220,140, 450 days.
4. Gzip
5. Put stylesheets at the top. Stylesheets freeze rending in IE6
Actually renders page slower, but renders progressively
6. Put scripts at the bottom
An example is secondary tabs
7. Avoid CSS Expressions
8. Make CSS and Javascript external
9. reduce dns lookups
10. Minify Javascript and CSS
11. Avoid Redirects
12. remove duplicate scripts
13. Configure ETags
There are many more but those are the ones that YSlow will check.
Graceful image degradation
Avoid filters AlphaImageLoader which is a filter that forces alpha transparencies. It blocks rendering, and is evaluated per element not per image.
Use PNG8 which degrades gracefully in IE<7. This removed 100ms from yahoo changing for sprite.
As a Fallback use underscore hack
#elem {
_filter:progid:...
}
PNG8 authoring tools aren't common, fireworks is one.
(I'm not sure I quite follow all that but seemed very worthwhile to note)
Leave a comment