Issues browser cache end user device - origin / cloudflare

General
1

Hello,

so I have this issues for a long time and have problems to understand it correctly to fix it. Sometimes doing minor changes in WP css files or updating layout related plugins, the site has a broken layout if the user device had the website open already for several days. Only fix is then to delete the browser cache in the user browser but of course customers do not do this if they are not aware of it.
I see that the site gets reloaded on opening the tab but some stylesheet not having querys or version changes do get served from cache I assume. The issue appears mostly on mobile devices. I do have separate cache for mobile active in WP optimize

I do purge on the server side and CF if changes happened but still run into this issues. Reading the docs I understand why:

Note

If you modify cached assets, the new asset is not displayed to repeat visitors before the Browser Cache TTL duration. Purging Cloudflare’s cache does not affect assets cached in a visitor’s browser.

On the origin server I have following strings in the header. See below.
In Cloudflare due to changes I set the Browser Cache TTL to 1 hour right now. Since I did not set to respect the origins headers CF should handle this.

I did not run into this issues when I had LiteSpeed Cache minify enabled. My assumption is because LC renames every asset and servs a new file name every time.

How to force the end user browser to get new css/js every time (especially that have not query string version) without changing the expire headers every time?

Should I completely remove the origin expire headers and just control it over Cloudflare?

<IfModule mod_expires.c>
	ExpiresActive On
	ExpiresDefault A2592000
	<FilesMatch "\.(txt|xml|js)$">
		Header set Cache-Control “max-age=2592000, public”
	</FilesMatch>
	<FilesMatch "\.(css)$">
		Header set Cache-Control “max-age=86400, public”
	</FilesMatch>
	<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac)$">
		Header set Cache-Control “max-age=31536000, public”
	</FilesMatch>
	<FilesMatch "\.(jpg|jpeg|png|gif|swf|webp)$">
		Header set Cache-Control “max-age=31536000, public”
	</FilesMatch>
</IfModule>
<IfModule mod_headers.c>
	Header unset ETag
	Header set Connection keep-alive
</IfModule>
FileETag None
2

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.