CloudFlare Cache Everything - Litespeed LSCache Wordpress

[WRITDev2021]

Hey everyone!
I am after ideas and tips to help solve the following issue.

I am using Litespeed LSCache plugin - not with quic.cloud - on Litespeed server and also a Cloudflare pro plan.
I am compressing and combining files on the WP site with the LSCache plugin and also have LSCache enabled (or disabled in order to troubleshoot).

On the Cloudflare side I have enabled the following:
Argo Smart Routing
Caching Level: Standard
Browser Cache TTL: Recently changed it to: Respect Existing Headers
Argo Tiered Cache: Recently re-enabled
Page Rules: Cache Level: Cache Everything for the front-end pages - But recently disabled that rule.

Speed Optimisation settings
Image Resizing: Off
Polish: Lossless + WebP
Auto Minify: Everything is off.
Brotli: On
Automatic Platform Optimization for WordPress: On + Cache By Device Type
Enhanced HTTP/2 Prioritization: On
Mirage: On
Rocket Loader: Off

Now the issue that I am facing is that from time to time, on certain pages, their assets files remain cached on Cloudflare, therefore the visitors browsers load those files, while that have expired and are non existent on my website/server anymore - returning a 404 error.

It seems that somehow the Litespeed Cache has purge them and generated new ones with a new URL, but Cloudflare still serves the old ones.
This is only a problem with combined, minified JS files so far, and not with any CSS files. This causes problems in using the front of the pages, since functionality is broken.

I have tried various different configurations but despite all my efforts, I am still experiencing similar issues. I have to go and Purge Cloudflare’s cache, in order to get a fresh copy of the pages’ content and links to their assets.

Since the problem occurs in some pages and only after some days and I need to keep searching the pages in order to spot if this has occurred, it makes it hard to tell what effects can specific configurations have - so overall it’s hard to re-produce, to debug and diagnose and reach to a solution.

Another thing to note is that the issue may not be occurring with all the browsers and maybe not all the users will encounter it (speaking for the same pages at the same time). So, I might be getting the issue with Chrome but not with Firefox and/or a customer might be getting the issue, while I am not.

I recently disabled the Cache Everything on CF and have purged all caches - but still getting pages with the issue.

So, I was hoping if I could get any helpful tips or other ideas, or suggestions for a proper configuration for the two technologies. I could even be confused and thinking or trying the wrong things - so I would appreciate any suggestion that would take me into the right direction.

I will post the same question at Litespeed forums, to see what I can get from there as well.

[WRITDev2021]

Additional Info

An example of an expired JS file that ends ups to a 404 error.
Now this occurs on Firefox and Opera, but Chrome is loading correctly.
wp-content/litespeed/js/61f7dc494f2fdc5dd17dd7f4e97e8265.js?ver=4627f

And these are the headers of the file:
cache-control private, no-cache, no-store, must-revalidate, max-age=0,no-transform
cf-cache-status BYPASS
cf-ray 6e19a373a9726f32-ATH
content-length 1238
content-type text/html
date Tue, 22 Feb 2022 16:37:21 GMT
expect-ct max-age=604800
nel {“success_fraction”:0,“report_to”:“cf-nel”,“max_age”:604800}
pragma no-cache
server Cloudflare
strict-transport-security max-age=31536000
vary User-Agent, Accept-Encoding
x-content-type-options nosniff
X-Firefox-Spdy h2
x-turbo-charged-by LiteSpeed
x-xss-protection 1; mode=block

At the same time in Chrome, I am loading the correct combined js file
/wp-content/litespeed/js/78945092b38ddd396dd11264f2ad6e93.js?ver=4627f

[fritex]

So, you are trying to combine 3 different “caching systems” to work perfectly, as far as I understand?

1. Litespeed cache at the origin host/server
2. LSCache plugin for WordPress (which should work fine for 1. point)
3. Cloudflare APO above all of them
4. Cloudflare Page Rule with Cache Everything
5. You use features like Auto-Minify at Cloudflare on your Origin host via plugin

May I ask, how do you expect it to work all together and purge/flush the cache each time “when you want? or automatically?” on all 3 different platforms?

That’s even challenging for an advanced and experience user to manage.

Nevertheless, issues like other visitors, like non-logged-in users would end-up having and seeing the “admin top bar” from the served and cached version of the “logged-in” admin user when visting your homepage or some other webpage → not good.

Therefore, APO might use BYPASS or you set it to, then Page Rule Caches Everything, then LSCache has got some “html” cached version and serves this …

You use the same “duplicate” features on your Origin host via plugin → which instead you can levarage the work needed to be done at your origin by the Auto-Minify at Cloudflare for example.

And Cloudflare caches by default “js, css, images …” → with Cache Everything, it caches even the “.html” pages as well.

Unfortunately, you would just create more trouble for you and your visitors.

I’d suggest you to stick and use one of them at first, then try to tune-up a bit.

I am sorry to say, but there are topics here where users tried to combine different things, which caused and resulted having issues.

My suggestion is to remove LSCache plugin and use only Cloudflare with APO, and without Cache Everything Page Rule (otherwise I’d suggest you to upgrade to a Business plan to enable the Bypass Cache on cookie option, so you wouldn’t have the issues like I described to show the cached logged-in admin-bar html webpage to normal user/visitor).

[WRITDev2021]

Well it’s actually a bit simpler than that. There is no 3 (or 4) different caching systems - The server is indeed litespeed, but litespeed cache will work only if LSCache is enabled by the WP plugin.
The APO is enabled, because it’s the only way for Cloudflare to display different versions for different devices - But I don’t use auto-minify and such.

I have tried disabling LSCache - and also tried disabling Cache Everything and tried different combinations between these two.
And that’s what is strange - Why Cloudflare with html cache off, still returns pages with expired html.

I don’t want to use the Auto-Minify at Cloudflare - With the LSCache plugin over the site, I can achieve certain results with which files will be included, on what pages, when to load them etc - So Cloudflare’s auto-minify can not be considered a replacement.

So, summarising everything, all I have and want is to be able to use Cloudflare as a CDN, to cache across its network and deliver the pages of an already optimised website - The only thing is that from time to time js files linked to the pages are regenerated and the old ones expire. So, what could be the solution to have CF refresh its cached content, when old asset files have expired?