This is a really enlightening talk from Steve Souders, author of High Performance Websites, and Chief Performance Yahoo!. Below is a summary of his talk, but they also have a page detailing their rules.
- Use a Content Distribution Network. Akamai, Panther Express, Limelight, Mirror Image, SAVVIS. Distribute your static content before creating a distributed architecture for your dynamic content.
- Add an Expires header. If you aren't already, you should be changing the URL of your resources when you version them, to ensure that all users will get updates and fixes. Since you then won't be updating a given resource, you should give it a far future expires header.
- Put stylesheets at the top. IE will not begin rendering until all CSS files are downloaded. Use the link HTML tag to pull in stylesheets, not the @import CSS directive, as IE will defer the download of the stylesheet.
- Avoid CSS expressions. The speaker doesn't cover this, but I gather from my own experience that this can seriously delay rendering as the expression will not be evaluated until the page is fully loaded.
- Make CSS and JS external. This rule can be bent in situations where page views are low and users don't revisit often. In this situation in-lining is suggested.
- Avoid redirects.
- Remove duplicate scripts.
- Configure ETags. These are used to uniquely identify a resource in space and time, such that if the ETag header received is identical to the cached result from a previous request for that resource, the browser can choose to use the local cache without need to download the remainder of the response stream. The speaker doesn't go into this subject, so questions about how this improves caching performance over caching headers remain unanswered until you read his book.
- Make AJAX cacheable. If you embed a last modified token into the URL of your AJAX request, you can cause the browser to pull from cache when possible.
A great tool to analyze your site's conformance to these rules is YSlow. It's an add-on for Firebug. During development your YSlow grade can give you a very good indication of what is happening to the response time of your application. This metric, the YSlow grade, seems to me to be a much better quality gate for iterative development than does something as variable and volatile measured response time.
Some additional rules from the next version of the book:
- As mentioned in my commentary in rule #9, split dominant content domains.
- Reduce cookie weight.
- Make static content cookie free.
- Minify CSS (see rule #10 comments above).
- Use iframes wisely. The are a very expensive DOM operation. Think about it--it's an entirely new page, but linked to another.
- Optimize images. Should your GIFs be PNGs? Should your PNGs be JPGs? Can you shrink your color palette?