# Cache Busting... Anyone have any tricks **URL:** \ **Category:** Tips & Tricks\ **Created:** [November 14, 2018, 9:31pm UTC](https://forum.pinegrow.com/t/cache-busting-anyone-have-any-tricks/2400 "2018-11-14T21:31:00Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![Printninja](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/printninja/32/1181_2.png) [@Printninja](https://forum.pinegrow.com/u/Printninja)\ **Post date:** [November 14, 2018, 9:31pm UTC](https://forum.pinegrow.com/t/cache-busting-anyone-have-any-tricks/2400/1 "2018-11-14T21:31:01Z")
This probably isn’t the best site to ask, but I figure there may be some devs out there who’ve struggled with this as well. Basically my question is… What method do you use to force a client’s browser to download an updated page, such that the client doesn’t have to “refresh” or "clear their cache? This is known in common parlance as “cache busting.” I’ve read about a bunch of different ways, but nobody seems to agree on what is the BEST way. Any thoughts Pinegrowers? ---
**Author:** ![Marf](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/marf/32/1799_2.png) [@Marf](https://forum.pinegrow.com/u/Marf)\ **Post date:** [November 14, 2018, 10:52pm UTC](https://forum.pinegrow.com/t/cache-busting-anyone-have-any-tricks/2400/2 "2018-11-14T22:52:16Z")
Don’t know what the best method is, and what kind of solutions you already found. I would say use the **“Cache-Control”** Header. > **[Cache-Control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control)** > > The Cache-Control general-header field is used to specify directives for caching mechanisms in both requests and responses. Caching directives are unidirectional, meaning that a given directive in a request is not implying that the same directive is... Use some combination with **max-age** , **no-cache** and **must-revalidate**. You can place them in your head / meta tags, or a htaccess file. ---
**Author:** ![Printninja](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/printninja/32/1181_2.png) [@Printninja](https://forum.pinegrow.com/u/Printninja)\ **Post date:** [November 15, 2018, 1:17am UTC](https://forum.pinegrow.com/t/cache-busting-anyone-have-any-tricks/2400/3 "2018-11-15T01:17:47Z")
Marf, Thanks. That’s actually what I settled on. I did it with PHP. ---
**Author:** ![Jim](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/jim/32/1646_2.png) [@Jim](https://forum.pinegrow.com/u/Jim)\ **Post date:** [November 15, 2018, 1:48am UTC](https://forum.pinegrow.com/t/cache-busting-anyone-have-any-tricks/2400/4 "2018-11-15T01:48:06Z")
What is the easiest way of implementing this? I think that most websites I make require this. Can anyone give me an example please? I know that Cache-Control: no-cache, no-store, must-revalidate has to be added but where? Thanks. ---
**Author:** ![Marf](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/marf/32/1799_2.png) [@Marf](https://forum.pinegrow.com/u/Marf)\ **Post date:** [November 15, 2018, 8:50am UTC](https://forum.pinegrow.com/t/cache-busting-anyone-have-any-tricks/2400/5 "2018-11-15T08:50:14Z")
* * * **HTACCESS** ``` Header set Cache-Control "no-cache, no-store, must-revalidate" Header set Pragma "no-cache" Header set Expires 0 ``` Better use it with “file match” for **html** , **htm** and **php** files only. ``` Header set Cache-Control "no-cache, no-store, must-revalidate" Header set Pragma "no-cache" Header set Expires 0 ``` * * * **PHP** ``` header('Cache-Control: no-cache, no-store, must-revalidate'); header('Pragma: no-cache'); header('Expires: 0'); ``` **Important:** set this headers before any content (html or whitespace) is send to the browser! * * * **HTML** (head tag) ``` ``` * * * **edit:** If you are going to use this, do also some background research about “cache control”, to know what you are doing. Instead of just copy/paste a piece of code. ---
**Author:** ![Jim](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/jim/32/1646_2.png) [@Jim](https://forum.pinegrow.com/u/Jim)\ **Post date:** [November 15, 2018, 9:16am UTC](https://forum.pinegrow.com/t/cache-busting-anyone-have-any-tricks/2400/6 "2018-11-15T09:16:23Z")
Thank you for the code examples. So if I was to place the three lines of HTML code above into the head of my pages it would work? That’s really great! ---
**Author:** ![m-artin](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/m-artin/32/1447_2.png) [@m-artin](https://forum.pinegrow.com/u/m-artin)\ **Post date:** [November 15, 2018, 2:07pm UTC](https://forum.pinegrow.com/t/cache-busting-anyone-have-any-tricks/2400/7 "2018-11-15T14:07:33Z")
Here are some strategies for cache busting CSS files, e.g. query strings at the end of the file name or changing the file name. (Please note that this is only recommended for some selected files, such as a main CSS file. ) > **[Strategies for Cache-Busting CSS | CSS-Tricks](https://css-tricks.com/strategies-for-cache-busting-css/)** > > Major performance gains are to be had from browser caching CSS. You ensure your server is set up to send headers that tell the browser to hang onto the Edit: On googles new [web.dev](https://web.dev/) website, you can also find a general overview about [the options in your caching toolbox](https://web.dev/reliable). ---
**Author:** ![Printninja](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/printninja/32/1181_2.png) [@Printninja](https://forum.pinegrow.com/u/Printninja)\ **Post date:** [November 15, 2018, 7:18pm UTC](https://forum.pinegrow.com/t/cache-busting-anyone-have-any-tricks/2400/8 "2018-11-15T19:18:12Z")
I have tried the HTML Meta method and it has not always worked with all browsers. Chrome seems to be exceptionally aggressive in its caching. ---
**Author:** ![Marf](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/marf/32/1799_2.png) [@Marf](https://forum.pinegrow.com/u/Marf)\ **Post date:** [November 15, 2018, 7:31pm UTC](https://forum.pinegrow.com/t/cache-busting-anyone-have-any-tricks/2400/9 "2018-11-15T19:31:19Z")
@Jim Using one method is enough, htaccess, PHP or HTML. When you use more methods (at a time), they are processed/overruled in that order. By using the **HTML method** , you have to add it to every single HTML file (can be a lot of work). Using **htaccess** , you can configure it for the whole site (or directory) with just one htaccess file. * * * **DO I NEED IT ?** I would like to mention that **“disabling caching”** looks very attractive and a perfect solution, but it’s not always a good idea, I would only use it when there is a very good reason! Because when disabled it means more (maybe unnecessary) requests, data traffic and load to the server. On a slow/crowded or very high traffic server, it’s not always desirable. And with a slower (mobile) connection, it takes longer to constantly load everything again from the server, which is not good for a positive user experience. And for connections with a dataplan (mobile), it cost more data for the user(s) from their dataplan. * * * **MAX-AGE and FILESMATCH** When your pages/content is not constantly changing. It’s not really necessary to disable caching. Better leave it as it is, or maybe use and configure a “Max-Age” or a “Expiration” value. For lets say: 15 min, 1 hour, 1 day or a week. And with htaccess and “FilesMatch” you can control it easily by filetype, and use different control settings. **htaccess file** (example) ``` # no caching Header set Cache-Control "no-cache, no-store, must-revalidate, private" Header set Pragma "no-cache" Header set Expires 0 # 1 day - max-age Header set Cache-Control "max-age=86100, public" # 1 week - max-age Header set Cache-Control "max-age=604800, public" ``` - **max-age :** Values are set in seconds. - **public :** Indicates that the response may be cached by any cache. - **private :** Indicates that the response is intended for a single user and must not be stored by a shared cache. A private cache may store the response. * * * **DEVELOPMENT STAGE** While you are still in developing stage, and constantly making changes. Caching can be very annoying! You can decide to temporarily disable it (with htaccess) during the development process. When the site/project is done and ready to publish, you can easily remove the caching limitations for the production server (remove/change that htaccess file). * * * ---
**Author:** ![Jim](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/jim/32/1646_2.png) [@Jim](https://forum.pinegrow.com/u/Jim)\ **Post date:** [November 15, 2018, 7:58pm UTC](https://forum.pinegrow.com/t/cache-busting-anyone-have-any-tricks/2400/10 "2018-11-15T19:58:19Z")
Hello, I am very happy with all of the information. It seems the .htaccess solution would be the best way forward. Does it matter where in my .htaccess file I put the necessary code? It will be nice to get my websites all updating again! Thank you. ---
**Author:** ![Marf](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/marf/32/1799_2.png) [@Marf](https://forum.pinegrow.com/u/Marf)\ **Post date:** [November 15, 2018, 8:22pm UTC](https://forum.pinegrow.com/t/cache-busting-anyone-have-any-tricks/2400/11 "2018-11-15T20:22:29Z")
> [@Printninja](#): > > I have tried the HTML Meta method and it has not always worked with all browsers. Chrome seems to be exceptionally aggressive in its caching. Hmmm, annoying and strange that Chrome is acting that way. Is Chrome always “aggressive with caching”, no matter which method you use? You said earlier that you tried also with PHP, did that worked better or different…?? * * * > [@Jim](#): > > Hello, I am very happy with all of the information. It seems the .htaccess solution would be the best way forward. Does it matter where in my .htaccess file I put the necessary code? It will be nice to get my websites all updating again! Thank you. If you have “rewrite rules” in your htaccess file, You need to place it below them. Don’t know if htaccess is the best method, but I prefer htaccess. Also because it’s better to maintain and control. **Edit** The code I posted was just intended as an example, for explaining it! You have to find out, and decide for yourself, how to use it for your own personal situation. Maybe you need to change some things or add some things. * * * ---
**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\ **Post date:** [November 15, 2018, 9:12pm UTC](https://forum.pinegrow.com/t/cache-busting-anyone-have-any-tricks/2400/12 "2018-11-15T21:12:58Z")
Woah man, this is some good info! Cheers for the Info guys. I wasn’t aware of some/most of this! excellent. I might well fire this up on my Local host for private webdev - and, Im quite suprised Ive never seen such a collection of info before, I’ve looked. It was good that there was a link for CSS cache busting too. All very interesting. I’ve lots on at the mo, but this needs exploring. Great. Thanks 🙂 (ps, @Marf… I’ve also been sidetracked by PineHoundPartyHats 😉 ) ---
**Author:** ![Marf](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/marf/32/1799_2.png) [@Marf](https://forum.pinegrow.com/u/Marf)\ **Post date:** [November 15, 2018, 9:41pm UTC](https://forum.pinegrow.com/t/cache-busting-anyone-have-any-tricks/2400/13 "2018-11-15T21:41:45Z")
**Off-topic:** > [@schpengle](#): > > (ps, @Marf… I’ve also been sidetracked by PineHoundPartyHats 😉 ) Is the domain : **“PineHoundPartyHats[.]com”** still available… Maybe a new business opportunity, to start an online shop! 🤩 🤪 🤑 * * * ---
**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\ **Post date:** [November 15, 2018, 9:44pm UTC](https://forum.pinegrow.com/t/cache-busting-anyone-have-any-tricks/2400/14 "2018-11-15T21:44:09Z")
## _Woof! Woof!_ …pssssst… _Silently pees on PineSaplings…_ Damn you, PinePuppies! …hee hee and yeah that phrase kind of rolled off my tongue…which makes a nice change from what usually does …okaaay then, and, back on topic! ---
**Author:** ![oleteacher](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/oleteacher/32/1121_2.png) [@oleteacher](https://forum.pinegrow.com/u/oleteacher)\ **Post date:** [November 19, 2018, 2:17pm UTC](https://forum.pinegrow.com/t/cache-busting-anyone-have-any-tricks/2400/15 "2018-11-19T14:17:58Z")
Very good information to have on hand. Thank you all for sharing! ---
**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\ **Post date:** [November 19, 2018, 2:21pm UTC](https://forum.pinegrow.com/t/cache-busting-anyone-have-any-tricks/2400/16 "2018-11-19T14:21:41Z")
mmm would this help? [https://selfcontrolapp.com](https://selfcontrolapp.com) I am trying to improve my focus and this blocks apps connecting to the internet for a time period and … clears browser caches to stop you reading them instead 🙂 Clever. But not sure as the lowest time is 0 and 15 minutes. that might be infuriating. oh and its Mac only. also for Mac is Onyx app (free system utility, amazing if you have never used it, that can do it too) > **[Does Onyx Clear All Browser Caches?](https://macosx.com/threads/does-onyx-clear-all-browser-caches.323735/)** > > Been using Onyx for ages and love it but just the other day I had a thought...it says it clears browser cache but WHICH browser? If you have more than 1 browser installed, how does it know which 1 to clear...or does it automatically clear all? If it... ---
**Author:** ![jcamachott](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/jcamachott/32/822_2.png) [@jcamachott](https://forum.pinegrow.com/u/jcamachott)\ **Post date:** [November 19, 2018, 6:04pm UTC](https://forum.pinegrow.com/t/cache-busting-anyone-have-any-tricks/2400/17 "2018-11-19T18:04:49Z")
If you want more granular control e.g. you just updated a CSS file, and you use a CMS or PHP then setup $cachebuster as a global variable in a config file…e.g. ``` ``` then in your html/php file `` Do this for files you change often when you still in the middle of designing. Then just increment the variable when you’re ready to have the client pull the updated file. ---
**Author:** ![oleteacher](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/oleteacher/32/1121_2.png) [@oleteacher](https://forum.pinegrow.com/u/oleteacher)\ **Post date:** [December 4, 2018, 2:28am UTC](https://forum.pinegrow.com/t/cache-busting-anyone-have-any-tricks/2400/18 "2018-12-04T02:28:35Z")
Something I found that works every time (at least for me) is simple: > example.jpg?nocache=\ > style.css?nocache=\ > javascript.js?nocache=\ May not be the best (or efficient), but sure works good for me:) ---
**Author:** ![cifra](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/cifra/32/2179_2.png) [@cifra](https://forum.pinegrow.com/u/cifra)\ **Post date:** [August 3, 2019, 3:20pm UTC](https://forum.pinegrow.com/t/cache-busting-anyone-have-any-tricks/2400/19 "2019-08-03T15:20:01Z")
Yes, that’s what I was going to suggest. I recommend using Webpack, when it comes to bundling your CSS+JS for production with which is easy to work. But there are other options like Gulp with tons of examples on GitHub and the Internet in general. For instance, in my webpack.config.js, I have all files to output something like this: `filename: '[name]-[hash:7].bundle.js'` So, all CSS, JS, images, etc. have their name and then the first seven characters of their hash. Like styles-34F8EE.css Since Webpack takes care of injecting the dependencies in your HTML’s you can forget about it. For a more mundane and easier approach, something like what @oleteacher mentioned `example.jpg?nocache=` is effortless and works. I remember using Gulp with a couple of lines of code to process all my files (every time I roll out an update) like this interpolation: `photo.png?v=${new Date().getTime()}` which right now computes to `photo.png?v=1564845376610` (the number of milliseconds since the 1st of Jan 1970, so it’s always unique) ---
**Author:** ![Riccarcharias](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/riccarcharias/32/4051_2.png) [@Riccarcharias](https://forum.pinegrow.com/u/Riccarcharias)\ **Post date:** [January 3, 2021, 2:40pm UTC](https://forum.pinegrow.com/t/cache-busting-anyone-have-any-tricks/2400/20 "2021-01-03T14:40:12Z")
I think Pinegrow should put a current Timestamp at the end of the css file name when you save changes. This would be the easiest way. I could be an optional behavior which can be activated in the settings. [Next page](https://forum.pinegrow.com/t/cache-busting-anyone-have-any-tricks/2400.md?page=2)