CDN, WebP and WP-Rocket Advice on Setup

Some advice for WP-Rocket setup with a CDN.

Stop Generating Post CSS to allow background images to be served by CDN
When you use WP-Rocket in conjunction with any asset only CDN URL (unless the CDN processes your CSS files) all background images will still load from your main server and not the CDN. This is because they are specified in the Post-XX.CSS file for each page which unless re-processed state the full url for your server not the CDN.

To fix this Stop the new POST-CSS files generating so the background images are written inline in the HTML.
Add to functions.php in your child theme.

// stop postcss generating
add_filter('avf_post_css_create_file', '__return_false', 1, 1);

WebP background images
The above function also allows plugins that generate WebP locally to serve the background images as WebP AND from the CDN. We use Ewww locally for WebP creation and serving.

Check the priority of anything you add to WP-Head
I add some critical CSS to the header manually. The priority for this insersion if you add it from functions.php should be 2. Otherwise the preconnect for your CDN will happen after manually added critical CSS. The pre-connect and prefetch added by WP-Rocket are irrelevant if they are not called before the CDN is needed. For example manually preloading fonts.

I hope this helps others using an Asset CDN.

Full page caching
Unless your CDN provider advises otherwise – If your CDN serves your cached HTML files as well then you will not need to specify a CDN URL in WP-Rocket – As it should be handled at DNS level to deliver full site caching. The above will just speed up background elements by serving the css and urls inline and helps background imagery get served via WebP.

It depends if your CDN provider dynamically re-writes the CSS files to include the CDN URL or just serves the assets from the CDN without processing. Generally speaking – Most CDNs are static files only and do not cache HTML files.

I am currently looking at Stack Path and Bunny CDN to deliver full site caching across my servers after finding KeyCDN is assets only during trials.

• This topic was modified 2 years ago by thinkjarvis.