Content Delivery Networks were created for one reason: to speed up your websites and web applications. In this article, I explore how you can take advantage of Content Delivery Networks (CDNs) to improve your website performance for a small cost.

The Problem

Modern websites and web-based applications have a number of digital assets. These are the stylesheets, scripts and images that make up the websites you use. My website is no exception – it has 15 such assets.

These assets are stored on my hosting provider’s cloud storage system – Memstore. The platform provides a web address to download each file. The below URL downloads jQuery version 3.1.1, for example:

https://assets-02460a43.cdn.memsites.com/jquery/3.1.1/jquery.js

Memstore is a brilliant platform that offers unlimited storage using either a pay-as-you-go or pay monthly pricing model. The only downside is that the web servers are all based in the UK.

Although my servers are located in the UK, only 18% of visitors to my website in 2017 were from the UK!

If you are in the 82% of my visitors located outside the UK, your browser has to make 15+ requests across the globe to download these assets – adding significant delay whilst my website is “loaded.”

Imagine you are located in Australia. If your browser downloaded the assets from a server also located in Australia, it would only need to make one request to the UK (to get the website’s HTML.) The load time would be significantly improved.

What is this sorcery? Enter the world of Content Delivery Networks.

What are Content Delivery Networks?

Content Delivery Networks (CDN for short) are networks of servers that are run by large companies. They specialise in moving high volumes of traffic quickly. CDNs have huge amounts of bandwidth, storage capacity and processing power.

These companies have points of presence (PoPs) in most continents, so wherever your visitor is located in the world, there will be a PoP near by. CloudFront, for example, has 100 locations globally.

You will likely have heard of some of the bigger players:

  • CloudFront (one of the services that makes up Amazon Web Services)
  • Akamai (used by Microsoft and Rackspace)
  • MaxCDN
  • CDN77.com

I personally chose Amazon’s CloudFront for its flexible configuration and detailed reporting, but choose what works best for you. There’s no harm in trying each of them out for a few days.

If you’ve accessed my website, online development tools or e-mail & SMS reminder service since 26th November 2017, your browser downloaded the required assets from Amazon’s CloudFront CDN.

The Solution

Whichever company you choose, the concept of a CDN is the same. You must change the links in your website’s HTML to instruct browsers to download the assets from the URL given by your CDN service instead of your server (in my case, Memstore.)

The image below shows the assets my website uses, loaded from Memstore (click to enlarge):

And here are the same assets after I switched on my CDN service (click to enlarge):

All CDNs require an “origin” URL. This is the original URL to your actual assets (in your HTML before switching on your CDN service.)

The first request that retrieves a file from the CDN will still make a request back to your origin to get the file. However, the CDN server (known as an “edge” server) will cache the asset. Any subsequent request to the CDN for the same file will use the cached copy. This reduces the load on your own server and the time taken to load the resource for your visitor.

Because the edge servers are physically located closer to your visitors, the assets will be downloaded much quicker. This leads to a more responsive website.

The following diagram depicts the architecture of how my Memset Cloud VPS, Memstore Cloud Storage and Amazon CloudFront all work together:

Since switching on CloudFront, I am now achieving a hit rate (items being served from CloudFront’s cache) of 88% – which is a significant reduction in requests.

After 2 weeks live in December, I’ve accrued costs of just 3 cents for CloudFront. Admittedly I don’t shift a huge amount of traffic, but this shows that the cost is negligible.