A Developer’s Guide to Content Delivery Networks (CDNs)
In this guide we're going to walk through how to understand content delivery networks. One of the first companies I worked with was a video platform company. That was over a decade ago and CDNs were in their infancy. That was my introduction to the world of content delivery networks and since that time I’ve worked with a large number of CDNs for various applications.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a free Dev Camp account

CDN Definition

So what is a CDN? CDN stands for Content Delivery Network. Essentially CDNs leverage a distributed set of servers, replicating data across a geographic area to enable faster application load times. If that isn’t 100% clear don’t worry, let’s walk through an example of how CDNs work.

Content Delivery Network Example

One of the top CDN users in the world is YouTube. With petabytes upon petabytes of data the YouTube streams over 4 billion videos to users across the world each day! In addition to having to play videos for users, the site also prides itself on being able to give instant access to media.

If YouTube took a minute or more to retrieve a video it would make for a very poor user experience. With that in mind the site employs one of the web’s more powerful content delivery network.

Instead of storing each uploaded video at a single data center, YouTube takes a distributed approach. By leveraging a CDN the site stores the video files at data centers across the world. This means that when you’re watching this CronDose episode from your home in Los Angeles, someone watching the same episode in the UK is being sent a cloned video file from a server closer to them.

This approach decreases the distance that a file needs to be sent to the end user, which improves the performance.

CDN Diagram

large

As you can see in this diagram, a CDN leverages servers throughout the world (or a defined geographic region) in order to give end users quicker access to data. This is a powerful tool because it allows applications to deliver the same speed to users anywhere in the world.

How Does a CDN Work

Let’s go through a step by step example to understand how CDNs work.

Data is Uploaded to a Server

medium

As you may imagine the process is kicked off when a user uploads some type of media to a server. This can be a video, a picture, a website, or really any type of data that will be accessed by users.

This data is uploaded to a single data center. The distribution process doesn’t kick off until the next step.

User Accesses Data

large

Next in the CDN workflow is when a user accesses the data. Extending our YouTube example, this could be a user watching a video from England. The playback for this video may be a little slower because the video needs to be transferred to the server closest to the user in the UK.

Now the video file will be stored on the server in the UK and any other users accessing the same video will be streaming it from the local server instead of the one on the other side of the world.

Replicated Process

medium

This process will get replicated across the world. If you’re wondering why an uploaded video isn’t instantly pushed out to each remote server, that’s a good question. The reason is due to data efficiency management. The majority of videos on YouTube aren’t watched by users across the world. Therefore it would be a significant waste of resources if the system pushed every video across the network.

Expiration

medium

Lastly, just like you throw out old milk in the fridge, CDNs place an expiration date on content. This is to ensure that a remote server only stores fresh data. After data has expired it’s wiped from the system. If another user requests the same video it will be retrieved from the original data center and it will be given a new expiration date.

When to Use a CDN

So this is all great information if you have the next YouTube, but when else is it helpful to use a CDN? You may be surprised to learn all of the use cases for working with a content delivery network, here are a few.

Literally any website

large

You can have your HTML, CSS, and JavaScript assets stored on a CDN, which will dramatically improve your site’s load time. The CronDose and devCamp websites both leverage a content delivery network for assets. This has resulted in a better user experience and improved search engine rankings since Google includes site speed as a SEO requirement.

Video streaming

large

If you are streaming your own video you will definitely want to leverage a CDN. Video is one of the most resource intensive features that you can build into an application. Traditional hosting systems such as a VPS or even a dedicated machine can’t compare with the performance of a content delivery network.

At devCamp we chose to go with Amazon’s CDN since it integrates seamlessly with the S3 storage engine, which we use for hosting our videos. We’re currently in the process of integrating the CDN prior to our beta launch.

Image hosting

large

Lastly I strongly recommend using a CDN for image hosting. There are a few reasons for this and they’re both related to search engine optimization. As I already mentioned, Google has made site speed an important criteria for high page rankings. With that in mind streaming images from a CDN is faster than a typical server. Also, web browsers will load images from another server simultaneously with your website.

Page Load Visualization

Not clear? Let’s take a look at this visualization.

large

Let’s imagine that you have a website that stores your site and images. When a user goes to your page the web browser will load your website and THEN the images, since they’re located on the same server. For the sake of working with easy numbers let’s say this full process takes 2 seconds.

medium

However if you store your images on a CDN a web browser will try to pull both the site and images in at the same time, theoretically cutting the page load time in half.

List of CDNs

So now that you know what CDNs are used for, here are some of the top CDNs to work with.

  • Akamai
  • Limelight
  • Amazon
  • MaxCdn

CDN Workaround

I’m not going to lie to you, working with CDNs can be time consuming and a bit challenging. With that in mind I also wanted to include a CDN workaround called CloudFlare. I use CloudFlare for the CronDose site and it gives the full benefits of a CDN. However it doesn’t require you to perform the manual integration.

Many hosting providers also enable you to install CloudFlare when you create your site, which is what I did with CronDose. I liked it because it lets me spend more time on creating content and less on working with multiple hosting providers.

Warning to Using CDNs

large

Before you run out and start migrating all of your sites, videos and images to a CDN I offer a word of warning. One of the greatest strengths of a CDN, its ability to cache website assets, can also make it frustrating to work with.

I have had multiple times where I have pushed design changes to a website for a client and they couldn’t see the change. Even after clearing their cache they couldn’t see the updates I made. This issue arises because the CDN still had the old version of the website stored on the server closest to them.

When this happens you need to clear out all cached versions of an application. Services like CloudFlare let you do this with one click, however other systems can be a bit more complex.

I typically make the CDN integration one of the last features to add when I’m building a new application. This makes a site’s front end easier to work with since you’ll know that everyone is looking at the most up to date version.