How to Set the Expires Header

One of the many Firefox plug-ins I use for measuring web page performance is YSlow. It performs several measurements on a web page and gives performance improvements. One of the suggestions is the Expires header. By using the expires header, the components, such as images, javascript, flash, and css files, become cacheable. In other words, on items that rarely change.

Once downloaded, the browser figures out if the component needs to be refreshed; if not, it does not ask for it from the server. This process saves a lot of traffic to and from the server, especially if there are a lot of static components. Originally designed for images, using it for css, flash, and javascript files will improve page load time.

Adding a far future expiry header to your image, css and javascript files can speed up your site; sometimes significantly. Adding expires headers do not affect the site load time for a first time visitor but you will be surprised how much the page load time decreases for subsequent page visits from that visitor.

The expires header specifies a time far enough in the future so that browsers won’t try to refetch images, CSS, javascript etc files that haven’t changed (this reduces the number of HTTP requests) and hence the performance improvement on subsequent page views.

If your server is Apache (most web servers), you can use the ‘ExpiresDefault’ directive to set an expiration date relative to the current date.

This sets the expiry date of the file 2 months into the future from the current time. The following values can be used to specify the time period:

• years
• months
• weeks
• days
• hours
• minutes
• seconds

eg. ExpiresDefault “access plus 14 days”

To add expires header to the image, CSS, javascript files add the following to your .htaccess file

#Expire Header
<FilesMatch "\.(ico|jpg|jpeg|png|gif|js|css|swf)$">
ExpiresActive on
ExpiresDefault "access plus 2 hours"
</FilesMatch>
or
# Expire images header
ExpiresActive On
ExpiresDefault A0
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/ico A2592000
ExpiresByType text/css A2592000
ExpiresByType text/javascript A2592000
A2592000 means 1 month in the future (60*60*24*30=2592000)

Keep in mind that when you use expires header the files are cached in the browser until it expires so do not use this on files that changes frequently. If you change/update a file that has a far future expiry (eg. CSS or javascript files) then you should rename that file and use the renamed version so the browser doesn’t fetch the old file.

Note that mod_expires automatically calculates and inserts a Cache-Control:max-age header as appropriate.

How to Set the Expires Header

Note this works only for Apache servers

In the .htaccess file add the following code (either method 1 or 2).

Method 1

The expires header is in the mod_expires.c module on the Apache server.

ExpiresActive On - turns on the expires header. Activates mod_expires.

The ExpiresByType has the MIME definition after it then the time of delay. Note that image/jpeg handles jpeg, jpg extensions.

The number following A is the #of seconds
Also i got the meaning of A2592000 = 720hours = 30days
the numbers after A is the time to expire time (in seconds)
ie A3600 is 1 hour

Method 2

If you need to change a static file change the name of it so it is read in by the browsers.

Testing

To test whether the expires header works:

* Navigate to the page you want to check

* Open up fiddler. Fiddler shows the responses to/from the server.

* Refresh the page. For the images, you will get a 304 response

* Navigate away from the page then come back to it. You will not see any 304 responses for the images; in fact, you should see NO requests at all for the images because the expires date is in the future thus the browser will read the images from its cache without any server interaction.

Troubleshooting

Check your website immediately after uploading the .htaccess file. Some providers do no support mod_expires.c and will cause problems on the site.

The HTTP expires date is in Greenwich Mean Time (GMT).

It is important that the web server's time is accurate if you use the expires header.

Using browser refresh (F5 key) will cause fiddler to show 304 response rather than no response.

Resources

YSlow Firefox plugin