Website Performance: Caching and Expires Header for Images, CSS and JavaScript

Images, CSS and JavaScript files have two things in common: they are in comparison to a pure HTML page often quite large and changes infrequently or not at all.

From performance view, therefore, it would be a disaster if you would load all images and script files from scratch every time a new page of the website is loaded, even though there were the same scripts and the same images (such as the background image or the header) loaded before for the previous page.

So, it would be nice to tell the browser something like this: please download these files only once and not again, remember them and show them every time they are needed again. How you can achieve this, I will show you in this tutorial.

Example .htaccess file

First of all, we have look at the following lines from a .htaccess file:

<FilesMatch "\.(ico|jpg|png|js|gif|css|gz)$">
Header set Cache-Control "max-age=29030400, public"
ExpiresActive On
ExpiresDefault "access plus 29030400 seconds"
</FilesMatch>

With these lines, we are adding to all files with the extensions .ico, .jpg, .png, .js, .gif, .css and .gz a Cache-Control-Header as well as an Expires-Header. With these headers, we are achieving exactly what we want.

If the browser now requests one of these file types, he gets along with the actual file from the server through our htaccess file also the following information along the way:

Cache-Control: max-age=29030400, public
Expires: Wed, 01 April 2013 22:17:51 GMT

This means nothing else than that we give the browser the information that the appropriate files are not changing until the indicated date or the specified number of seconds. Thereby, the browser knows that he can load the files from his cachse until the end of this period and does not have to download them again.

Customize

If you want to customize the example above, you can proceed as follows:

First, you have to look, which file extensions should be provided with the appropriate headers exactly on your homepage. These extensions can be included or excluded from the first line of the example above, by adding on removing the file extensions from the list.

After that, you have to decide how long you want the files to be cached. The values behind "max-age" and "access plus" specify how long (in seconds) the files can be cached. Here, you can insert, for example, 3600 for an hour, for a day 86400, 2592000 for a month and so on. However, the cache time should not be longer than a year.

If you would like to set different cache times for several file extensions, you can simply just at multiple blocks for different extensions, such as:

<FilesMatch "\.(ico|jpg|png|js|gif|gz)$">
Header set Cache-Control "max-age=2592000, public"
ExpiresActive On
ExpiresDefault "access plus 2592000 seconds"
</FilesMatch>
 
<FilesMatch "\.(css)$">
Header set Cache-Control "max-age=86400, public"
ExpiresActive On
ExpiresDefault "access plus 86400 seconds"
</FilesMatch>
 
<Files page.html>
Header set Cache-Control "max-age=3600, public"
ExpiresActive On
ExpiresDefault "access plus 3600 seconds"
</Files>

In this example, for the file page.html a time of 1 hour (3600 seconds) is set, for all CSS files, a time of 1 day (86400 seconds) is set, and the other files get a time of 1 month (2592000 seconds).

Alternative way of writing

In addition to the just introduced notation, you can specify the Expires-Header with ExpiresByType. Here's an example:

ExpiresActive On
ExpiresDefault "access plus 1 year"
ExpiresByType text/html "access plus 10 seconds"
ExpiresByType text/css "access plus 6 months"
ExpiresByType application/x-javascript "access plus 6 days"
ExpiresByType image/png "access plus 3 months"
ExpiresByType image/jpeg "access plus 3 months"
ExpiresByType image/gif "access plus 86400 seconds"
ExpiresByType image/x-icon A86400

In this example, you can see how you can set individually an Expires Header for each file type. If a type is not specified in concrete terms, the header set under "ExpiresDefault" is used. From this example, you can see that in addition to "seconds", other time specifications such as "days", "month" or "year" are possible. Also, instead of "access plus 86400 seconds" the string "A86400" can be written, as is demonstrated in the last line.