How do I force a refresh when users view my updated web pages?

Report · Aug 26, 2025

As I am updating the pages on my websites, I am wondering how to ensure that readers are always getting the latest versions of each page. I don't want to force cache clearance all the time, only when the page has been updated. Is this what they call "cache busting"? How do I implement it?

Report · Aug 26, 2025

Are you using a CMS or what are you using to cache your site today? Could you share an example page? If you are using a CMS like Wordpress there may be plugin options, if not depending on what you using to cache will help to determine a viable solution.

In Response To Ben M · Aug 26, 2025

Thanks Ben. I'm not using any sort of CMS, just HTML, CSS and JS, although I have minimal understanding of the last (I just copy samples \ suggestions). You can see one of the sites at GaleodanSuites.com . Very basic stuff, and I'm not sure I am using anything to cache (if that means putting something in the head section). Will start looking at CMS options so that family can take over when I'm too gaga. Meanwhile it excercises my faculties and serves the purpose. I see other suggestions coming and will respond further when I have had a chance to study them.

Report · Aug 26, 2025

In my browser, "hard refresh" is achieved with Ctrl + F5 or Ctrl + Shift + R.

How often do you update content on your website? I ask because you can set an appropriate content expiry date in the <head> tag.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Expires

Also see Cache-Control

https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Cache-Control

Nancy O'Shea— Product User, Community Expert & Moderator

In Response To Nancy OShea · Aug 26, 2025

Hi Nancy. I update pretty randomly. Some pages might get to be months old, while I might update others more than once a day. I just uploaded a major revision that affects all pages, and I notice that it won't work without reloading practically the whole site.

Thank you for the links - I will definitely study them - I can see already that cache behaviour, in general, is something that I need to look at.

In Response To Nancy OShea · Aug 27, 2025

Looks like there are a lot of options. But none of the articles I have looked up actually show me what one of these controls LOOKS like - I suppose anyone reading that stuff should already know, but I don't. Ben sent me the example:

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">

I'm deducing that this is an example of a "Cache-Control header" which has 3 directives. If that's so, I know how to try the other options, like "Expire".

Report · Aug 26, 2025

Hi @SeanKK ,

You're spot on, what you're referring to is indeed called cache busting, and it's a common strategy to ensure users see the most up-to-date version of your web pages without forcing a full cache clear every time.

My favourite method is to append a version or timestamp to the modified asset's URL as in

<link rel="stylesheet" href="styles.css?v=2.1">
<script src="script.js?v=20250827"></script>

Each time you update the file, change the version number. Browsers treat it as a new file and fetch it fresh.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

In Response To BenPleysier · Aug 26, 2025

Hi Ben. I'll look at this and try to understand it. It looks like I have to manually insert a time stamp whenever I update a page. I hoped there was a way to get the reader to compare the saved-date of the file, with the one they have in cache, but maybe that information just isn't registered.

In Response To BenPleysier · Aug 27, 2025

Let me see if I understand this... and please correct me when I go off the rails..

In my case, all webpages use a common css file: global.css. So every page has the link:

All I have to do is change this link to:

I don't need to do anything to the css file. (there isn't really a version, as such)

The only thing that matters is that I have changed the string: "v=####" to something different. So if the webpage in the visitor's cache has a different link, say "....v=20250705", then it knows it's a new file and reloads it.

Can I use this technique on just about any link in my <head> section. Whether to a css, js, or whatever?

Does "...v=####" have any function other than making the link just "look" different. Could it be "...u=rodney", for example.

I would go with a date stamp. If it's this simple, I'm loving it. But I imagine there are a bunch of caveats - There usually are.

In Response To SeanKK · Aug 27, 2025

Trying this and it's not working - Obviously not as easy as I hoped.

In Response To SeanKK · Aug 27, 2025

Try adding HTTP-equivalent headers via meta tags in the <head> section.

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

This encourages browsers to revalidate the page on each visit. Caveat: Doesn’t affect linked assets like CSS/JS unless those are also versioned as previously shown..

<link rel="stylesheet" href="style.v2.css">
<script src="main.v2.js"></script>

Use DW’s powerful Find & Replace to update version strings across multiple files.

Example: Replace style.css?v=1.1 with style.css?v=1.2 across all .html files.
How: Edit > Find and Replace > Entire Site with regex or string match.

If this does not work, you may be using a Service Worker to cache the douments and associated files. In that case you will need to version the Service Worker.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

In Response To BenPleysier · Aug 27, 2025

OK - I was completely misunderstanding this. I thought the changed reference would force a refresh of the html page. But the procedure was only for forcing an update of the linked file - .css or .js, which you could do by actually renaming the linked file and providing the requisite link href. Is that right? My pages are revised a lot more often than the css or js files, but that's still good to know. No problem here doing a global search and replace.

So time to look at the meta tags. I might use the 100% reloading option for a few days while I figure out finer control. Nancy sent a couple of links, so I guess I should look at them again. I need an AI chatbot that translates that stuff into English.

In Response To BenPleysier · Aug 29, 2025

Hi Ben, I have been trying to get this cache-control to work, but the results are inconsistent. I have...

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">

When I run W3C validation on the page it says: "Bad value “Cache-Control” for attribute “http-equiv” on element “meta”.", Is that a real error? Really hard to find an example online.

