Content Delivery Network (CDN) let you distribute static content from your website or other web application from locations closest to the end-user. For a standard web site this include things like images, CSS files, Java script and so on.

Looking at the image below, you can see that visitors on this site is scattered around. enabling CDN will therefore improve performance by delivering the content from different locations rather than the site host which is in Europe.
Following this post you should be able to have CDN up and running in about 15 minutes 🙂

PreReq’s

• W3 Total Cache WordPress Plugin
• Azure Subscription

Enable Azure CDN

The first thing you need to do is to create a new Azure CDN profile in the Azure portal. Search for CDN and create a new profile.

I chose to go with the standard Verizon version which at this point it cost $0.08 per GB up to 10TB usage. If you have other needs please check the features and pricing for Azure CDN here.

Next, create a new endpoint and configure the origin. If you run your site in Azure you can find it in the drop down. The endpoint will be the URL which all cached content is available. You can run multiple endpoints under one profile, i just ended up using a 1-1 resource group, profile and endpoint.

According to Azure documentation, it can take up to 90 minutes before new endpoints are cached, so expect to see 404 errors after you have created it. Take a note of the endpoint hostname which is the address we are configuring in WordPress.

Configure WordPress CDN

Heading over to your wordpress admin page you will have to enable CDN under W3 Total Cache general settings. Tick enable and chose generic mirror as your CDN type. Azure CDN will mirror your data and using “pull” functionality.

After this is enabled click CDN under performance on your left menu. If you do not remember your endpoint name, go back and copy it from the Azure portal.

Scroll down to the configuration area and put in your endpoint name without HTTP(s). Check connectivity by clicking “test mirror”

This is all configuration needed to do basic CDN using Azure on your WordPress web site, but a lot of customization can be done both in Azure and in WP. After caching is enabled and time has done it things. You should be able to confirm that mirroring is working. Here is a screenshot of Chrome developer tools where you see the image URL is my CDN endpoint in Azure.