Add Azure CDN to your WordPress Site

Serving static files fromĀ a CDN (Content Delivery Network) has various benefits for a website. As your visitors loading your static files, like images, js and css from a different server then yours and often directly from their region, the load time can improve a lot. Your serves payload goes down as well.

Setup a CDN on Azure

Utilizing the Azure CDN is rather easy, moneywise its not cheap at all , but the setup is done in minutes and the benefits are worth it.
To start the setup, go to the marketplace and search for “CDN”.

Azure Create CDN

Next give it a name, select your subscription, select or create a resource group, your region and at last a pricing tier.

Azure set CDN Profile

When your CDN is created, you want to setup your endpoint. For this you have to select a unique name (this will define your CDN’s URL). In the “Origin type” dropdown you select the source of the static files. In this case I selected an Azure App Service “Web App”, so the “Origin hostname” was filtered by all my wep apps on Azure. (Note: When using the Azure App Service you need set the host header to the wep apps url).

Azure CDN set Endpoint

 

You could setup a Azure storage account as well, or, like I did here, setup an external website. If you leave the “Origin path” empty, the CDN will load all your static files from the top level of your site.

Setup Azure CDN for every Host

Setup WordPress

To connect my WordPress installation with the new Azure CDN endpoint, I use the WordPres plugin WP Super Cache. It will replace a part of the path from your static files, like “hostname.de/yourImage.jpeg” to “yourName.azureedge.com/yourImage.jpeg”.

Install WP Super Cache

When it is installed, activate it, go to the settings and hit the CDN tab. Here you want to add the URL from your endpoint and check “Activate CDN Support”.

Setup Azure CDN WordPress

Before you hit “Save” be aware that your endpoint will need round about 90 min to fetch all your files!

Azure CDN Result

If everything worked out well, you should see that all sources in your HTML code swapped to your Azure CDN endpoint url.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *