What makes for the best performance?

sukishan · Aug 22, 2009, 06:39 PM

What makes for the best performance?
For static components such as CSS, JavaScript, and images that seldom change, it's good to use Expires cache control headers with a date in the far future—not too far, though! According to the HTTP 1.1 protocol, an HTTP server should not send an Expires header that's greater than one year into the future.

Of course, these static components might be updated from time to time—for example, if you make some CSS fixes or upload some new images. One way to make sure the browser fetches the updated resources straight away is to add the version number of the static components as if it were a GET variable. Simply put a version number at the end of the item's URL in the markup.

Here's an example. Suppose a document's HTML markup references version 1 of a style sheet, which we'll call special.css. We could reference special.css as follows in the HTML document:

<head>
<link href="special.css?v=1" rel="stylesheet" type="text/css" />
</head>

Later, when the design changes, the corresponding HTML markup could be:

<head>
<link href="special.css?v=2" rel="stylesheet" type="text/css" />
</head>

The browser will see the new GET variable, treat the file as if it were new, and download the fresh style sheet.

For content that changes frequently, we should ensure the browser makes that conditional request so that it can get the freshest content—but only when that content has changed. To make this work, we should include both the Last Modified and Cache-Control: max-age=0, must-revalidate headers in the server response. That way, the browser will always make a conditional request when the component is referenced in the HTML markup. If the component is unaltered, the server can return a response with a 304 Not Modified status to indicate that the content is unchanged, instead of sending the full response.

Discussion Community

News:

What makes for the best performance?

sukishan