Boost WordPress Performance with Azure CDN and W3TC (1 of 2)

In this post I’ll show you how to get awesome load times for your website, while simultaneously decreasing your web server load. How you ask? By using Azure as a content delivery network! It takes 20 minutes to setup, and largely runs itself after that. Plus, if you have a small site it probably won’t cost you anything.

This is post 1 in a two part series in setting up the CDN. In this post we’ll cover setting up WordPress to automatically upload your static resources to Azure and serve them from Azure storage. The next post will focus on actually using Azure’s CDN feature. The good news? You might only need the first post to get wicked speed increases on your site – the second post is optional, but very easy.

Why use a CDN for your site?

Of the top 10 million sites on the internet, WordPress powers 26.1%^src of them as of the time of writing. But many of those sites are being run on cheap, economy hosting platforms. These platforms can serve pages pretty quickly, but actually tend to be quite bandwidth constrained despite them promising large amounts of available bandwidth. Even if you aren’t on a particularly bandwidth constrained host placing additional load on the server that is responsible for rendering your website by making it also serve things like images makes no sense. Fortunately, there’s an easy solution: Azure! Azure has boatloads of bandwidth, is very cheap, and is very, very enterprise grade. It’s also VERY easy to set up.

How much will it cost? That depends on the size of your site, and how much traffic on your site. This blog post weighs in at about 917kB (which I currently consider somewhat bloated) including all of the images. Taking my monthly traffic into consideration I am actually below the free bandwidth cap for Azure data transfer ^[rates] and so it costs me nothing for the data transfer, and only about $0.10/month for storing the static contents. If I was above the free cap it would cost about $0.0000798 per page view (and after that the browser would cache much of that).

Pretty darn cheap. Lets get started!

Step 1: Setup Azure

I will assume you already have an Azure account. If you don’t, what are you waiting for? Right now Azure is giving away $200 in credit to new accounts, with a bunch available to students, or $150/month available for free to MSDN subscribers. Click here to get started with Azure if you don’t already have an account.

First off, login to portal.azure.com, and click the “New” button to create a new service. On the next pane search for “Storage Account”. Select the storage account in the results. In the next pane leave the deployment model as “Resource Manager” and click the “Create” button.

In the Create Storage Account pane configure the following settings:

1. Name: Choose the name for your storage account. This name will become the URL for your storage account – so make it something related to your site.
2. Type: aka the pricing model you want to use. I chose Locally Redundant Storage (LRS) because it’s simple and cost effective.
3. Diagnostics: If enabled this will provide you with usage information. Don’t worry – you can turn this on or off later.
4. Subscription: If you have more than one subscription select which you would like to use.
5. Resource Group: I recommend creating a resource group for your storage account. Resource groups are purely organizational for you — they don’t affect the service at all.
6. Location: Choose a location that is geographically close to you or your users.

Once the settings are the way you like them, click create and wait for the account to be setup (it takes less than a minute usually).

Create a Storage Account Container

Next you’ll create the container in your storage account. The container is essentially the root folder for the files you are storing in the account. On the settings page for your newly created storage account select “Blobs” under Services.

On the next pane Click the + sign along the top to create a container. Give it any name you want, and choose “Blob” for the access type. This will allow anyone to download files from the container, but will not allow directory listings.

Once the container is created, go up a couple panes to the storage account settings. Click the Key icon in the top right, and take note of the first access key – we’ll come back to this in a minute while we setup WordPress. Onwards!

Configure W3 Total Cache for CDN Usage

We’ll be using the W3 Total Cache plugin for WordPress to integrate the site with your CDN. To install it go to your WordPress Dashboard and select Plugins->Add New in the menu on the left. Do a search for W3 Total Cache – it should be the top result (the one with 1+ million active installs!) Click the button to install it, and activate it once it’s installed.

Once the plugin is installed go you’ll notice a new “Performance” menu along the left. Go to Performance->General Settings and scroll down until you find the CDN option. Select “Microsoft Azure Storage” for the type, and check the box to enable it. Save all settings.

Once you’ve saved the settings go to Performance->CDN in the left menu. Check all the “Host x” buttons and scroll down to the “Configuration” section, where you’ll enter the following settings:

1. Account name: The name you gave your storage account when you first created it – mine was `mywpcdn`.
2. Account key: The access key you copied earlier under the “Create a Storage Account Container” step.
3. Container: The name of the blob container you created earlier – mine was `wpsite`.
4. SSL support: Enable this if your website uses SSL – it will stop your users from receiving warnings about mixed content.
5. Replace sites hostname with: Leave this as is for now. We’ll come back to this in the second post in the series.

Once you’re happy with the settings click “Test Microsoft Azure Storage upload”. The test should pass just fine. If not, go back and make sure that you entered the right values above. In particular make sure you didn’t mix up the account name and container name.

Once the tests pass click “Save all settings”.

Initial Upload to CDN

Once you have configured W3 Total Cache you can do the initial upload of your sites’ static files to Azure Storage. At the top of the CDN configuration page in WordPress (Performance->CDN) click “Upload attachments”. A pop-up window will open. Click “Start” and wait for all the files to be transferred. This can take a little while if you have many attachments. Do this same thing for all of the buttons (attachments, includes files, theme files, and custom files) – although do them one at a time.

When all of the uploads have completed it’s time to go to your site and check that everything is working properly! Note that if you see the below warning about preview mode you will first have to click either “Preview” or “Deploy” to see your settings live on your site. Note that if you are using Preview mode you will need to manually Deploy changes after making any changes to W3 Total Cache settings. Keep that in mind if you have to change anything else.

Common Problems (Check everything works)

Visit the public facing portion of your site, and pull up a development tool such as the inspect built into your browser, or Firebug if you’re on Firefox. Go to the network panel and make sure that there are no errors loading content from your cdn. Also check that things such as images, css, and javascript files are loading from your CDN and not your webserver. If anything is returning a 404 error this first thing to do is wait a couple minutes and try again – it can take a minute or two for something to be available. If it’s been over 5 minutes  and its still not there, ensure the file was uploaded in the first place.

Theme Files Not Loading

Sometimes W3 Total Cache does not know which theme files should be uploaded to your CDN. This is especially problematic if you are using a child theme. The simple solution is to tell it which theme files you need to upload. On the CDN Configuration page (Performance->CDN) scroll to “Custom file list” under Advanced and enter in the path to the missing theme on a new line in the list. This will probably look something like {wp_content_dir}/themes/*. Save all settings and go back to the top of the CDN Configuration page. Click the “Upload custom files” button, and press state in the pop up. Wait for the upload to complete and verify that things are now loading correctly.

Font Files Not Loading

Currently, W3 Total Cache has a problem where it doesn’t properly tell Azure how to server font files — although this problem may only manifest itself in certain browsers (e.g. Firefox). I’m hoping to submit a PR to the plugin to fix this problem, but in the meantime you can work around the problem by just telling W3 Total Cache not to serve them from the CDN. Go to the CDN Configuration page (Performance->CDN) and scroll to the “Rejected files” list (under Advanced). Enter the path to the font files (using one of the tags such as {wp_content_dir} and save your settings. Go back to your site and check that fonts are now loading properly from your webserver.

Everything Works!

You now have your website loading off of a CDN – good work! How very 21st century of you 😉

Stay tuned for the next post in this series, where I’ll show you how to use Azure’s full-blown Edge Network CDN for even faster loading speeds, especially for users not nearby the geographical location you used to host your storage account.

If this tutorial was helpful, please consider following @michaelblouin on Twitter to show your support! If you had any troubles setting things up let me know in a comment.