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 , 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.
The obvious choice if you want to make your website faster is to use caching. After some recommendations from friends I’m using the 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).
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.
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 (affiliate link) to create the hostname.
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 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:
When you visit your website now you will notice that every image (and some other files) are being served by the CDN:
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. (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 ‘ has been blocked from loading by Cross-Origin Resource Sharing policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘ is therefore not allowed access.”
And this is how that looks:
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:
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:
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:
The icons are rendering just fine 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.