How to Enable browser cache using htaccess

To do this, you firstly need to ensure you have enabled both the mod_expires and mod_headers modules in your Apache config enabled.

mod_expires controls the settings of the Expires HTTP header along with the max-age directive of the Cache-Control HTTP header in server responses.

If you need to modify your directives to anything other than the maximum age then you can use the mod_headers module.

mod_headers provides a way to control and modify your HTTP request and responses, the headers can be merged, replaced or removed.

Below is the configuration we use for the headers on gecko-social.co.uk

# BEGIN Expire headers

  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"

# END Expire headers

Below are the rules we set for the Cache Control Headers on gecko-social.co.uk:

# BEGIN Cache-Control Headers

 
    Header set Cache-Control "public"
 
 
    Header set Cache-Control "public"
 
 
    Header set Cache-Control "private"
 
 
    Header set Cache-Control "private, must-revalidate"
 

# END Cache-Control Headers

Note: You do not need to set the max-age directive using the Cache-Control header as we have already set it using the mod_expires module.

must-revalidate means that once a response becomes stale it needs to be re-validated; it doesn't mean that it should be checked on every request.

Disabling the HTTP ETag header

ETags were used to provide a mechanism for validating entities and is a lot more flexible than the last-modified date.

The main issue with ETags is that they are usually constructed using attributes which makes them unique to the server that is hosting a website.

ETags will not match when a users browser gets the original component from one server, and then later tries to validate that component on a different server.

In Apache, this is done by simply adding the FileETag directive to your configuration file:

# BEGIN Turn ETags Off
FileETag None
# END Turn ETags Off

Modifying the Last-Modified header

We now need to modify the last-Modified header for static files. We do this in-case a visitor presses the refresh button, then browser your website, setting a conditional request to the server will respond a 304 Not Modified.

If we disable both Last-Modified and ETag, the browser will have to download the whole content again whenever a user presses refresh.

Putting it all together

# BEGIN Compress text files

  AddOutputFilterByType DEFLATE text/html text/plain text/
xml application/xml application/xhtml+xml text/css text/
javascript application/javascript application/x-javascript

# END Compress text files
 
# BEGIN Expire headers

  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"

# END Expire headers
 
# BEGIN Cache-Control Headers

 
    Header set Cache-Control "public"
 
 
    Header set Cache-Control "public"
 
 
    Header set Cache-Control "private"
 
 
    Header set Cache-Control "private, must-revalidate"
 

# END Cache-Control Headers
 
# BEGIN Turn ETags Off
FileETag None
# END Turn ETags Off