Cloudflare's APO with WP Rocket's minified CSS

[sunnyt7]

Hey guys,

I have a website that uses WP Rocket, BunnyCDN, and Cloudflare APO.
Everything seems to be working fine except for one thing.

In WP Rocket, I have CSS minification enabled. This will convert the original CSS file paths to something like /wp-content/cache/min/…/filenameabcd1357.css. These files live on the CDN.

I’ve noticed that sometimes when visiting the site, the cached APO page is serving an outdated CSS filepath. So it’ll be trying to serve filenameabcd1357.css, which has since been dynamically changed by WP Rocket to filenameefgh2468.css.

This results in the file not being found, and no styling being loaded on the site.

Is there any way for APO to know when the CSS files have changed?

Thanks in advance!
Sunny

[user3996]

Good question. I hope this improves.

[yevgen]

Hi,

APO runs on the expectation that once the content is outdated Cloudflare for WordPress plugin will call Cache purge for the updated page. I assume WP Rocket does CSS minification with some delay, so by the time the new file starts to serve APO already cached html with outdated CSS file reference. The cleanest solution is to trigger Cache Purge once a new CSS file is produced. I assume that should be done from WP Rocket plugin.
Please comment in this thread https://github.com/wp-media/wp-rocket/issues/3180#issuecomment-732104322 as APO integration is an open ticket in WP Rocket plugin.

[yevgen]

I guess WP Rocket should detect APO similar to Cache Everything https://docs.wp-rocket.me/article/1185-use-cloudflare-cache-everything#cache-purging.