How do I make a static html page and its resources cacheable?

Question

I just ran a pagespeed analysis of my page and came across the following pointer by google pagespeed:

Leverage browser caching

Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network.**

I came acrosss few articles that did speak about caching:

• SEO caching
• browser caching

There is also a small article provided by Google here. In the article the following steps are mentioned:

1. Use consistent URLs: if you serve the same content on different URLs, then that content will be fetched and stored multiple times. Tip: note that URLs are case sensitive!
2. Ensure the server provides a validation token (ETag): validation tokens eliminate the need to transfer the same bytes when a resource has not changed on the server.
3. Identify which resources can be cached by intermediaries: those with responses that are identical for all users are great candidates to be cached by a CDN and other intermediaries.
4. Determine the optimal cache lifetime for each resource: different resources may have different freshness requirements. Audit and determine the appropriate max-age for each one.
5. Determine the best cache hierarchy for your site: the combination of resource URLs with content fingerprints, and short or no-cache lifetimes for HTML documents allows you to control how quickly updates are picked up by the client.
6. Minimize churn: some resources are updated more frequently than others. If there is a particular part of resource (e.g. JavaScript function, or set of CSS styles) that are often updated, consider delivering that code as a separate file. Doing so allows the remainder of the content (e.g. library code that does not change very often), to be fetched from cache and minimizes the amount of downloaded content whenever an update is fetched.

I am still confused after reading that. Do I need to define something in my css style sheet to make it cachable, or do I need to define something in my HTML to make it cachable? How do I make an html, css or js file used in an html file cachable and where do I define the time that a file should be cachaed for?

Answer 1

If you have apache, you can refer to this page on how to use the expires keyword in the apache configuration or .htaccess files.

http://httpd.apache.org/docs/2.2/mod/mod_expires.html

Their example configuration should work but I added a few lines. See below:

 # enable expirations
 ExpiresActive On
 # expire GIF images after a month in the client's cache
 ExpiresByType image/gif A2592000
 ExpiresByType image/jpg A2592000
 # HTML documents are good for a week from the
 # time they were changed
 ExpiresByType text/html M604800
 ExpiresByType text/css M604800