High Performance Web Sites: 14 Rules for Faster Pages
Steve Souders of Yahoo's "Exceptional Performance Team" gave a great presentation at Web 2.0 about optimizing website performance by focusing on front end issues. 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.
The 14 rules:
1. Make fewer HTTP Requests
CSS Sprites (Combined image is less)
2. User a CDN
Distribute your static content before distributing your dynamic content
3. Add an Expires header
Not just for images
4. Gzip components
You CAN affect users' download times
HTML, JS, CSS, PDF, JSON, ...
5. Put stylesheets at the top
stylesheets block rendering in IE
solution: put stylesheets in HEAD (per spec)
avoids Flash of Unstyled Content
use LINK (not @import)
6. Move scripts to the bottom
scripts block parellel downloads across all hostnames
scripts block rendering of everything below them in the page
7. Avoid CSS expressions
used to set CSS properties dynamically in IE
width: expression {
document.width > 1000 ? 1000 : "auto";
}
8. Make JS and CSS external
inner: HTML document is bigger
external: more HTTP requests, but cached
external is typically better
9. Reduce DNS lookups
typically 20-121 ms
block parallel downloads
OS and browser both have DNS caches
10. Minify JavaScript
(Reduce some response time.)
11. Avoid redirects
3XX status codes - mostly 301 and 302
12. Remove duplicate scripts
hurts performance
- extra HTTP requests (IE only)
- extra executions
13. Configure ETags
unique identifier returned in response
used in conditional GET requests
if ETag doesn't match, can't send 304
ETag format
- Apache: inode-size-timestamp
- IIS: Filetimestamp: ChangeNumber
Use 'em or lose 'em
- Apache: FileETag none
- IIS: http://support.micrososftsfdsdfsdfsf
14. Make Ajax cacheable
XHR, JSON, iframe, dynamically scripts
Book
High Performance Web Sites
YSlow
PPT :
Even Faster Web Sites best practices for faster pages
PDF:
High performance web sites