The main issue is that old content is being displayed on the website even after Cloudflare’s Tiered Cache has been disabled. Additionally, JavaScript functionality is not working properly, causing certain interactive elements on the site to fail.
What steps have you taken to resolve the issue?
Cleared Cloudflare cache using the Purge Everything option.
Disabled Tiered Cache on Cloudflare.
Cleared local and browser cache.
Enabled Development Mode on Cloudflare.
Checked and debugged JavaScript code using browser developer tools.
Verified and adjusted caching rules in Cloudflare settings.
Cleared cache from the origin server.
What are the steps to reproduce the issue?
Open a web browser (e.g., Chrome, Firefox, Safari).
Navigate to the website URL: https://thepriceindex.pk.
Note that the content displayed is outdated or not reflecting recent updates.
Interact with JavaScript elements on the page (e.g., forms, buttons, or dynamic content).
Observe that certain JavaScript functionalities are not working or producing errors.
Log into your Cloudflare dashboard and navigate to the Caching section.
Disable Tiered Cache and wait for the changes to propagate.
Purge the Cloudflare cache by selecting Purge Everything.
Clear your browser cache and cookies, then refresh the website.
Check the browser’s developer tools (Console tab) for JavaScript errors.
Enable Development Mode on Cloudflare and reload the website.
By taking a look at the shared URL of your Website, for your JS and CSS resources, I can see Cloudflare cache is working fine by the HTTP cache headers:
CSS files cache:
cache-control: public, max-age=31536000
cf-cache-status: HIT
JS files cache:
cache-control: public, max-age=604800
cf-cache-status: HIT
Which is a bit long time to hold the “old” JS file in Web browser for end-user.
I assume Website visitors (end users) don’t clear their cache always, therefore would experience the “old content” as you’re writing about.
However, you also have got some Web server/origin host cache as well: x-turbo-charged-by: LiteSpeed
How about the Browser and Edge Cache TTL options?
Furthermore, if it impacts the Website content visibillity and you don’t see those modifications made, I’d suggest you to check your Browser Cache TTL and Edge Cache settings at the Cloudflare dashboard → Speed.
May I ask you to check out what option have you got selected by navigating to the Cloudflare dashboard → Caching → Configuration → find section “Browser Cache TTL” and make sure the selected option from the dropdown menu is “Respect Existing Headers”.
I’d lower them if you’re frequently making those changes.
If you’re using some editor, either use some query string like ?date=08192024 to call them upon update, or ?version=12345.
However, not the best practice.
I’d suggest playing a bit and tuning the Cache Rules at Cloudflare dashboard to satisfy your results for your Website visitors.
