Azure CDN and WordPress using W3 Total Cache

December 27, 2014 5:08 am / 10 Comments /

Azure storage CDN

This post is a follow-up post to my previous post Optimizing WordPress hosted on Windows.

It’s the holiday season and therefore having some time to spare, I thought I might as well include the part I left out my previous post. Therefore this post focuses solely on including Azure CDN within your WordPress environment using the W3 Total Cache WP plugin.

Azure CDN: Before getting started…

The process of setting up the Azure CDN and including the references within WordPress is as simple as a walk in the park, however, the process is somewhat time-consuming due to DNS changes and data migration. Not a huge deal, just something to keep in mind.

Setting up the Azure storage components

To keep everything organized, I would recommend creating a new storage container. The name of the storage account and the Container will also be part of the URL for accessing the storage service endpoint and CDN.

Examples:

Blob Storage URL: http://[account_name].blob.core.windows.net/[container_name]
CDN URL: http://[id].vo.msecnd.net/[container_name]
CDN URL custom domain: http://[sub_domain].[domain_name]/[container_name]

Step 1 – Creating a new storage account.

Open the Azure portal and click the NEW button located down on the right menu. At this point, click on Everything and then select Storage, cache + backup. Within the selection pane, select Storage and click the Create button located at the bottom of the page.

Azure-Storage-Setup-1

Azure-Storage-Setup-2

Azure-Storage-Setup-3

Now provide a name (I’m using the name of my blog), a tier, your subscription, and location. I would recommend selecting a location close to where your WP site is hosted. All will be populated within the Azure CDN later. If you are hosting your WP site within Azure, you could include this storage account within an existing Azure Resources Group. If not, create a new one. Azure Resources Groups aren’t available within the old Azure Portal.

Step 2 – Creating a new storage container.

Open the storage account you’ve just created and click on Containers within the main pane. Click on ADD located within the top of the new configuration pane. Please provide a name (i’m using blog) and make sure to select the Access type Blob: Access blobs via anonymous requests.

Azure-Storage-Setup-4

Azure-Storage-Setup-5

Step 3 – Create a new Azure CDN endpoint for your storage account

Note: The CDN endpoint can only be created within the old Azure portal located at manage.windowsazure.com.

Open the old Azure portal, and click on CDN located within the left menu. At this point click on NEW » QUICK CREATE. Select your subscription and specify the storage account created earlier for the ORIGIN DOMAIN. Click the Create button to create the new endpoint.

Azure-CDN-Setup-1

Once the endpoint is created, it appears in a list of endpoints for the subscription. The list view shows the URL to use to access cached content, as well as the origin domain. Make sure to copy the domain which we will need for the creation of a CNAME resource record with your DNS provider that points from [subdomain].yourdomain.com to [your_id].vo.msecnd.net

Azure-CDN-Setup-2

Step 4 – Create the CNAME resource

Sign in to your DNS service provider and open the DNS manager for your domain. I’m using GoDaddy however, the DNS management section will all have similar options. Click Add Record, specify the type CNAME. Provide the host (your CDN subdomain name) and make sure it points to the Azure CDN endpoint.

Azure-CDN-Setup-3

Step 5 – Register a custom domain for an Azure CDN endpoint

Note: Any change you make to your DNS can take some time to resolve. It’s best to wait an hour or so before proceeding.

Open the old Azure portal, and navigate to the CDN created earlier. On the ribbon below, click Manage Domains to display the Manage custom domains dialog box. Now enter your custom domain, including the subdomain, in the dialog box—for example, cdn.mydomain.com. Azure will verify that the CNAME record exists for the domain name you have entered. If the CNAME is correct, your custom domain is validated and ready to use with your CDN content.

Azure-CDN-Setup-4

Azure-CDN-Setup-5

Step 6 – Enable and configure W3 Total Cache

Within your WP environment navigate to Plugins » Add New and search for W3 Total Cache. Within the details pane, select Install now to initiate the installation process.

After installing the plugin, a new main menu item will appear named Performance. Click on Performance » CDN. After the page has refreshed, navigate to the General section and select the types of files, you would like to store within the CDN. I’ve chosen all five options.

Azure-CDN-WordPress-5
Scroll down to the section named Configuration. Here you will need to provide the information as configured within Azure. The Account name is the name of your storage account. The Account key can be found within the Portal by opening the details of the storage account as shown within the image below.

Azure-CDN-WordPress-6
The Container is just the name of the storage container as created before. Just leave the SSL support setting unaltered and add your CNAME within the first input box at the question; Replace site’s hostname with. After providing all information, make sure to press the Microsoft Azure Storage upload button.

Azure-CDN-WordPress-7

Step 7 – Configure Browser Cache Settings and compression.

This is a crucial step of the configuration process; however, the plugin is only mentioning this at the very bottom of the CDN configuration page. Without configuring the following, your CDN won’t lead to any performance gains.

Open the Browser Cache page within the Performance menu. At this page, make sure that Enable HTTP (gzip) compression, Set entity tag (eTag), Set expires header, Set W3 Total Cache header, and Disable cookies for static files are checked for all media types and save the changes.

NOTE: It turns out that CDN’s are pretty “dumb” and won’t GZIP or set expiration headers by default. The metadata of the stored item needs to include the information allowing the CDN to serve the file with the correct headers.

After configuring the CDN within W3 Total Cache, refresh the WP main page. W3 Total Cache will include leaving a message within the notification area, indicating stating the following: Settings that affect Browser Cache settings for files hosted by the CDN have been changed. To apply the new settings.

Azure-CDN-WordPress-8

Just note that you can only export one Media Type at the same time.

Step 8 – Testing and Troubleshooting

After you have completed the export, as mentioned in step 7, you can access content that is cached at your CDN endpoint using the custom domain. Just navigate to the address of your WP website and drag one of the Images to the address bar. The image URL should point to the Azure CDN.

http://cdn.devslice.net/blog/wp-content/uploads/2014/12/windows-logo.png
http://[custom_CDN_domain]/[container]/[WordPress_content_path]

If this isn’t working, make sure the item is available within your blob storage
http://[account_name].blob.core.windows.net/[container_name]/[WordPress_content_path]

Additional resources:

Microsoft Azure Tuning

Post Navigation