How to block the contents of the web browser cache

Question

I really delved into Google Page Speed, optimizing a lot of sites that I work on to get it well - and quite proudly I can say.

The only drawback that I came across is that some of the caching changes that are being made, small changes in JS and CSS, as a rule, do not lead to the loading of a new copy of the files.

Can I make any changes to JS, CSS (or other resources) to force a new copy to be uploaded?

Answer 1

I sometimes run into similar problems when JS and CSS are cached longer. The solution that works for me is adding the version number or timestamp of the last update to the file name as querystring. Thus, the browser sees the file as modified, and it downloads it again.

Maybe something like this to get JS:

http://yourdomain.com/content/js/functions.js?v=201232 

Answer 2

I know that this is probably obvious, since you can understand that the "versioning" method for cache invalidation works for any requested static resource, but if it is missing, I will connect here.

We allow branding for some of our applications, and this means that image files change very often during the lifetime of customers with us, as well as the other static files mentioned earlier. If the same name should be used for a file, caching is a problem. Conveniently, the idea of ​​a version for the image source works just as well.

 <img src="images/title.gif?v=2" /> 

In addition, it is not necessary to mention this, but the term "invalid cache" in this regard is not technically correct. To invalidate the cache, you must delete the cache entries. There is no real way to programmatically do this for the browser. In fact, we are talking about the fact that the web server is requesting a new file due to a change in the file name, rather than forcing the deletion of the original file. You can easily test this by changing the file version back and forth between the unused version and the older version, and review the HTTP 200 and 304 responses accordingly.

Answer 3

Take a look at the HTML5 Boilerplate. http://html5boilerplate.com/ It does a lot of things that you worry about automatically, and it handles cache invalidation using different css file names every time they are changed.