Caching of static content like images, scripts, styles on the client browser reduces load on the webservers and also improves end users browsing experience by loading web pages quickly. We can use HTTP headers Expires or Cache-Control:max-age to cache content on client browser and set expiry time for them.
Expire header is HTTP/1.0 standard and Cache-Control:max-age is introduced in HTTP/1.1 specification to solve the issues and limitation with Expire header. Consider the following headers.
Cache-Control: max-age=24560
Expires: Tue, 15 May 2012 06:17:00 GMT
The first header instructs web browsers to cache the content for 24560 seconds relative to the time the content is downloaded and expire it after the time period elapses. The second header instructs web browser to expiry the content after 15th May 2011 06:17.
Out of these two options which one to use – max-age or expires? I prefer max-age header for the following reasons
- As max-age is a relative value and in most of the cases it makes sense to set relative expiry date rather than an absolute expiry date.
- Expire header values are complex to set – time format should be proper, time zones should be appropriate. Even a small mistake in settings these values results in unexpected behaviour.
- As Expire header values are absolute, we need to keep changing them at regular intervals. Lets say if we set 2011 June 1 as expiry date to all the image files of this blog, on 2011 June 2 we should modify the expiry date to something like 2012 Jan 1. This add burden of managing the Expire headers.
Related: Amazon S3 Tips: Quickly Add/Modify HTTP Headers To All Files Recursively
cc image flickr:rogue3w