browser downloads and caches the page’s resources. The next time the user visits the page, the browser checks to see if any of the resources can be served from its cache, avoiding time-consuming HTTP requests. The browser bases its decision on the resource’s expiration date. If there is an expiration date, and that date is in the future, then the resource is read from disk. If there is no expiration date, or that date is in the past, the browser issues a costly HTTP request. Web developers can attain this performance gain by specifying an explicit expiration date in the future. This is done with the Expires HTTP response header, such as the following:

Expires: Thu, 1 Jan 2015 20:00:00 GMT

 

17%

83%

table 1. Percentage of time spent on the backend.

Web site

http://www.aol.com/

http://www.ebay.com/

http://www.facebook.com/

http://www.google.com/search?q=flowers

http://search.live.com/results.aspx?q=flowers

http://www.msn.com/

http://www.myspace.com/

http://en.wikipedia.org/wiki/Flowers

http://www.yahoo.com/

http://www.youtube.com/

empty cache

3%

5%

5%

53%

33%

2%

2%

6%

3%

2%

Primed cache

3%

19%

19%

100%

100%

√√6%

2%

9%

4%

3%

Rule 4: Gzip components The amount of data transferred over the network affects response times, especially for users with slow network connections. For decades developers have used compression to reduce the size of files. This same technique can be used for reducing the size of data sent over the Internet. Many Web servers and Web hosting services enable compression of HTML documents by default, but compression shouldn’t stop there. Developers should also compress other types of text responses, such as scripts, stylesheets, XML, JSON, among others. Gzip is the most popular compression technique. It typically reduces data sizes by 70%.

 

ber of HTTP requests without reducing page content:

˲ Combine multiple scripts into a single script.

˲ Combine multiple stylesheets into a single stylesheet.

˲ Combine multiple CSS background images into a single image called a CSS sprite (see http://alistapart.com/arti-cles/sprites).

collection of distributed Web servers used to deliver content to users more efficiently. Examples include Akamai Technologies, Limelight Networks, SAVVIS, and Panther Express. The main performance advantage provided by a CDN is delivering static resources from a server that is geographically closer to the end user. Other benefits include backups, caching, and the ability to better absorb traffic spikes.

Rule 2: use a content
Delivery network
A content delivery network (CDN) is a
Rule 3: add an expires header

When a user visits a Web page, the

Rule 5: Put stylesheets at the top

Stylesheets inform the browser how to format elements in the page. If stylesheets are included lower in the page, the question arises: What should the browser do with elements that it can render before the stylesheet has been downloaded?

One answer, used by Internet Explorer, is to delay rendering elements in the page until all stylesheets are downloaded. But this causes the page to appear blank for a longer period of time, giving users the impression that the page is slow. Another answer, used by Firefox, is to render page elements and redraw them later if the stylesheet changes the initial formatting. This causes elements in the page to “flash” when they’re redrawn, which is dis-