Stop Image Flicker With Cache-Control Extensions
Image flicker in Internet Explorer/Win causes IE to get bitchslapped quite often. To get rid of this effect Dean Edwards suggests to configure Apache to keep images cached. Otherwise you need to manually change caching preferences in IE which a lot of people don’t know how to do. Besides, when images flicker, it’s you who looks bad, not the users’ IE. Dean says he’s no server expert, and neither am I, but there’s a way to configure IIS in a similar fashion.
Cache-Control Extensions is a little-known feature that was rolled out with Internet Explorer 5.0. In a nutshell, it’s a proprietary extension to the
Cache-Control header IE 5.x and 6.x understand. The two extensions are
Internet Explorer applies the following logic to objects served with these extensions:
- Upon first request, the object is cached and is served from cache until the
- Once the
post-checkinterval expires IE fetches the object from cache and checks for an updated one in the background. If a newer object is available it caches it. Upon every subsequent request this updated (and now cached) object is served until the
- Once the
pre-checkinterval elapses the object is treated as expired. IE will first ask the HTTP server if the object has changed since it was requested by the browser. If it has, IE will load the updated object.
As MSDN states, the Refresh button will not trigger this logic because Refresh always sends the
if-modified-since request to the server. Hyperlinks do trigger this logic.
How about an example? Suppose an HTTP server sends an image with the following header:
post-check specify time intervals in seconds. We tell IE to cache the mentioned image for 12 hours (60 * 60 * 12 seconds). The first hour (60 * 60 seconds) IE will simply display the image from its local cache. However, after 60 minutes we want it to check for a newer one in the background, i.e. it will display the cached one and then do a background check. When 12 hours are up, IE checks for a modified image first.
Set Cache-Control Extensions In IIS
The only missing piece of the puzzle is where to set these extensions to get the ball rolling. You do it in the IIS Manager snap-in. You may choose to set them on a specific folder, such is a folder with images. You may also set them on your entire web app, but hardly ever would you want to cache every single page on your site.
Fire up the IIS Manager snap-in from Administrative Tools, pick a folder in your web app, right click, go to Properties, switch to the HTTP Headers tab, and click Add. Add cache-control extensions like this:
Click Ok to dismiss the dialog. Your HTTP Headers tab should have extensions listed.
Set Cache-Control Extensions Programmatically
I was in for a big surprise when I found documentation for
HttpCachePolicy.AppendCacheExtension. You can accomplish what we’ve talked about in C# like this:
Now, if you want to serve images with this cache policy (which is a good idea) you need to assign them to the ASP.NET ISAPI extension in IIS because by default ASP.NET is not configured to pass them through its HTTP pipeline.
What I Don’t Know
What happens if either
post-check is missing? I don’t know. What happens if
post-check is greater than
pre-check? I don’t know either. I found no documentation on MSDN that talks about it.