In Response To SeanKK · Aug 29, 2025

This is a classic case of HTML spec vs browser behaviour.

Why W3C flags it

The W3C validator is strict about what values are allowed for http-equiv. According to the HTML spec, Cache-Control is not a valid value for <meta http-equiv>, even though browsers may still interpret it. Valid values include things like content-type, refresh, expires, and pragma.

Why it’s confusing

Browsers often do honor Cache-Control in meta tags, especially older ones.
But proxies and CDNs don’t, and modern specs discourage using meta tags for cache control.
That’s why you won’t find many clean examples online—it’s a deprecated workaround.

What to do instead If you want consistent cache behavior and W3C compliance:

Use server-side headers: Configure Cache-Control via .htaccess, Nginx config, or hosting control panel.
Version assets: As shown by appending ?v=20250830 to CSS/JS links is a clean, reliable method.
Meta fallback: If server config isn’t an option, use:

Addendum:

I've tried to supply a simple cache-busting solution using version strings, which works well for linked assets like CSS and JS.

Server-side headers (like those set via .htaccess) offer more precise control but can be a bit more technical to implement. Feel free to share a link to your site or hosting setup, this could help us understand your predicament better.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

In Response To SeanKK · Aug 29, 2025

Cache is typically controlled at the server level. At least, that's how I do it. You may have access to CPanel or something similar, from which you can set your server's cache-controls. If unsure, ask your hosting provider for details.

As an example, my site's .htaccess file contains these directives listed by file type. The default value for undefined files is 2 days.

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType application/vnd.ms-fontobject "access 1 year"
ExpiresByType application/x-font-ttf "access 1 year"
ExpiresByType application/x-font-opentype "access 1 year"
ExpiresByType application/x-font-woff "access  1 year"
ExpiresByType image/svg+xml "access 1 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 year"
ExpiresByType text/x-javascript "access 1 year"
ExpiresByType text/javascript "access 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES CACHING ##

Hope this helps more than it confuses you.

Nancy O'Shea— Product User, Community Expert & Moderator

In Response To Nancy OShea · Aug 30, 2025

Thanks - It does make sense. But the notion of setting expiry lifetimes (or or dates) doesn't quite address my issue. I sense I am have simplistic and unreasonable expectations.

What I have been looking for, is some way to alert the client browser that it is looking at a page it does not already have in cache, and so should refresh. I assume there is a reason such an approach is unworkable - Too easy? 🙂 It would be convenient if the identifier was the file saved-date, but maybe that would not be reliable. Failing that, a version number in the header of the HTML file, but that doesn't seem to be an option either, although it should work for linked files (per Ben's .css and .js examples). Enough of daydreaming - Back to what's feasible.

My objectiove is to try and ensure that readers are not seeing old, and thus possibly disfunctional pages. Especially after major revisions which could result in broken links if not refreshed. It looks like my only recourse, after a major revision, is to set a "zero" life for the file to force a refresh in every browser that reads it. I'm thinking that the bother of reloading would be less than the bother of of seeing broken links or stale content. But it would still be a bother, so eventually I would extend the "life" of the files, when the risk of bad user experiences had diminished. That's a real judgement call, and I don't know if you have any suggestions for that.

In Response To SeanKK · Aug 30, 2025

If you've got reliable web hosting, chances are that your server already has cache-control even if you didn't create it. It's certainly worth investigating.

In the meantime, try adding this no-frills button to your pages. This was born out of need to refresh a shopping cart tally after additional items were added. At the time, it was the most reliable way to do it on the client-side.

<!doctype html>
<html lang="en">
<head>
<title>Bootstrap 5.1.3 and Page Refresh Button</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--minified Bootstrap CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!--Bootstrap Icons-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css">
</head>

<body>
<button class="btn btn-warning btn-sm" style="vertical-align:top !important"  onClick="window.location.reload(true)" title="load latest content"><i class="bi bi-arrow-clockwise" style="font-size:2rem" ></i> Page Refresh</button>
</body>
</html>

Bootstrap used here for expedience. It's not vital for functionality, just appearance. Tested & works in all browsers.

Nancy O'Shea— Product User, Community Expert & Moderator

In Response To SeanKK · Aug 30, 2025

Have a look at this website which belomgs to my son.

The “Install App” button appears in the top navigation bar on desktop devices, or at the bottom of the screen on handhelds.

Once the app is installed, this button disappears automatically.

When I publish new or updated content, an amber-colored “Update Available” button briefly appears. This is triggered by a Service Worker that detects version changes. Because the update is performed automatically in the client’s browser, the button disappears within seconds—no user action required.

This behavior is powered by a Service Worker and Cache Storage, both supported by modern browsers. I use a versioning strategy: whenever the site is updated, the version number changes, prompting the browser to refresh cached files accordingly.

While I have explained this using meta tags, the Service Worker approach offers far more control and reliability. If you're curious, take a look at the site’s Manifest and Service Worker files—they reveal the underlying complexity. Fortunately, Wappler makes implementing this kind of progressive web app functionality remarkably straightforward.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

In Response To BenPleysier · Aug 30, 2025

Apologies, in the above I neglected to explain how to get the Developer Panel. This is done by right-clicking on the page which will show this conext menu. Select "Inspect" and the panel will show.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!