PRO GR ES S

³

160 200
120 240
⁸⁰ 280

40 320

Speed

Temp

2

4

1

5

0

0

RPM

 

overall page load time.

This situation, in which a large percentage of page load time is spent on the frontend, applies to most Web sites. Table 1 shows that eight of the top 10 Web sites in the U.S. (as listed on Alexa.com) spend less than 20% of the end user’s response time fetching the HTML document from the backend. The two exceptions are Google Search and Live Search, which are highly tuned. These two sites download four or fewer resources in the empty cache situation, and only one request with a primed cache.

iLLus Tra TioN by Nik schuLz

The time spent generating the HTML document affects overall latency, but for most Web sites this backend time is dwarfed by the amount of time spent on the frontend. If the goal is to make the user experience faster, the place to focus is on the frontend. Given this new focus, the next step is to identify best practices for improving frontend performance.

frontend Performance
Best Practices

Through research and consulting with development teams, I’ve developed a set of performance improvements that have been proven to speed up Web pages. A big fan of harvey Penick’s Little Red Book¹ with advice like “Take Dead Aim,” I set out to capture these best practices in a simple list that is easy to remember. The list has evolved to contain the following 14 prioritized rules:

1. Make fewer HTTP requests

2. Use a content delivery network 3. Add an Expires header

4. Gzip components

5. Put stylesheets at the top

6. Put scripts at the bottom

7. Avoid CSS expressions

8. Make JavaScript and CSS external 9. Reduce DNS lookups

10. Minify JavaScript 11. Avoid redirects

12. Remove duplicate scripts

13. Configure ETags

14. Make Ajax cacheable

A detailed explanation of each rule is the basis of my book, high Performance Web Sites. ² What follows is a brief summary of each rule.

 

Rule 1: make fewer httP Requests As the number of resources in the page grows, so does the overall page load time. This is exacerbated by the fact that most browsers only download two resources at a time from a given hostname, as suggested in the HTTP/1.1 specification ( http://www.w3.org/Protocols/rfc2616/ rfc2616-sec8.html#sec8.1.4).^a Several techniques exist for reducing the num-

a Newer browsers open more than two connections per hostname including Internet Explorer 8 (six), Firefox 3 (six), Safari 3 (four), and Opera 9 (four).