Command Center

This tutorial explains how you can configure Apache2 to set the Expires HTTP header and the max-age directive of the Cache-Control HTTP header of static files (such as images, CSS and Javascript files) to a date in the future so that these files will be cached by your visitors' browsers. This saves bandwidth and makes your web site appear faster (if a user visits your site for a second time, static files will be fetched from the browser cache). This tutorial was written for Debian Squeeze.

I do not issue any guarantee that this will work for you!


1 Preliminary Note

I'm assuming you have a working Apache setup on your Debian Squeeze server, e.g. as shown in this tutorial: Installing Apache2 With PHP5 And MySQL Support On Debian Squeeze (LAMP)


2 Enabling mod_expires

mod_expires can be enabled as follows:

a2enmod expires

Restart Apache afterwards:

/etc/init.d/apache2 restart


3 Configuring mod_expires

The mod_expires configuration can be placed in the overall Apache server configuration, inside a virtual host container, inside a directive, or inside an .htaccess file.

In this example, I will place it in Apache's default vhost which is configured in /etc/apache2/sites-available/default on Debian Squeeze:

vi /etc/apache2/sites-available/default

If you have multiple file types that should expire after the same time after they have been accessed (let's say in one week), you can use a combination of the FilesMatch and the ExpiresDefault directives, e.g. as follows:

[...]
<IfModule mod_expires.c>
          <FilesMatch "\.(jpe?g|png|gif|js|css)$">
                      ExpiresActive On
                      ExpiresDefault "access plus 1 week"
          </FilesMatch>
</IfModule>
[...]

This would tell browsers to cache .jpg, .jpeg, .png, .gif, .js, and .css files for one week.

Restart Apache after your changes:

/etc/init.d/apache2 restart

Instead of using FilesMatch and ExpiresDefault directives, you could also use the ExpiresByType directice and set an Expires header (plus the max-age directive of the Cache-Control HTTP header) individually for each file type, e.g. as follows:

[...]
<IfModule mod_expires.c>
          ExpiresActive on

          ExpiresByType image/jpg "access plus 60 days"
          ExpiresByType image/png "access plus 60 days"
          ExpiresByType image/gif "access plus 60 days"
          ExpiresByType image/jpeg "access plus 60 days"

          ExpiresByType text/css "access plus 1 days"

          ExpiresByType image/x-icon "access plus 1 month"

          ExpiresByType application/pdf "access plus 1 month"
          ExpiresByType audio/x-wav "access plus 1 month"
          ExpiresByType audio/mpeg "access plus 1 month"
          ExpiresByType video/mpeg "access plus 1 month"
          ExpiresByType video/mp4 "access plus 1 month"
          ExpiresByType video/quicktime "access plus 1 month"
          ExpiresByType video/x-ms-wmv "access plus 1 month"
          ExpiresByType application/x-shockwave-flash "access 1 month"

          ExpiresByType text/javascript "access plus 1 week"
          ExpiresByType application/x-javascript "access plus 1 week"
          ExpiresByType application/javascript "access plus 1 week"
</IfModule>
[...]

You might have noticed that I've set three ExpiresByType directives for Javascript files - that is because Javascript files might have different file types on each server. If you set just one directive for text/javascript, but the server recognizes the Javascript file as application/javascript, then it will not be covered by your configuration, and no cache headers will be set.

You can use the following time units in your configuration:

years
months
weeks
days
hours
minutes
seconds

Please note that Apache accepts these time units in both singular and plural, so you can use day and days, week and weeks, etc.

It is possible to combine multiple time units, e.g. as follows:

ExpiresByType text/html "access plus 1 month 15 days 2 hours"

Also note that if you use a far future Expires header you have to change the component's filename whenever the component changes. Therefore it's a good idea to version your files. For example, if you have a file javascript.js and want to modify it, you should add a version number to the file name of the modified file (e.g. javascript-1.1.js) so that browsers have to download it. If you don't change the file name, browsers will load the (old) file from their cache.

Instead of basing the Expires header on the access time of the browser (e.g. ExpiresByType image/jpg "access plus 60 days"), you can also base it on the modification date of a file (please note that this works only for real files that are stored on the hard drive!) by using the modification keyword instead of access:

ExpiresByType image/gif "modification plus 7 days"


4 Testing

To test if your configuration works, you can install the Live HTTP Headers plugin for Firefox and access a static file through Firefox (e.g. an image). In the Live HTTP Headers output, you should now see an Expires header and a Cache-Control header with a max-age directive (max-age contains a value in seconds, for example 604800 is one week in the future):

REFERENCES
http://www.howtoforge.com/make-browsers-cache-static-files-with-mod_expires-on-apache2-debian-squeeze