17. Add an Expires or a Cache-Control Header

Web page designs are getting richer and richer, which means more scripts, style sheets, images, and Flash in the page. A first-time visitor to your page may have to make several HTTP requests, but by using the Expires header you make those components cacheable. This avoids unnecessary HTTP requests on subsequent page views. Cacheable resources include JS and CSS files, image files, and other binary object files (media files, PDFs, etc.).

The advantage of setting long expiry dates is that the content can be read from the local browser cache whenever the user revisits the web page or goes to another page that uses the same images, script or CSS files.

The diagram below shows how a JavaScript file is loaded into the browser cache on the first visit to a web page

Example:

First visit to a webpage
First visit to a webpage

On any subsequent visits the browser only has to fetch the page’s HTML:

Subsequent visits
Subsequent visits

Keep in mind, if you use a far future Expires header you have to change the component's filename whenever the component changes.

Changing the component's
Changing the component's

Guidelines: