It’s a common thing for websites to serve some kind of static content, like images, sounds, fonts or videos. When deploying a new website, the most common way to serve the aforementioned content is to include these files in the app structure and allow the web server to serve the static content.

In Azure, there are additional ways to serve static content, either through Azure Blob Storage or through Azure CDN; in this post we will discover the pros and cons of each solution.

Demo

To measure the performance of each solution, we have built a demo app, where large images were uploaded and the time it takes to load these images through three different services was measured:

  • Azure App Services (WebApp), via which the images are uploaded to the same server the app is running;
  • Azure Blob Storage, via which the images are uploaded to a public container in an Azure Storage account;
  • Azure CDN, where an endpoint between Azure CDN and Azure Blob Storage was created, and where Azure’s content delivery network is responsible to handle requests for these images.

assets-loading-demo

Notes

  • images are scaled to 170px for better presentation;
  • total time is measured using the `load` event on each image, while the average total time is displayed after 10 attempts;
  • browser cache is empty before each measure.

The demo app can be found in assetsloading.azurewebsites.net and the source code in github.

Azure App Service (Web App)

The first option to serve static content is using the web server hosting the application. The web server is responsible to handle those requests and spends resources to complete requests for static content.

Deploy an app to Azure Web App

The source code is hosted in GitHub and Azure App Service provides a very easy way to deploy the app from GitHub to an Azure Web App through deployment options.

Firstly, you need to create a new web app, by clicking on New – Web + Mobile – WebApp, then choose a name for your app and select an App Service Plan (the free service plan also provides the option for continuous deployment):

azure-new-web-app

Subsequently, after the web app is created, select Deployment Options, from Deployment Source select GitHub, authorize your account, select the project and branch to use and click Ok.

deployment-options

Performance

Now, when you click on Download from App Service button, 6 quite big images (around 2 MB each) will be downloaded, while the total time required is around ~12 seconds.

assets-loading-azure-app-service

Pros

  • this option is good if your app does not have much static content to serve;
  • cheap, as you only pay for the server that hosts both;
  • easy to deploy as content is deployed with your app.

Cons

  • server consumes resources to handle requests for your static content;
  • you need to configure your server to serve certain mime types; some files like .mp3 may not be supported by default;
  • difficult to upload new content as you need to configure access permissions;
  • whenever your app needs to scale out in a new instance, these files should be copied to the new instance and this may take some time based on the size of your static content;
  • requests that come from different regions than the ones the server is located will take more time to be completed.

Azure Blob Storage

The second option to serve static content is using Azure Blob Storage, which is a service that stores unstructured data in the cloud as objects/blobs. Blob storage can store any type of text or binary data, such as documents, media files, or application installers. Blob storage is also referred to as object storage.

You may create a public container to host your files and, using the endpoint url provided with your storage account, you may reference these objects. A typical link from an object stored in Azure Storage looks like https://{storage_account_url}/{container}/{image_file}.

Create Azure Blob Storage

To create an Azure Storage account through the portal, click on New – Storage – Storage Account, fill in the form details and click on Create.

create-azure-storage-account

After your Storage Account is created, you can create a public container, like `loadingdemo` and upload the static content you want to use:

Testing the time it takes to download the same photos used in previous example, it is ascertained that Azure Blob Storage is about ~5 seconds faster when compared to Azure App Service.

assets-loading-aure-blob-storage

Pros

  • much more advanced features for static content management provided out of the box;
  • relatively cheap as you pay only for what you use;
  • support for images, videos, audio and documents by default;
  • can scale as much as you want.

Cons

  • Blob Storage is limited in the region where the storage account is created, namely out-of-region requests may take more time to complete, taking into account the distance from the storage’s region;
  • you need to create a new link to access your static content in the following format https://{storage_account_url}/{container}/{image_file}

Azure CDN

The third option is proven to be the fastest one, as your content is handled by Azure’s Content Delivery Network (CDN), in which you can cache publicly available objects loaded from Azure Blob Storage, a web application, virtual machines, application folders, or other HTTP/HTTPS locations. Thus, requests from all over the world are handled, not from the region your Web App or Storage Account is located, but by a server near your user which has a copy of this static content.

Create Azure CDN

The Azure CDN service may be created through the portal, by clicking on New – Web + Mobile – CDN, filling in the form and selecting the CDN Provider to use:

azure-cdn-create

After the CDN service is created, an endpoint needs to be created to provide a connection between Azure CDN and your Web App, Azure Storage, Cloud Service or Custom Origin to fetch static content when requested.

In this case, you may use the Azure Storage Account and the container created in the previous step:

azure-cdn-endpoint

Now, the static content can be accessed based on the following url structure:

https://{azure_cdn_endpoint}/{image_file}

Comparing the time it takes for Azure CDN to load the same images used in previous examples, it is ascertained that it is around ~230% faster when compared to Azure Blob Storage and around ~340% when compared to Azure App Service.

assets-loading-azure-cdn-m

Conclusion

Without proceeding to many changes, you may improve the performance of your website, when it comes to serving static content, by using different Azure Services which are more suitable for this job. Azure CDN is the fastest and more scalable option and serves customers better all around the world, compared to Azure Blob Storage and Azure App Service, though it costs a bit more.

Categorized in:

Articles

Tagged in:

,