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.
1 Answer
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
ExpiresandCache-Controlheaders 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
