Ikanobori Weblog

Caching. It can be done on almost everything. File systems, databases and websites, to name a few.

In the ever faster and ever more dynamic internet world it might seem that caching would eliminate dynamic content.  It does not. Caching is very useful in lowering the amount of requests and could potentially save you and your client a lot of time and/or bandwidth.You can tell a browser to cache specific files by sending cache-related headers. In this post I assume you already know how to send headers to the client using your language of choice so I will only talk about the headers you can send and which ones you have to use.

First of all, browsers cache automatically. They look for Last-Modified headers in the response by the webserver. If the contents last-modified date is not newer then the one the browser has in it’s cache it will serve the one from cache rather then getting it from the server again. However, this way does take a request from the browser just to see if the server has a newer version available and that is not something we were hoping for.

The best way to handle your caching is by setting your Expires header. The expires header can be set in the future. We call this a “far future expiry header”. By setting the expiry header in the future the browser first looks in it’s cache, sees that it does not have to request the stylesheet again because it expires in 2010 so it does not request the stylesheet from the server, instead it serves the stylesheet straight from it’s cache.

Now you might wonder what happens if you make changes to your stylesheet/images/javascript files. The answer is pretty simple, you might consider adding version numbers to those files, or maybe the date that they were created. Just be sure to turn off your caching headers when you are developing to save yourself a lot of time and stupid mistakes.

Sure this technique won’t have any effect on first time visitors. Returning visitors who need to download that big javascript library on every request just because someone forgot to set the correct headers will get a lot of benefit from this. And so does your bandwidth plan.

2 COMMENTS
Alvaro
December 15, 2008

Very true, proper caching is necessary, and some sites have it so configured that even hitting “back” in your browser triggers a reload of the page and all its dependencies (with no changes). Sometimes you find pages with pragma:no-cache for no reason, killing caches.

But how do you set the expires header for files such as CSS, JS, images, etc. not generated by code (i.e. PHP)?

December 16, 2008

@Alvaro. There are multiple ways to do that, one of which involves your apache configuration. The other however is easier. Just pass your css, images and js through a PHP file and serve that to the browser. Be sure not to use a ? in the url but use something like /css.php/style.css because some browsers won’t cache any url containing a ?, no matter how hard you try.

Post a comment