Blog

Help! Chrome's ignoring my Cache-Control headers!

You're a web developer and you've discovered your web app's sending a lot of static assets over the wire with every page load. These are static assets, so there's no need – they don't ever change. If you configure your web server with the right headers, you can tell browsers to cache them forever. Pages will load faster, and your server will be under less load. So you create a .htaccess file with something like this in it:

<ifModule mod_headers.c>
Header set Cache-Control "max-age=604800, public"
</ifModule>

You load your website and watch the network inspector in Chrome. You hit refresh, but you still see loads of requests for your static files. You hit refresh again. Maybe it cached this time, or maybe not. But refresh again, and everything gets retransferred! You start looking at individual requests. The headers are being set properly. You read the spec, and everything looks fine. Other browsers are respecting the headers and doing the right thing. What the hell's going on?

You're not going mad, and you probably haven't messed up. Chrome's trying to be helpful: it can't tell you're a web developer, and it doesn't know you're tapping that refresh button to test the server. Chrome's detecting the multiple refreshes, presuming you're doing it because the page is broken, and reloading everything from the server. I haven't figured out the exact behaviour it uses to do this, but it seems it involves whether you click through to other pages or not. As a result, you'll get more reliable testing if you navigate around your app a bit rather than clicking refresh.