Question

I want to leverage browser caching to increase page speed. It sounds like max-age and and last-modified are good choices, but I’m unclear on how to determine which files I should implement for it. In general, I’m confused on how to actually do this and what the code would look like in my htaccess. I guess I’m looking to get some more explicit help or to be shown some examples. Or maybe someone can direct me to a lesson/tutorial on this that a novice like me can understand, which I haven’t had any luck finding. Any help from someone who knows more about max-age and last-modified and can help tell me how to do this would be greatly appreciated. I am really lost on this and would pay someone to help me. Thanks.

Answer 1

A search here on SO would have returned some good information – like Leverage browser caching – but anyway…

From: http://www.samaxes.com/2011/05/improving-web-performance-with-apache-and-htaccess/

A first-time visitor to your page will make several HTTP requests to download all your sites files, but by using the Expires and Cache-Control headers you make those files cacheable. This avoids unnecessary HTTP requests on subsequent page views.

Apache enables those headers thanks to mod_expires and mod_headers modules.

The mod_expires module controls the setting of the Expires HTTP header and the max-age directive of the Cache-Control HTTP header in server responses.

To modify Cache-Control directives other than max-age, you can use the mod_headers module.

The mod_headers module provides directives to control and modify HTTP request and response headers. Headers can be merged, replaced or removed.

Rule for setting Expires headers:

# BEGIN Expire headers
<ifModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 5 seconds"
  ExpiresByType image/x-icon "access plus 2592000 seconds"
  ExpiresByType image/jpeg "access plus 2592000 seconds"
  ExpiresByType image/png "access plus 2592000 seconds"
  ExpiresByType image/gif "access plus 2592000 seconds"
  ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
  ExpiresByType text/css "access plus 604800 seconds"
  ExpiresByType text/javascript "access plus 216000 seconds"
  ExpiresByType application/javascript "access plus 216000 seconds"
  ExpiresByType application/x-javascript "access plus 216000 seconds"
  ExpiresByType text/html "access plus 600 seconds"
  ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>
# END Expire headers

Rule for setting Cache-Control headers:

# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
  <filesMatch "\.(ico|jpe?g|png|gif|swf)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch "\.(css)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch "\.(js)$">
    Header set Cache-Control "private"
  </filesMatch>
  <filesMatch "\.(x?html?|php)$">
    Header set Cache-Control "private, must-revalidate"
  </filesMatch>
</ifModule>
# END Cache-Control Headers

Note: There is no need to set max-age directive with Cache-Control header since it is already set by mod_expires module.

must-revalidate means that once a response becomes stale it has to be revalidated; it doesn’t mean that it has to be checked every time.

More info here: http://www.mnot.net/cache_docs/
And from Google: http://code.google.com/speed/page-speed/docs/caching.html
And Yahoo: http://developer.yahoo.com/performance/rules.html#expires