Optimizing your WordPress blog on Azure with a CDN and caching

Although I’m pretty happy with the performance of my Azure-powered WordPress blog, I was looking for ways to make it even better. I’m using ClearDB again now that they have the Titan plan, which offers a bit more headroom in terms of storage and performance for an affordable price. Recently I have made two additional improvements which I’m very happy with.

Caching

The obvious choice if you want to make your website faster is to use caching. After some recommendations from friends I’m using the WP Super Cache plugin. It has a nice and clear interface and provides me with all the options I want - I basically checked all recommended options. Additionally, I enabled preloading all my pages on a schedule.

By default, your pages are not cached if you are logged in with a user so be sure to test caching behaviour in an InPrivate/Incognito window. I can definitely see the difference and I highly recommend WP Super Cache. It also comes with a bonus: you can also use it to configure a Content Delivery Network (CDN).

Content Delivery Network

Content delivery networks have been around for already a long time. But they weren’t typically affordable for the average individual with a website. If you have an Azure subscription, you can enable Azure CDN now.

Azure CDN

When creating your CDN you have to specify a name, a location (West Europe for me), a resource group and a pricing tier. I went for the Premium tier, and I’m glad I did - more on that further in this post.

After your CDN has been created, you should add an endpoint to it. In my case I created an endpoint for my blog hostname thomasvochten.com on default ports 80 and 443. Because I like things to be branded all the way down, I registered a custom domain too so that all my site assets would be available through a nicely named url: cdn.thomasvochten.com. You can add a custom domain to your CDN through the management pages in the Azure portal too. Just provide them a hostname and they will tell you to which hostname you should point your DNS alias to. I quickly went to my DNS hoster DNSimple (affiliate link) to create the hostname.

Adding a custom domain in Azure CDN

Then the waiting starts. Azure will copy all your site assets to the CDN. Be patient because this can take a few hours, almost 24 hours in my case. After that’s done you can access your website from your CDN URL or the custom domain you specified. Have a look at http://cdn.thomasvochten.com to see how that looks for me.

You will see your website, but all the assets are served up through servers that are in close proximity to where you are in the world. My WordPress blog runs from the Dublin datacenter, but if you’re in the US for example you’ll get my content from servers over there now. Very neat!

The next step is to tell my WordPress site that I want to use a CDN. That can be done through the WP Super Cache plugin too. Just provide the necessary details and you’re good to go:

Enable CDN support in WordPress Super Cache Plugin

When you visit your website now you will notice that every image (and some other files) are being served by the CDN:

Images in WordPress served through the CDN

Fun with CORS and the Rules Engine

One of the first things I noticed after I enabled all this is that some of my icons on my website did not render anymore. A quick look in the Chrome developer tools revealed that they were actually webfonts. Modern browsers are becoming smarter and smarter and also very particular about security. Cross-origin resource sharing (CORS) is one of those features: “ CORS is a mechanism that allows restricted resources (e.g. fonts) on a web page to be requested from another domain outside the domain from which the resource originated” (from Wikipedia).

This was the typical error that I got:

Font from origin http://cdn.thomasvochten.com has been blocked from loading by Cross-Origin Resource Sharing policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin http://thomasvochten.com is therefore not allowed access.

And this is how that looks on my site:

CORS Problems through the CDN

If you are serving up content through your own website you can easily make some web.config modifications or similar configuration changes to make this work. But if you use the Azure CDN you can’t just do that of course. But if you use the Premium tier there is a powerful tool to your disposal: the Rules Engine.

You can launch the Rules Engine by pressing the Manage button in your CDN overview page:

CDN Rules engine

The management pages offer all kinds of interesting reports and stats on how your CDN is doing. The Rules Engine can be opened through the top menu bar.

To enable CORS you have to create a new rule and mine looks like this:

CDN Rules engine

This tells Azure CDN to append the Access-Control-Allow-Origin header to every request that comes from my domain thomasvochten.com so that the browser knows it’s safe and allowed to display the necessary resources.

When you create or edit a rule, it will take some time for it to become active so be patient again. If all goes well, you’ll get the right response now. You can double-check using the developer tools of your browser:

CORS is working now

The icons are rendering just fine now:

All images are rendering now

Just a final warning that if you enabled caching on your site first it might interfere with your testing efforts. Because everything is cached now, you might not see all changes immediately. You can temporarily turn off caching while you’re experimenting with the rules engine.