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”.
Next give it a name, select your subscription, select or create a resource group, your region and at last a pricing tier.
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).
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 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”.
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”.
Before you hit “Save” be aware that your endpoint will need round about 90 min to fetch all your files!
If everything worked out well, you should see that all sources in your HTML code swapped to your Azure CDN endpoint url.
