Hi, Cloudflare community,
we encountered on one of our websites a problem that just appeared with the introduction of Tiered Cache within APO. Broken design occurs randomly for different pages in different worldwide locations for normal users.
It impacts this website. The World’s lightest travel products - Discovernauts Shop United States
We could identify this issue only on sites that are based on a WordPress multisite. On single sites, we could not see this issue. This issue started after CF’s tiered cache feature was introduced. APO was working perfectly on this multisite setup before.
CF keeps stale copies of HTML even after purging both WProcket and CF caches. It results in 404 errors as cached pages still refer to old minified CSS files. It happens even when the WPRocket page cache is disabled. It happens to random pages. Example how it looks - which is caused by bringing an old minified CSS from Tiered Cache: Imgur: The magic of the Internet
This issue can be reproduced on our side by:
- Make a change to a setting/edit a page.
- Clear WProcket’s cache.
- Clear Cloudflare cache.
- If you browse all the sub-category pages of the shop site, you will see few pages with broken design because these pages still refer to a non-existent (404 error) CSS file (* WP-Rocket uses a mechanism that deletes the old Minified files and replaces them with new ones to accomplish cache-busting.)
- Sometimes I will get the correct page and GTmetrix Canada will get a broken page. Because edge cache server serving me near to my location has the correct page, while Canada server’s still having a stale copy.
- If you take the URL of a broken page and purge the cache of that URL with the Cloudflare plugin, it will clear the stale HTML copy and load the fresh page after some delay.
Thx for any help, suggestion, advice in advance.