How To Add a CDN to Your Website

ST

Seb Toombs

Feb 19 2019 ()

6 min read

Adding a CDN to Your Website

The internet of today (and probably even more so tomorrow) needs to be fast. Users, especially mobile users, expect pages to load nearly instantly, Google expects the same if you want to rank well. A CDN is a great way to help speed up your site and improve those page load times for both users and search engines.

That's Great, But What is a CDN Anyway?

Thought you might ask that! Put simply, a CDN or Content Delivery Network is a distributed network that can serve your content to users. More specifically, it's;

... a geographically distributed network of proxy servers that work together to provide internet content.

Cloudflare.com

But what does that mean, well essentially it means there is a network of servers around the world that store your assets (usually images, stylesheets, scripts etc) such that when a user requests them from your site, they are delivered from the closest possible location. There's actually a good video & article over at Cloudflare if you want to know more.

Image: Cloudflare.com

Long story short; a CDN means your content is served from somebody else's server that is hopefully a lot closer to your user (and optimised for delivering static resources) than your origin server.

How To Add a CDN to Your Website

If you're using Wordpress, great, this next part is relatively easy. If not, read on in the next section!

Getting started with a CDN is relatively simple using Wordpress; pick a provider, install a plugin, configure some settings and you're away.

1. Choose a CDN provider

There are actually loads of CDN providers to choose from out there. The two most commonly used ones are probably Amazon Cloudfront and Stackpath (previously MaxCDN). We're going to look at Amazon Cloudfront in this article, but the same principles should mainly apply. Discussing the pros and cons of each is outside the scope of this article, however here are a few options you might consider;

  • Amazon Cloudfront
  • Stackpath
  • Akamai
  • Google Cloud
  • Microsoft Azure
  • Cloudflare*

*Note: Cloudflare isn't really a traditional CDN, however I have included it in this list anyway as it can fulfil the role of a CDN. This article is more geared towards traditional CDNs.

1.1 Add AWS User

Regardless of the CDN provider you have chosen, you will need some kind of credentials with which you can authenticate with the CDN API. In the case of Cloudfront, we need to add a user in IAM that has full access to Cloudfront.

  • Navigate to your AWS console
  • In AWS, navigate to IAM
  • In IAM, click "Add User"
  • Enter your desired username in the appropriate field. The value you use here is not particularly important, just choose something meaningful for you. For example we might use "nimblewebdeveloper-cdn"
  • Under Access Type tick only "Programmatic Access"
  • Click "Next: Permissions" to move on to setting the permissions
  • If you have any existing groups set up (for example a "CDN Users" group) go ahead and add the user to the correct group. In this case, we are going to select Attach existing policies directly
  • In the policy list, look for "CloudfrontFullAccess" and select it.
  • Click "Next: Tags"
  • We're not going to set any tags here, so simply click "Next: Review" to move on
  • Make sure your selections are correct and then click "Create User"
  • Important: Make sure you either download "credentials.csv" on this page, or store the Access Key ID and Secret Access Key somewhere safe such as a password manager like 1Password.

2. Configure CDN Settings

CDN settings can be somewhat daunting to set up, as there are quite a lot of options that might need changing. Fortunately for Wordpress users there's a way we can shortcut this step by using a great plugin: W3 Total Cache.

2.1 Using Wordpress

Using Wordpress and W3 Total Cache, setting up Amazon Cloudfront is really simple. (Note: W3 Total Cache supports Stackpath as it's preferred CDN provider, so setup is possibly even easier)

  • Install & activate W3 Total Cache (if not already installed) https://wordpress.org/plugins/w3-total-cache/.
  • Navigate to W3 Total Cache's General Settings page, enable CDN and choose Amazon Cloudfront under "CDN Type", as "Origin Pull / Mirror". Hit "Save Settings".
  • Navigate to the CDN specific settings page (Settings, CDN).
  • Enter your Access Key ID and Secret Key generated previously in the appropriate fields.
  • Next to "Origin", click "Create Distribution"
  • After a moment, you should see a "Success" notification. If not, you will see an error which is most likely related to your credentials.
  • Jump into your Cloudfront console to find the domain name for your new distribution. This will look like xyz123.cloudfront.net
  • Copy just the subdomain part of the distribution domain. E.g. if your domain is "xyz123.cloudfront.net" copy the "xyz123" part.
  • Enter the subdomain part of the distribution domain into the field "Replace sites hostname with" in W3 Total cache
  • Click "Save Settings & Purge Caches"
  • Done!

If you want to stop at this point, you can. You should have a fully functioning CDN on your site. Congratulations!

2.2 With a Custom Site

If you're working with a custom application, you'll have to find a way to replace your site's hostname in all your links to static assets (images, scripts, stylesheets). This might mean you have to do this manually, or there might be a build script or plugin you can use depending on your platform.

An easy way to do this using PHP might be to declare a constant that contains your CDN url, and use this to link all your assets.

<?php
define('CDN_URL', 'https://cdn.nimblewebdeveloper.com');
?>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="<?php echo CDN_URL; ?>/assets/css/main.css">
</head>

<body>
<div id="page" class="site">
    <img src="<?php echo CDN_URL; ?>"/assets/img/img01.jpg" />
</div>

<script src="<?php echo CDN_URL; ?>/assets/js/main.js"></script>
</body>
</html>

Test CDN

To test if your CDN is working, open up your website and check the source URL of your images, stylesheets & scripts. They should be being served from "xyz123.cloudfront.net/wp-content...." instead of from your domain.

3. Set up CDN domain (optional)

Most CDN providers, once you've set up your zone, will give you a unique subdomain on their domain to serve your content for, such as xyz123.cloudfront.net if you were using Amazon Cloudfront. It's entirely possible to simply use this domain and point all your assets to it and be done. However a good idea is to set up a CDN subdomain on your domain to point to your CDN provider. This should be as simple as taking note of the subdomain allocated to you by your CDN provider and adding a CNAME record at your domain.

Using the example above, let's say I was setting up a CDN for nimblewebdeveloper.com using Cloudfront, and had been given the CDN URL xyz123.cloudfront.net, and I want instead to use the URL cdn.nimblewebdeveloper.com.

To achieve this, simply add the following CNAME record to your DNS; (highlighted blue)

You'll then need to change your website or app to use the new domain for assets. If using W3 Total Cache, in CDN settings add the new domain on a new line under "Replace the site's hostname with".

Save your settings & purge all caches, and you should be done.

The benefit of using a subdomain of your main domain for your CDN is the reduced number of DNS lookups a client has to perform to download your page. This can result in slightly faster page load & render times.