Expires header and dependent content-types

I generally set expire headers for CSS, JS and images according to Google's page speed recommendations, which at time of writing is one month. This may or not be a good practice, depending how often you update your CSS, JavaScript and/or images. It generally isn't the end of the world if a user visits your site and loads cached versions of the various assets that make up your site.

However, where problems may start to creep up is when you have different expiration lengths for different content types. To illustrate this by example, let's say you have the following Expires header directives in your Apache config:

ExpiresActive On
ExpiresByType image/png A86400
ExpiresByType text/css A604800

For IIS users, this essentially translates to setting Expires headers for PNGs 1 day from now, and CSS files 1 week from now.

Let's say a user visits your site, the browser pulls in a caches the PNG and CSS files appropriately. Now, you make a change to a sprite background image, which is loaded via your CSS file.

After 1 day, the new PNG sprite image will be loaded into the user's browser, but the CSS has not been updated. If you changed the position of the images in your sprite, the corresponding CSS changes would not be refreshed in the user's browser, leading to somewhat unexpected results.

For this reason alone, it always makes sense to ensure that content types which depend on one-another are always set to expire at the same time.

Why follow me on Twitter?

  • I tweet about new technologies, services or libraries I find interesting
  • Yeah, sometimes I'll post a pet-peeve or rant about something trivial
  • If I discover something that made my web development life easier, I share it
  • I'll shout out any handy tip that I think might be useful to other devs
  • Very rarely anything promotional

Tagged , .

Updated: 2012-04-14

Phil LaNasa follow us in feedly