Cloudflare Cache Purged but Old Site Continues to Show

[awisnicki]

I have a site that’s been hosted on GitHub Pages for a while. I just added Cloudflare, then significantly updated the site, pushed up my changes, waited a bit for them to register with GitHub, then went into Cloudflare and purged everything. The site is: https://onemorevoice.org/

In Firefox, everything is OK when I visit the site. However, when I visit the site in either Safari or Chrome, I’m getting weird version of the site that seems to be based on how the site looked before I updated it. See attached. I did a hard refresh of the page in Chrome and that seemed to fix the issue, but I haven’t done that hard refresh in Safari for testing purposes and now when I visit the site, it’s still showing the messed up version, no matter how many times I put in the URL.

I can of course do a hard refresh on Safari too, but there’s no guarantee that my visitors will do that. How can I guarantee that my visitors get the new version of the site, even if they visited it before and have the cache version in their Chrome or Safari browser?

Also, here’s what it should look like:

[sdayman]

My first visit from Safari looked like this:

According to the page headers, Cloudflare is not caching the page (no surprise), but I do see an x-proxy-cache (not cloudflare) say Miss, and there’s a Varnish header as well.

But that wouldn’t explain different behavior from different browsers.

Maybe if you opened Web Inspector (Opt-Cmd-I capital i), you might see some errors in Console or Network.

[awisnicki]

Thanks for responding and looking into this. I opened webinspector and don’t see any issues. However, I now think I understand the issue (though not how to fix it).

1. I visited this site in the page and Safari has cached an old version.
2. I have cache busting set up on my CSS file, so each time someone visits the page, it reloads the CSS file.
3. So when I visit the page now, it loads the cached page (not the new one as it should), but it reloads the CSS (which corresponds to the new page not the cached one).
4. So, in short, it’s showing the old page, but the new css, so the issue is that it’s showing the old page.

Also, the issue is for a return visitor. It looks like for someone like you, who visits the page for the first time, you’re getting the current/new version so the old version being cached is not an issue for you…for now.

Any ideas on how to fix this. Essentially, it looks like I need somehow to compel Safari or Chrome to grab the new page from Cloudflare no matter what.

[sdayman]

The homepage HTML is on a 10 minute cache, set by your server.

If you want to force browsers to get the latest version, you’ll need to change that cache setting at the server. I don’t know of a way to get Cloudflare to override your server’s cache setting without messing up good caching of Images, CSS, and JS.

[awisnicki]

I see. thank you for following up again. Well, let me ask: " I don’t know of a way to get Cloudflare to override your server’s cache setting without messing up good caching of Images, CSS, and JS."

Since my site is in fairly heavy dev at present, this isn’t really an issue. Could you explain how I use Cloudlfare to override my serve’s caching, even if it means messing up the good caching?

[sdayman]

Experiment with Page Rules. You can set a Match for *example.com/* (everything) and try some settings, like Browser Cache TTL. On Free Plans, since there are only three rules, that doesn’t leave much room for more precise matching, but you can have earlier rules to match *example.com/*.jpg to custom-set browser cache TTL. Then another for *.js or *.css, but then you’d run out of rules.

It would be better to find a way at the origin to have fine-grained control over cache for different filetypes, but I don’t know if GitHub Pages has this functionality.