Browser Resource Caching (Images, Javascript, CSS)

Question

I am having trouble with caching on a website that I'm working on updating. Many of the resources I've updated (javascript, css, and image files) appear to be cached locally by browsers. What I can't understand is why, or how to resolve this short of renaming everything I've edited (which isn't a very attractive solution).

The server is generating the following in http headers.

Date Fri, 06 Jan 2012 00:09:32 GMT
Server  Apache/2.2.16 (Amazon)
X-Powered-By    PHP/5.3.5
Expires Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control   no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Pragma  no-cache
Content-Length  3636
Connection  close
Content-Type    text/html; charset=UTF-8

Based on what I understand from cache control directives, resources shouldn't be cached. Despite this, I'm getting images, css, and javascript files that are not updating after I upload changes.

Any ideas on how I can resolve this or best practices?

Jason George Jason George · Accepted Answer · 2012-02-14T01:11:18

After making little headway on this I decided to place all of my cache-able resources in versioned folders (ie. css-1.2.1, js-1.2.1, etc). Any time I update the site I just increment my version numbers (I'm keeping all version numbers synchronized). This is suboptimal in terms of cache optimization, but it means I don't have to track individual version numbers for every resource. Given I'm not updating the site every four hours, it will just mean users have to download a fresh resource set whenever I update the site.

Browser Resource Caching (Images, Javascript, CSS)

1 Answers