Force browser to only cache images (not scripts and links)

Question

I maintain a website that receives regular updates and style changes. Following these changes, often my client will protest that I've somehow 'broken' their website purely because their browser has cached the old CSS stylesheets and/or scripts, sometimes even after a refresh.

This question (How to control web page caching, across all browsers?) explains how I can overcome the problem with just about any of the technologies at my disposal but I don't want a blanket no-cache solution, I would like the browser to maintain the images - particularly the larger ones that rarely change.

Is this possible using, say, PHP, HTML, or even JavaScript?

Call me OCD but I'd prefer not to modify the file names each time there is a change to the content (though I'm willing to resort to this), I'm looking for a control mechanism if one exists.

I understand this can be achieved via Apache Expires module (as explained here: Website image caching with Apache) but the hosting account my client uses doesn't appear to grant me the access to do it and if I'm honest I'm far from an Apache expert.

use etags and make sure last-modified is correct, and it should work automatically without fussing with expires, which can lock a url in to a certain version for a long time if not used correctly. — dandavis
– dandavis, Commented Sep 2, 2014 at 22:15

lxg · Accepted Answer · 2014-09-02 21:06:44Z

3

If you don't have access to the Apache configuration itself, you can try setting expiration rules via an .htaccess file. Contrary to popular belief, not only Rewrite rules, but any Apache configuration rules can be contained there … if the Apache config allows it. But, it's worth giving it a try.

To only cache certain files, you can use a directive like:

<FilesMatch "\.(ico|pdf|jpg|png|gif|js|css)$">
  Header set Cache-Control "max-age=172800, public, must-revalidate"
</FilesMatch>

(You can remove those extensions you don't want to cache, and add others.)

Now, as for CSS and JS, it is generally recommended to do the following: Instead of changing the file name itself, simply change the references to theses files by adding a (meaningless) query string to them.

For example, when embedding a JS file, do it like this:

<script src="/path/to/file.js?rev=123" type="text/javascript"></script>

Next time you update that file, simply increment the rev number.

answered Sep 2, 2014 at 21:06

lxg

13.2k13 gold badges56 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Leon Clements Over a year ago

Thanks @lxg, from my initial reading it looks like I can use multiple <FilesMatch> tags in my .htaccess. In that case, I think something like this might work:

<FilesMatch "\.(ico|pdf|jpg|png|gif)$">   Header set Cache-Control "max-age=172800, public, must-revalidate" </FilesMatch>

<FilesMatch "\.(js|css)(\.gz)?$"> Header set Expires "Thu, 15 Apr 2012 20:00:00 GMT" Header unset ETag FileETag None </FilesMatch>

Not sure about the .gz bit! I stole it from David Walsh: davidwalsh.name/yslow-htaccess

lxg Over a year ago

Interesting that he removes the ETags. In my experience they don't do any harm, but he's undoubtedly an expert in this topic. (EDIT: I just checked, Google also doesn't set ETag headers.) As for the .gz, you can basically add any file extension of static files that don't change too often. If you wanted to include every possible extension, that list would become very long.

Atul Jindal · Accepted Answer · 2014-09-02 21:06:24Z

0

You can use caching with your PHP script. Create an PHP script, and pass the image name as parameter.

In php script, just use header() function, to control browser cache. Set cache expire time in header function. As Browser maintains cache via HTTP headers.

Then after sending header for cache control. Send another header for image, After sending image header, read the raw contents of image, just send the output of image contents in binary stream.

Here is a good example of code explained

http://www.informatics-tech.com/how-to-leverage-browser-caching-without-htaccess.html

Happy Coding Atul Jindal

answered Sep 2, 2014 at 21:06

Atul Jindal

9769 silver badges8 bronze badges

Collectives™ on Stack Overflow

Force browser to only cache images (not scripts and links)

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related