How To Rewrite Your WordPress URLs To Point To A CDN

Subscribing to a CDN is just half the battle. The next challenge is finding a way to rewrite the URLs of all your static assets to the new CDN URL. In this article, I’ll share the best plugin I’ve found for the job, and why other solutions don’t work.

Note that you don’t need to do this with Cloudflare. This is because in addition to being a CDN, Cloudflare is also a reverse proxy. So it intercepts all requests to your website and processes them through its servers – not just those for static content like images, JS, and CSS.

However, I recently found that Cloudflare’s cache hit rate was a bit too low for my liking. I found that even with page rules specifying long expire times, Cloudflare was requesting new content from my server when it shouldn’t have. In other words, my cache was being dropped for reasons unknown. Possibly because on the free tier, Cloudflare has far lower retention times for files than on higher tiers. In any case, Cloudflare doesn’t provide detailed traffic logs of cached or missed hits, so it’s up to us to do the analysis.

Wrong Approach: Redirecting URLs via .htaccess

Probably the easiest way to “rewrite” your URLs is to simply redirect them to the CDN pull zone via .htaccess. This should just take a couple of lines since all our assets are likely located in two folders – wp-content and wp-includes.

While this is easy to implement, it’s pretty inefficient since it involves an additional round trip for the client’s user agent. First to the origin server, then to the actual CDN. And the whole purpose of a CDN is to reduce latency. So using a redirect via .htacces or (worse) via a PHP script is a waste of resources.

Autoptimize is Insufficient

One of the most useful plugins for optimizing WordPress is Autoptimize. It’s hard for me to overstate its simplicity and power. In just one settings screen, it can combine and minify your CSS, Javascript, inline your CSS, and also make use a CDN to rewrite the newly generated CSS and JS files.

You can specify the CDN to use as shown here:

Unfortunately, this CND setting will not be used for other static assets like fonts and images. So while Autoptimize is a great tool, it’s not sufficient for everything. We still need to pair it with a dedicated plugin like Async Javascript and a separate CDN plugin.

Jetpack Site Accelerator – Nice, but Incomplete

I’ve also written about the benefits of the Jetpack Site Accelerator. It’s a CDN for your images and the CSS/JS files used by WordPress and WooCommerce. Very useful indeed! But it won’t cache non-WordPress assets. Meaning no files generated by Autoptimize, and the CSS/JS from other plugins. Until we have that functionality, I can’t recommend it.

Using CDN Enabler

Finally, I settled on the CDN Enabler plugin. This is developed by KeyCDN – one of the most popular and reliable CDN providers for everyday users. Once you download and install the plugin, enter your CDN URL as shown here:

After that, enable the following checkbox for HTTPS connections:

In my opinion, the above option should be enabled by default – especially in today’s world. But right now, that’s what it is. This nifty plugin will replace all your static URLs in the specified folders. All CSS, Javascript, fonts, and images. It’s the only plugin I’ve found so far that’s an “all-in-one” solution like this.

If you’re a KeyCDN customer, you can also enter your API key and zone for manual purge requests from WordPress itself. But it’s not necessary. It works just fine with any CDN URL.

In my opinion, this is the most efficient way to rewrite all viable URLs with the respective CDN. If you have a better solution, let me know what you think!