Dave Rendón Microsoft Azure MVP, embracing and fostering tech intensity to benefit society and thrive in a digital world.

How to improve your WebApp performance using Azure CDN

3 min read

WebApp performance using Azure CDN

This post shows you a detailed configuration and best practices on how to improve your WebApp performance using Azure CDN. If you are running into a webapp performance issues, you may want to add an Azure CDN profile to your solution for scalability and better performance.

 

Why should you use Azure CDN?

CDN is common used to deliver static resources for client applications, often from a website. These resources can be images, style sheets, documents, files, client-side scripts, HTML pages, HTML fragments, or any other content that the server does not need to modify for each request.

The application can create items at runtime and make them available to the CDN (for example, by creating a list of current news headlines), but it does not do so for each request.

The Azure Content Delivery Network (CDN) is a service that allows you to send audio, images, and other static files faster and more reliably to customers across the globe.

The current scenario assumes you have a CMS like wordpress or joomla running as an AppService and you want to improve some key metrics like “webapp loading time”.

Example of Azure CDN  workflow:

 

Azure cdn large wikiazure

Key question: what is the average loading time you have seen in wordpress as Azure App Service? Maybe 3.65s – 5.5s?

Notes: Please check this configuration for WordPress on Azure

  • If you´re using WordPress, please check out this post on how to improve your wordpress performance where I recommend some plugins and advanced configurations.
  • If you´re looking for the basics on how to configure a CDN profile please read this Azure Doc on how to Add a Content Delivery Network (CDN) to an Azure App Service – https://docs.microsoft.com/en-us/azure/app-service-web/app-service-web-tutorial-content-delivery-network

When adding your CDN endpoint stablish your origin type as custom origin, your hostname equals your domain name and same for host header.

azure cdn endpoint wikiazure

Also enable compression:

cdn-configure wikiazure

 

Collect key information!

When trying to improve a webapp performance on Azure, we need to gather all information we can get to properly assist this request. What is not loading quick enough? Could you give an asset example of something that is loading slow? How slow is it loading? Have they run any speed tests? Is this an issue in a particular area or global issue? Are you caching items to server from the CDN? Is it currently pointed correctly to serve it?

After all of this questions you can have a better idea of the root cause for your issue and in most cases its likely related to the CDN service. Microsoft uses a third party provider, Verizon Edgecast, to support the Azure CDN services.

 

What about DNS Resolution?

The Domain Name System, or DNS, is responsible for translating (or resolving) a website or service name to its IP address. Azure DNS is a hosting service for DNS domains, providing name resolution using Microsoft Azure infrastructure.

By hosting your domains in Azure, you can manage your DNS records using the same credentials, APIs, tools, and billing as your other Azure services.

DNS domains in Azure DNS are hosted on Azure’s global network of DNS name servers. Microsoft use Anycast networking so that each DNS query is answered by the closest available DNS server. This provides both fast performance and high availability for your domain.

dns resoution wikiazure

In this case I am using a wordpress hosted on Azure so the IP address I am getting is not a Verizon IP address. It is a Microsoft reserved IP address. I can’t really compare this case to any other site but I can show you an idea of how static assets perform on CDN vs Non-CDN.

Best practice when diagnosing your Azure CDN profile:

Inspect the page’s waterfall (In Chrome: right click on the page –> inspect –> network. Also, turn on “Disable caching” which will bypass your browser’s internal cache.) you will see some assets i.e.  https://wikiazure.com/ ‘s main page take <50ms while others take >500ms (This may depend on your connection.).

The faster loading static assets point to your CDN domain wikiazure.azureedge.net while the slower assets point to your origin wikiazure.com.

Also, you can compare the same file by switching the domain in their own tab with :
From origin: ‘https://wikiazure.com/wp-includes/js/jquery/jquery.js?ver=1.12.4’ takes 700ms on my browser while, from CDN: ‘https://wikiazure.azureedge.net/wp-includes/js/jquery/jquery.js?ver=1.12.4’ takes 33ms.

 

 

The major advantages of using the CDN are lower latency and faster delivery of content to users irrespective of their geographical location in relation to the datacenter where the application is hosted.

 

wikiazure-cdn

 

If you’re satisfied with how an asset performs on the Azure CDN vs your origin, I suggest you to change it over in the page’s HTML/PHP.

 

Reducing application downtime

On the other hand, if you want to reduce application downtime, the Traffic Manager can improve the availability of important applications by monitoring your Azure services, or external websites and services, and it automatically directs your customers to a new location when there’s a failure.

In case of critical applications you should distribute user traffic over multiple locations, to achieve that goal Traffic Manager can direct your customer traffic to distribute it across multiple locations, such as multiple cloud services or multiple Azure web apps.

Traffic Manager can use equal or weighted load distribution. In my personal case I use the KEMP ADC on Azure to optimize SSL Transactions Per/Second and also integrate traffic manager + Azure CDN.

Next Steps:

I urge you to  deploy the template: Create a CDN Profile, a CDN Endpoint and a Server Farm and a Web App 

Try  a Simple deployment of a CDN profile and a CDN endpoint

 

 

Dave Rendón Microsoft Azure MVP, embracing and fostering tech intensity to benefit society and thrive in a digital world.

3 Replies to “How to improve your WebApp performance using Azure CDN”

  1. Hello, great article! I am looking for how to connect this same cdn azure service with a website on an external server! kind use azure cdn as we use cloudflare, can you say something about it?

    1. Hello Fabio, First of all, really appreciate you took the time to read this article! As per your request, If I understand correctly, You have a website which is hosted outside of Azure but you want to try Azure CDN for your website assets? In that case, you want to take a look on how to Integrate an Azure storage account with Azure CDN so that you can enable Azure CDN to cache content from Azure storage and use a cached blob endpoint from your external website.

      Please be aware of that CDN is a potential single point of failure for an application and that content such as images and documents are served from a different domain when you use the CDN. This can have an effect on SEO for this content.

      Regards!
      Dave

Leave a Reply

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