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

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

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

Guidelines:

  • Use Cache-Control: no-cache for dynamic HTML pages as it ensures that pages will be refreshed from the server ; even when pressing the Back button

  • For HTML that changes less frequently, Use the Last-Modified header with the current file time for static HTML- This will avoid a complete download of the page’s HTML, if it has not changed since it was last cached by the browser