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.Azure CDN

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.Create Storage Account

In the Create Storage Account pane configure the following settings:Configure Storage Account

  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.

Select Blobs

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.Create Container

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.

W3 Total Cache

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.

W3 Total Cache has a ton of options, and I highly recommend enabling caching on your site as well. Configuring those are out of scope of this article however.

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.

Configure CDN Settings

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.Upload files to CDN

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.
W3 Total Cache Preview Mode

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.

The Rejected Files ListEverything 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.

, , ,

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

  1. Rawal Baig July 21, 2016 at 10:57 am #

    Thanks for this great article, I was looking exactly for this information.
    Also waiting for 2nd part.

    Rawal

    • Michael Blouin July 21, 2016 at 11:04 am #

      Glad I could Rawal! Part 2 got put on the back burner for a bit, but I’ll probably finish it eventually!

      • Rawal Baig July 21, 2016 at 11:24 am #

        I’m working on to speed up load time of my site, But facing problems, from which one has been solved with the help of your article.

        Following two things are not working well for me.

        1) Leverage Browser Caching
        I follow the following article and updated .htaccess files but it was not helpful for me.
        https://varvy.com/pagespeed/leverage-browser-caching.html

        2) First Byte Time
        When I first test my site it was 2056 ms but now after using CDN It has been decreased significantly (710 ms) but still higher than recommended.

        Do you have any idea or suggestion?

        Thanks again
        Rawal

      • Rawal Baig July 21, 2016 at 11:33 am #

        OMG! I also look at it now, my effective use of CDN is only 3/100.

        My site is not loading contents, even not displaying anything.

        • Michael Blouin July 21, 2016 at 12:07 pm #

          Hi Rawal,

          If your site is having trouble please try the troubleshooting steps in the article under Common Problems. In fact when I take a look with Firebug I can see that your site is indeed utilizing browser caching for JS and images.

          Otherwise for speeding things up I would recommend turning on full page caching in W3 Total Cache. Also, configure the plugin to automatically generate page caches for your homepage and for new pages. You can also play with how the cache is stored (e.g. memory cache vs. file cache) however availability of different caching mechanisms depends on your host.

          Other than that check with your website host — it could be that the server is slow. If that’s unavoidable you can use Azure CDN to cache the entirety of your website, but it will affect the dynamic portions of your site. Writing a blog post on doing this is in my to-do list, but it will be a while.

          -Mike

          • Rawal Baig July 21, 2016 at 12:30 pm #

            I think you checked out my personal website. Here is the site I’m working on.
            https://gtmetrix.com/reports/mystylor.com/tBgGV3D9

            I’m using wordpress multi-site network and the problem is some options in W3 Total Cache plugin.

            https://wordpress.org/support/topic/how-to-remove-repeatw3tc-from-query-string?replies=36

            I turned of page cache options off and site opens fine but response time increased again.

            I already contact with my host, they said there isn’t any problem with servers and every thing is working fine. And I also don’t think so because with changes site started working fine.

            Can you please reference any guide?

            Thanks a lot
            Rawal

          • Michael Blouin July 21, 2016 at 11:01 pm #

            Hi Rawal,

            The easiest way to reduce the page load time of a site is to reduce the size of the page. Currently your largest problem is that your images are way too big. In fact, downloading the whole site requires 13.1MB (for comparison my homepage is 930kb – and I still consider this a little excessive.) Take a look at this screencap from Firefox:

            Debug slow page load

            For example you have a number of images that are >1 MB, which is a big no-no unless the image is the absolute center of the page. In your case you are loading 1903×938 images, and displaying them as 431×208. No amount of CDN use or anything else will speed this up. The first thing you need to do is downsize the images. Open up Photoshop (or any editing software – you can even do this with Preview on a Mac) and make the images the actual size they will be on your site (in Photoshop use “Save for web and devices”). Also, avoid PNG for images that aren’t simple graphics or logos. Jpegs generally compress more complex images much better. Again, in Photoshop you have the option to set the image quality – I usually find somewhere between 60% and 80% is ideal for a size vs. looks tradeoff. If you do this you can make each of the >1MB images <=100kb without detracting from the visual appeal of your site.

            This is Amdahl’s Law at work. When you start optimizing shoot for the most inefficient thing and fix it.

          • Rawal Baig July 23, 2016 at 7:45 am #

            Hi Michael!
            Thanks for your suggestion, It works perfectly ­čÖé And now the size of page is only 1.44MB

            As I’m using multi site network W3 Total Cache plugin is making problems. So I disable it, can you please suggest me any other alternative plugin for CDN, I have tried some but they are not working at all for azure.

            One Problem which is not solving is the First Byte Issue which is much higher than recommended. Please check it here.

            http://www.webpagetest.org/result/160723_WT_HSF/1/performance_optimization/#first_byte_time

            Again Many Thanks
            Rawal

  2. mariamadzia October 11, 2016 at 11:11 am #

    Any secend WordPress + AZURE post? 2/2?

    • Michael Blouin October 16, 2016 at 8:22 pm #

      Hey here’s an answer that might be too common: it’s on the backlog :/

  3. galo October 30, 2016 at 6:05 pm #

    Hi, my site connects all fine but all images appears with a 404 error http://pbpblob.blob.core.windows.net/blob/xxxxx/uploads/cache/images/2016/10/premiohambers1920500esp/1404373649.jpg

    The static image is premiohambers1920500esp.jpg but w3 total cache creates cached imgs and creates these randomized imgs and those cache folders azure dont host so is going to be always 404.

    Any idea on how to solve this?

    Thank you

    • Michael Blouin November 3, 2016 at 10:27 am #

      Hey Galo,

      Try manually syncing your images in W3 Total Cache. If that doesn’t work you should look at disabling that feature to create randomized images if it is not syncing images correctly to Azure. I can’t imagine any possible benefit of randomizing your asset names – in fact it could have a negative impact on SEO.

      -Mike

  4. Galo Hernández November 8, 2016 at 2:30 pm #

    Thank you Michael. I finally solved. I have to include: {uploads_dir}/cache/* in the Custom file list. Then I upload those with the buttom “custom files”. Then all magically worked all fine.

  5. Hammy Havoc January 14, 2017 at 5:05 pm #

    Did you manage to submit that pull request to fix the issue? Great work!

    • Michael Blouin January 17, 2017 at 11:08 am #

      Hey Hammy, which PR was that?

Leave a Reply

Proudly made in Canada