Read time: 5 minutes
Have you ever landed on a website filled with images and spent the last several seconds patiently waiting for those images to finish loading in your browser?
This actually happened to me recently as I was testing my small Game Store front-end, which when deployed to Azure, loads images from my Azure Storage account.
The storage account is still in the US, but in the East US region, while I’m on the West Coast. Yet, images were not loading instantly in my browser, at least not the first time I loaded the page.
This is one of those things you don’t think much about when rushing to get that first version of your small website out the door. Yet, it will hit you hard as you try to scale to hundreds or thousands of customers.
The good thing is that this has a well-known solution called a Content Delivery Network (CDN), and today, I’ll show you how to configure one in the Azure cloud.
Let’s dive in.
Loading images from far away
Let’s say our website is based in Japan since most customers will access our website from that region. Therefore, we created our Azure storage account next to our website, in the Japan West region.
However, we have an increasing set of customers coming from the US, and when they load the website, images take a while to load.
For this concrete example, I uploaded a fairly big, 4MB jpg to a storage account I created in Japan West, and this is what I observed when loading it in the browser:
So 1.46 seconds total, and just for one image. Not too bad for a 6,000-mile round trip, but we can do better.
Enter Azure Front Door
Azure Front Door is Microsoft’s global CDN, which currently has over 118 edge locations across 100 metro cities, and it integrates very easily with Azure Storage.
The idea behind using a CDN is that our USA customer will no longer request images directly from Japan’s Storage Account, but from Azure Front Door, which is much, much closer to him.
The very first round trip might still take about the same time (but only for the very first customer) since Front Door needs to retrieve that image from the origin.
However, before handing over the image to the customer, it will first cache that image in the edge location closest to him, so next time things should go really fast, with no need to talk to the origin.
You can quickly enable Front Door for your Storage Account from the Azure Portal:
Notice how I explicitly enabled caching there, to ensure we get that benefit. You could also enable compression, but it would not help much with jpg images, which are already compressed.
After a few minutes, your new CDN endpoint should be ready:
Time to test it out.
Loading images from the CDN
You can now use that Azure Front Door endpoint to reach any of your Storage Account blobs. All you do is change the hostname of the image URL.
In my case, that means changing my image URL from this:
https://gamestoretest.blob.core.windows.net/game-images/StreetFighterII.jpg
To this:
https://gamestore-bzbag8hjeqd2dra5.z01.azurefd.net/game-images/StreetFighterII.jpg
The first time I loaded the image in the browser it did take a bit more time to load than before (full round trip) but the second time things looked quite different:
So we went from 1.46 seconds to 126.29 milliseconds. And this is after clearing the browser cache.
Quite an improvement!
Then, a couple of things you may want to do next are:
- Update your backend API so it serves Front Door urls as opposed to the original ones
- Setup your provisioning infrastructure so that the Front Door endpoint gets auto-provisioned when you provision your Storage Account
I cover both things, including how to provision Front Door via Bicep and .NET Aspire, in the bootcamp.
Bootcamp update: Diagrams!
It’s not like I don’t like creating diagrams, but after spending this last week creating 25+ diagrams for the upcoming Azure bootcamp course, I might be reaching my limit :)
However, I think good diagrams are extremely important to understand exactly how your app will interact with a myriad of Azure services after deployment, and I could not find many of those in the Microsoft docs.
A small sample of what’s coming:
I’m finishing the last diagram now, which means next week will be the time to start recording the course.
As a reminder, all current bootcamp students will get access to this new Azure for .NET Developers course, with downloadable diagrams and full source code, at no additional cost, on day 1.
Until next week!
Julio
Whenever you’re ready, there are 2 ways I can help you:
-
.NET Cloud Developer Bootcamp: Everything you need to build production-ready .NET applications for the Azure cloud at scale.
-
Promote your business to 20,000+ developers by sponsoring this newsletter.
