Cache Busting... Anyone have any tricks

Your computer’s operating system timestamps every file it creates. When you upload a file to your web server and a file with the same name already exists, it’s normal for most FTP programs to automatically ask something like, “do you wish to overwrite the file xzy.css with newer file xyz.css?” That alone should be sufficient for Chrome to know that the CSS file is new.

The problem isn’t with the CSS file, the problem is with the browser. When a person visits a website they’ve already visited in the past, the browser should check the files on the server first to see if they have newer dates than whatever file are cached on the user’s device. If the dates on the server files are newer, the browser should load them no matter what. Chrome, in particular, doesn’t always do this. Even if you set the browser to delete the cache and history on closure, sometimes it still finds a way to load cached files. It’s infuriating.

The only surefire way I’ve found to clear the cache in Chrome on a particular website is to log out of Chrome, go to the website, right click and choose inspect to open the developer tools, then go to Chrome’s menu and right click the refresh button and choose, Empty Cache and Hard Reload.

I have had really good experiences with adding a variable at the end of a css file when loading it in the head of the site:

I never had problems in Chrome. But it’s really annoying to always change the date manually. It would be helpful if PG would offer a maybe optional way to do that automatically.

Or open the dev tools in Chrome and click NETWORK then activate DISABLE CACHE

I don’t want to get this worked for me, it should work for the customer and site visitors. They shall always see the latest version of the website without the need to disable their cache in chrome.

Welcome to the frustrating world of web development.

Direct your complaints to Google (for all the good it will do.) There’s nothing that the users on this forum, or the developers of Pinegrow, can do about how Google has chosen to design their software.

I presume that’s also session specific.

The only reason I use the right-click inspect > right-click refresh button > Empty cache and Hard Reload method is because it’s the simplest method to explain to my clients on the phone. Usually, I only have to explain this to them once and they remember it for future updates.

The biggest time-waster I find in web development is dealing with the clients.

Yes I’m lucky I have someone to take care of that part of web design! :wink:

I think Google designed Chrome for speed, that’s probably the reason for the caching behavior.

But I’ve made the experience that even Chrome loads the new version of the website when adding a timestamp at the end of the css like this:

<link rel="stylesheet" href="support/global_style.css?cdate=20201208180501" type="text/css">
1 Like

Thanks for that info. I will note it and try it out on a future site update.

1 Like

YAY!!

@Printninja

Yay!

:unicorn:

I tried to put a “?v=1.X” extension at the end of a css file in Pinegrow. I did that in the master page. Whats very helpful: When I edit one of my subpages PG always updates it with the current version of my master page (current style.css?v=1.X). So the visitor doesn’t need to load the updated style.css on pages a haven’t edited.

But I have the feeling that sometimes PG gets confused by the “?v=1.X” extension (screenshot). Does anyone has a better way to deal with cache busting? Maybe PG could support such extension even better?