Steve Souders of Yahoo's "Exceptional Performance Team" gave an insanely great presentation at Web 2.0 about optimizing website performance by focusing on front end issues. Unfortunately I didn't get to see it in person but the Web 2.0 talks have just been put up and the ppt is fascinating and absolutely a must-read for anyone involved in web products.
His work has been serialized on the Yahoo user interface blog, and will also be published in an upcoming O'Reilly title (est publish date: Sep 07).
We have so much of this wrong at topix now that it makes me want to cry but you can bet I've already emailed this ppt to my eng team. :) Even if you're pure mgmt or product marketing you need to be aware of these issues and how they directly affect user experience. We've seen a direct correlation between site speed and traffic.
This is a big presentation, with a lot of data in it (a whole book's worth apparently), but half way through he boils it down into 14 rules for faster front end performance:
- Make fewer HTTP requests
- Use a CDN
- Add an Expires header
- Gzip components
- Put CSS at the top
- Move JS to the bottom
- Avoid CSS expressions
- Make JS and CSS external
- Reduce DNS lookups
- Minify JS
- Avoid redirects
- Remove duplicate scripts
- Turn off ETags
- Make AJAX cacheable and small
The full talk has details on what all of these mean in practice. The final slide of the deck is a set of references and resources, which I've pulled out here for clickability:
book: http://www.oreilly.com/catalog/9780596514211/
examples: http://stevesouders.com/examples/
image maps: http://www.w3.org/TR/html401/struct/objects.html#h-13.6
CSS sprites: http://alistapart.com/articles/sprites
inline images: http://tools.ietf.org/html/rfc2397
jsmin: http://crockford.com/javascript/jsmin
dojo compressor: http://dojotoolkit.org/docs/shrinksafe
HTTP status codes: http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html
IBM Page Detailer: http://alphaworks.ibm.com/tech/pagedetailer
Fasterfox: http://fasterfox.mozdev.org/
LiveHTTPHeaders: http://livehttpheaders.mozdev.org/
Firebug: http://getfirebug.com/
YUIBlog: http://yuiblog.com/blog/2006/11/28/performance-research-part-1/
http://yuiblog.com/blog/2007/01/04/performance-research-part-2/
http://yuiblog.com/blog/2007/03/01/performance-research-part-3/
http://yuiblog.com/blog/2007/04/11/performance-research-part-4/
YDN: http://developer.yahoo.net/blog/archives/2007/03/high_performanc.html
http://developer.yahoo.net/blog/archives/2007/04/rule_1_make_few.html
Update: Yahoo has summarized these nicely on their developer blog.
Comments (21)
Awesome link, dude. CSS sprites are invaluable!
Posted by Paul Montgomery | May 10, 2007 3:53 AM
Posted on May 10, 2007 03:53
just looking at the list, I know I have a LOT to learn!
Posted by The Pageman | May 10, 2007 2:31 PM
Posted on May 10, 2007 14:31
The information about ETags in the presentation seems to be misleading.
"""
ETag for a single entity is always different across servers
ETag format
- Apache: inode-size-timestamp
"""
With Apache, it is possible to configure how etags are generated:
http://httpd.apache.org/docs/2.2/mod/core.html#fileetag
For most clustered configurations, you just need to do:
FileETag MTime Size
If you have other considerations, it is trivial to write a custom apache module, to include other information.
I don't see any real reason to disable ETags -- they generally help.
-Paul
Posted by Paul Querna | May 10, 2007 2:44 PM
Posted on May 10, 2007 14:44
Interesting read, but how can I modify the expires header of an image or css? Using a file attribute utility, I managed to modify the date on my PC, but its lost in the upload?
Posted by Alvin | May 10, 2007 8:44 PM
Posted on May 10, 2007 20:44
Awesome stuff! Thank you so much for taking the time to post the information AND especially for pulling the links out of the PPT and publishing them here.
By the way, I hope your eng team will enjoy the information as much as I have!
And just in case, here are some additional resources that might be helpful for anyone who wants to make their web pages load faster:
Loading Time Checker
http://www.1-hit.com/all-in-one/tool.loading-time-checker.htm
Web Page Analyzer
http://www.websiteoptimization.com/services/analyze/
Load Time Testing, etc.
http://www.netmechanic.com/toolbox/power_user.htm
Posted by WebGyver | May 11, 2007 7:35 AM
Posted on May 11, 2007 07:35
For the list, I highly recommend people use the free command-line tool PNGOUT to compress their PNG's images as well.
PNG's are a great format, unfortunately you'd be surprised at how bloated PhotoShop and other image editing software saves them.
Posted by Lachlan | May 11, 2007 8:19 AM
Posted on May 11, 2007 08:19
The problem with putting JS at the bottom is that functions won't work until the page has loaded, creating JS errors and breaking the page.
Posted by Chrys Bader | May 11, 2007 1:03 PM
Posted on May 11, 2007 13:03
@Paul Querna
He means set the expiration header - not the file time\date.
This means that you can direct the browser to know when or when not to use the cached copy of a file and when to download a new one.
There is no need to download the same css file, for example, every time you refresh a page. Once you download it, the browser should load the cached copy to improve speed.
Set the expiration to a longer period and it will be cached longer.
Posted by bryan | May 11, 2007 2:01 PM
Posted on May 11, 2007 14:01
One thing to remember is to make sure your server will GZip not only HTML pages, but also .js and .css files. Sometimes server configs only compress HTML output by default. JS and CSS files typically end up being larger than most HTML pages, so it's pretty important!
Posted by Matt King | May 11, 2007 2:03 PM
Posted on May 11, 2007 14:03
The recommendation to remove ETag should probably be clarified. I think, in general, sending ETag and Last-Modified and supporting Conditional GET are a good idea.
According to the presentation his main problem with them is how most web server software generates the ETag, and how it can be different on each server in the cluster. Apache uses the Inode, MTime (modification time) and Size (file size) to generate the ETag. The INode is going to be different on each server, while the Size and MTime should be the same assuming the content is in sync across all the servers, and the original modification time are preserved.
If you update Apache (or other web server) to use the modification time and size to generate the ETag, and you have a good content syncronization process, I don't see any reason why you can't send ETag (and Last-Modified) in order to support Conditional GET on your cluster.
Posted by Dan Kubb | May 11, 2007 7:02 PM
Posted on May 11, 2007 19:02
What kind of re-directs are you talking about? Meta or server side?
Posted by Joshua | May 11, 2007 8:41 PM
Posted on May 11, 2007 20:41
Wow, great commentary here... I've learned a lot from this preso, and more from the feedback...
Re redirects -- I assume server-side.
Re etags -- all the feedback makes sense... my approach would be to md5 the content of the served object, which should be independent of the front end node serving the page...
Posted by Rich Skrenta | May 11, 2007 10:47 PM
Posted on May 11, 2007 22:47
How should I gzip .js and .css files??
Posted by Erick | May 12, 2007 1:04 AM
Posted on May 12, 2007 01:04
12 Remove duplicates
12 a Remove duplicate scripts
12 b Remove duplicate styles
12 c Remove duplicate classes
12 d Remove duplicate spaces
12 e Remove duplicate words (all previous "Remove duplicate" are subjects to be removed)
Posted by Genn | May 12, 2007 1:20 AM
Posted on May 12, 2007 01:20
Rule 0. Cache your dynamic pages. Do not rebuild whole page each time, when user asks it. Cache it, make it static!
Posted by liilliil | May 12, 2007 6:33 AM
Posted on May 12, 2007 06:33
Thanks for all the feedback. The Web 2.0 presentation was 3 hours long and we weren't able to cover all of the slides! There is a lot of information behind the 14 rules. You can read the "Rough Cuts" version of the book chapters online now at O'Reilly (you have to pay). You can get snippets from a series of blogs I'm writing for Yahoo! Developer Network. Also, Tenni Theurer has written a great series of articles about some of our research on the Yahoo! User Interface Blog. I'm presenting at OSCon in July. This high level of interest in improving web performance is awesome. I hope to see you at OSCon.
Posted by Steve Souders | May 12, 2007 2:32 PM
Posted on May 12, 2007 14:32
@erick
If your server allows you to configure mod_gzip from your .htaccess file, I believe you can add these lines in to compress .js and .css files:
mod_gzip_item_include file \.js$
mod_gzip_item_include file \.css$
Check http://www.webmasterworld.com/forum83/547.htm for a little more info. I found those lines there.
@liilliil
Good point about caching pages. Most small scale to mid-sized sites don't do this, but they should (I imagine large sites do this however). The key is to have a content management system that integrates well with the caching strategy. I found this Wordpress plugin that makes caching pages a snap for anyone who uses WP to manage their site: http://ibloggedthis.com/2006/05/20/wordpress-caching-how-to/
Posted by Matt King | May 13, 2007 11:07 AM
Posted on May 13, 2007 11:07
Great tips! I can always use advice as to how to speed up my life. I liked these so much I listed them on ListAfterList.com. If you have any further advice, this seems to be the place to put it. Check it out: http://listafterlist.com/ListResults/tabid/57/ListID/7091/Default.aspx
Posted by Rachel | May 14, 2007 10:52 AM
Posted on May 14, 2007 10:52
Ah, the irony: it suggests minifying JavaScript yet the JavaScript for the page is NOT minified!
Posted by Swashbuckler | May 20, 2007 8:04 PM
Posted on May 20, 2007 20:04
This is by far the best list for achieving faster websites that I've ever seen. I added some of my own tips at Top Methods for Faster Sites
Posted by AskApache | August 9, 2007 11:04 AM
Posted on August 9, 2007 11:04
It is beyond me why there’s no standard for resource packaging (archiving all required files) for HTML.
See my thoughts at http://mindtrickle.wordpress.com/2009/07/03/packaging-resources-in-html-files/
Posted by Yaron Golan | July 3, 2009 2:40 AM
Posted on July 3, 2009 02:40