Last night, I ran an experiment to see just how much impact installing a CDN would have on improving page loading times. I’d heard that they can save up to 60% bandwidth, but how would that translate into actual page loading times?
I’ve split this post into three sections. First, we have the case study. Then I’ve compiled a comparison of the two major CDN services, and finally, there’s a guide on how to set up your CDN. If you want to skip past the case study section you can use the following links.
The CDN Experiment Results
Installing a CDN on VentureHarbour.com took about 20 minutes.
Below are two screenshots taken before and after the CDN installation showing the page loading time of a particularly slow page on our site (it’s 4,000 words and has over 110 images).
After CDN Installation:
Not bad for 20 minutes of work. I also measured a variety of other pages on VentureHarbour.com to see whether some pages improved more than others.
| Web Page | Before CDN | After CDN | Change |
| 109 Premium Responsive WordPress Themes | 7.43s | 5.93s | 20% faster |
| How to Build a Website in WordPress | 2.88s | 1.81s | 37% faster |
| 19 Tips to Reduce Your Bounce Rate | 2.63s | 1.53s | 41% faster |
| Deconstructing How Mashable, ProBlogger & KISSmetrics Reached Millions of Readers | 2.06s | 1.97s | 4% faster |
| Blog Home Page | 4.74s | 2.32s | 51% faster |
As you can see, there was. Some pages improved by as little as 4%, whereas others improved by as much as 51%. While not exact, it seems that pages with large images seemed to benefit the most from installing the CDN.
Overall though, we saw a 30.2% decrease in page loading times across the website. According to Cloudflare, they have saved my 14.3 MB worth of bandwidth in the past 24 hours too.
I should also note that I chose to have the bear essentials with Cloudflare to isolate the effect of their CDN alone. They have many additional features for speeding up your website even further, but I didn’t want those features clouding this analysis.
Comparison: Which CDN Should You Use?
There are countless companies offering CDN services. However, there are only two that you need to be aware of.
MaxCDN, and Cloudflare.
I’ve used both, and they’re both excellent. To be honest, though, comparing them is a bit like comparing apples and oranges.
MaxCDN is a ‘full’ CDN. Whereas Cloudflare is a hybrid that combines a CDN-like service with security and optimisation features.
In short, if you absolutely care about performance and speed, go for MaxCDN. They have more data centers around the World and are more dedicated to improving your page loading times.
If you’re more interested in something that will protect your website from DDoS attacks, while improving your page loading times a lot (but not as much as MaxCDN), then Cloudflare is worth consideration.
Pricing-wise, they have very different models. Cloudflare offers a free limited service, while MaxCDN does not. MaxCDN’s plans are based on how much bandwidth you use, while Cloudflare charges you depending on what features you need.
MaxCDN starts at $9/month for 100 GB worth of bandwidth. Even a terabyte is only $79/month!
Cloudflare’s pro plan starts at $20/month. If you require any of their advanced page speed or security features this increases to $200/month.
Some people like to use both in tandem. You can use MaxCDN as your main content delivery network (where you host your images, JS, and CSS files on a different subdomain), and then use Cloudflare on your root domain to protect against DDoS attacks.
I’ve read a few articles from people who’ve taken this approach, and the general gist seems to be that you’re better off just using MaxCDN. In theory, it’s a good idea, though.
How to Install Your CDN
With both MaxCDN and Cloudflare, getting set up should take less than half an hour.
MaxCDN is a bit more complicated to set up, as it’s a proper CDN service that requires you to create new subdomains to host your content on. Cloudflare, by default, doesn’t do this.
How to Setup MaxCDN
Once you’ve created an account on MaxCDN, you need to create a ‘pull zone’. Here you enter your domain name and your chosen custom CDN subdomain e.g. cdn.ventureharbour.com. Once you’ve created this pull zone you’ll receive a URL that you’ll want to copy into Notepad to use later.
Once you’ve created your pull zone, you need to then create a content zone. Go to your dashboard and click the ‘manage’ button next to your pull zone. Click on the settings tab and then enter some subdomains into the custom domain boxes.
For example, you may want to use something like:
cdn.ventureharbour.com
cdn2.ventureharbour.com
cdn3.ventureharbour.com
cdn4.ventureharbour.com
The next step is to change your CNAME records. Go to your web hosting or domain registration and open up the DNS editor. In the CNAME field, enter the URL that MaxCDN provides (the one that we said you want to paste in your notepad earlier). Repeat this process for all of the CDN subdomains you created above.
If you’re using WordPress, the next step is to configure your files to be hosted on the subdomains. There’s a great guide on how to do this with the WP Total Cache plugin here.
How to Setup Cloudflare
With Cloudflare, you just need to create an account and punch in your domain name. Once you’ve done this, you’ll end up on a page that requires you to add all of your DNS records.
They’re pretty good at finding most of these, but there are usually a handful that they miss, so make sure they’re all in there.
Once you’ve done this, you’ll need to choose your initial settings and payment plan. This is also where you choose what level of security and performance you’d like.
Finally, you’ll reach a page that tells you to change your nameservers. Log in to where you registered your domain name and enter your new nameservers. This can take up to 24 hours, so once you’ve updated these you will likely need to wait for the changes to propagate.
That’s it. All of your website’s traffic is now being passed through Cloudflare’s data centers. This means that Cloudflare can now deflect any traffic that they believe to be suspicious while serving normal visitors a version of your files from the nearest data center to them.
For more tips on improving your page loading speed, I’d recommend this post, where I explain how I improved my page load speed by 70.39% in 45 minutes.
