How to Completely Disable Browser Caching on a Joomla Website

A major annoyance on a Joomla website (and on any other website, for that matter) is browser caching. Browser caching, in this day and age, is mainly about caching images, JavaScript files, and CSS files on the client’s end. Now, while browser caching significantly decreases the load time of a page on the client’s end and greatly reduces the server’s bandwidth, it creates other problems: What if an image changes? What if the main CSS file changes? What if there was an additional function that was added to a JavaScript library file and that is now used across the board? If browser caching is enabled (which is the default behavior in any browser), then the client will not be able to see any of these changes, and, as such, the page may look differently than what it actually is for that client and/or some (if not all) functionality will not work for him (in case of a change in a JavaScript file).

So, what can be done to avoid this problem?

Well, there are several solutions to this problem and we have listed them all below (one of these solutions will definitely accommodate your needs):

1. Ask your users to clear their cache to see the latest version

   If your website is an internal/exclusive website with a limited number of visitors, then the easiest way to get your clients to see the latest version of the website is by asking them to clear their cache. By the way, the majority of browsers out there allow you to see the most recent version of a page (e.g. bypass caching) by loading the page and then clicking on CTRL + R or CTRL + SHIFT + R. This method is very useful if your changes are infrequent and your website is more or less an intranet.

2. Ask your users to completely disable caching

   Caching can be fully disabled in any browser nowadays. For example, in Firefox, if you want to disable caching, then you will need to click on the Firefox button on the very top left of the page, and then click on Options, and then click on Advanced and then on the Network tab, and then check the box next to Override automatic cache management, and finally set the value next to Limit Cache to 0 (this means that Firefox won’t have any disk-space for caching). There’s a couple of disadvantages associated with this method : 1) It is a bit complicated to disable caching on some browsers (especially Google Chrome) and 2) it’ll slow down browsing on all websites, because nothing will be cached, and everything will have to be re-retrieved on each visit to any page on any website! Note that this method, similar to the above one, is only practical when your visitors are few and are known (e.g. you are running an Intranet).

3. Instruct the browser to always check for the latest version of your files using Apache directives

   Let’s face it, the first two solutions that we offered are only practical in a closed scenario (e.g. a website that is only used by a few known people), these solutions don’t apply to real websites with real traffic. So what can be done if you’re running a website that has tens of thousands of visitors every day? You can’t just tell them to clear or disable their cache, can you?

   Fortunately, there is a solution, and it is to instruct their browsers to always load the latest version. This can be done by adding the following line to the very beginning of your .htaccess file (the .htaccess file is located under the root directory of your website):

   <IfModule mod_headers.c>
   	<FilesMatch "(?i)^.*\.(css|htm|html|gif|jpg|jpeg|js|png|pdf)$">
   		Header set Cache-Control "max-age=0,must-revalidate"
   	</FilesMatch>
   </IfModule>

   The above method is ideal – it tells the browser to always check for the latest version of CSS files, images, JavaScript files, and Adobe Acrobat files. If the latest version (e.g. the version on the server) is different for any file matching the above, then the browser will retrieve that file from the server and it’ll refresh its (the browser’s) cache.

   Now, we know that technically we are not completely disabling browser caching with this method, but, if you give it a deeper thought, you will know that you are getting the best of both worlds. Users will only load files from your server if these files were changed – which is exactly what you want under normal circumstances. However, if you really want to completely disable browser caching (maybe for security reasons), then you will need to add the below code (instead of the one above) to the beginning of your .htaccess file:

   <IfModule mod_headers.c>
   	<FilesMatch "(?i)^.*\.(css|htm|html|gif|jpg|jpeg|js|png|pdf)$">
   		Header set Cache-Control "no-cache, no-store"
   	</FilesMatch>
   </IfModule>

   The above ensures that the browser doesn’t cache anything from your website and that the browser gets the CSS files, images, JS files, and PDF files from your server even if nothing has changed from the last visit.

4. Add HTML meta tags to your index.php file

   If you don’t have access to the .htaccess file or if you’re afraid of modifying it, then you can just add the following meta tags immediately after the <jdoc:include type=”head” /> line in your index.php file:

   <meta http-equiv="cache-control" content="no-store">
<meta http-equiv="pragma" content="no-cache">

   Technically, they’ll have the same effect as the above. The thing is, some users are behind a proxy, and some proxies don’t respect HTML meta tags and cache your files anyway – which means that these users will still see the old cached images (from the proxy) even if these meta tags are there.

5. Append a dummy GET variable with a dynamic value to the name of the files

   If the above methods did no work for you (for some reason), then a guaranteed solution is to append a dummy GET variable to the name of every file you have on a page (be it an image file or anything else). The value of that dummy variable must change with each page load. This tricks the browser into thinking that it’s loading another file, since, from its perspective (the browser’s perspective), this…

   <img src="/images/stories/logo.jpg">

   … is different than:

   <img src="/images/stories/logo.jpg?v=1">

   and this…

   <img src="/images/stories/logo.jpg?v=1">

   is different than:

   <img src="/images/stories/logo.jpg?v=2">

   Of course, this method has to be done through a plugin (unless you have someone who is fast enough and patient enough to go through all your files and your database and change the v number every time someone visits your website – that was a joke!). This plugin must dynamically change the content of the served page to include a new v variable on every page load.

   This method works very well, but the downside of it is that it can create a huge load on the server. If you have a very large website, then it’s best to stick with the 3^rd method above.

If you want to completely disable browser caching on your Joomla website, and none of the above methods worked for you for some reason, or if you need help with their implementation, then please contact us and we’ll be more than happy to help you. We won’t charge you much and we promise that we’ll give you a fully working solution.