How to Set Up a Content Delivery Network (CDN) for WordPress Sites

Are you interested in improving the performance of your website? What if I told you that you could potentially shave off a few seconds off its loading time? A CDN might be what you're looking for, read on and learn about my experience with setting one up on one of my WordPress blogs.
Share on facebook
Share on twitter
Share on email
Share on facebook
Share on twitter
Share on email

Are you interested in improving the performance of your website? What if I told you that you could potentially shave off a few seconds off its loading time? A CDN might be what you’re looking for, read on and learn about my experience with setting one up on one of my WordPress blogs.

What’s a CDN?

CDN stands for Content Delivery Network. CDNs work by having your media files available on different servers around the world, then sending said files to a visitor depending on which location is closest to the place where the visitor lives. This can lower the number of requests sent to your server to zero at any given moment, as long as the cached files are neither expired nor purged from the network.

When the static contents are served to your website visitors from servers that are closer to them than your web server, the website loads faster, which provides a better user experience and also reduces the load on your web server. Because there are many servers everywhere, it also makes your site impervious to bursts of traffic, because the burst is spread out over literally hundreds of servers.

Should I Install a CDN on my Site?

The short answer to that question in the great majority of cases is a resounding YES. My real life study however will help you understand better how things work and what you can expect.

To better explain some of the steps I took, I also recorded a short screencast which is embedded below, however the post itself contains a few more details.

I decided to do the testing for you, so you can judge for yourself whether a CDN solution is worth going for. For this test, I used one of our media heavy websites, Alyona Travels. Through my experiment I wanted to discover whether installing a CDN will provide tangible speed improvements.

First things first, I ran a speed test for Alyona Travels before choosing a CDN. I used various speed test websites, here are the results.

tools.pingdom.com
tools.pingdom.com
GTmetrix.com
GTmetrix.com
Webpagetest.com
Webpagetest.com

The site had no caching whatsoever implemented, so I then went ahead and installed the W3 Total Cache plugin. This is a very popular and advanced caching plugin for WordPress, but it doesn’t take much time to set up if you know what you are doing.

I enabled the Page Cache, Database Cache and Browser Cache. Make sure you don’t enable Minify, I had all sorts of script loading problems when enabling it and setting it to ‘auto’ mode. You can also use the manual mode but I had little luck with that either. In the end I opted to install another plugin called Autoptimize which takes care of minification very well. Also, be sure not to enable Object Caching if you are on a shared server environment, as it causes issues. I tried it out to see what happens and it slowed down my admin dashboard so much that I had to turn it back off.

At this point I tested things again to check for improvements. I was also interested at the time the page took to load from various locations around the world. This led to some interesting results:

With W3TC - Dallas
With W3TC – Dallas
With W3TC - New York
With W3TC – New York
With W3TC - Amsterdam
With W3TC – Amsterdam

Loading times from outside the US were more than double the ones from the two US locations. 

Location looks like it played a big part in the equation here. I double checked the site’s server location and indeed found that it is hosted in Dallas, which explains why things loaded fastest from there.

geoiptool

Armed with those results, I felt very excited to see the results of the CDN experiment. Hopefully, we could bring all those loading times in line on the lower end.

Choosing a CDN

There are a number of CDN solutions which you can easily find with an easy search on Google. After careful consideration, I chose MaxCDN since I came across them at a number of WordPress events and had some chats with them. They’re a great bunch and I got the impression that they are really on top of their game plus they are very much invested in the WordPress platform. A solid base to start from indeed.

maxcdn

 

Websites I visit and use on a daily basis such as BuySellAds, StumbleUpon and even Webpagetest all rely on MaxCDN, that gives you an idea of how trustworthy and serious these guys are.

Setting Things Up

There are five WordPress-specific pricing tiers with MaxCDN.

MaxCDN Pricing for WP
MaxCDN Pricing for WP

For the large majority of people reading this post, I am sure that the ./plus option will be a great starting point.

After signing up, it’s time to login to our Control Panel and set up our zones.

Control Panel   Dashboard
MaxCDN Control Panel

The most commonly used zone is the ‘pull zone’ and this is used for serving your website’s images, CSS and JavaScript files.

Create pull zone
Create pull zone

With the Pull Zone set up, you now proceed to settings things up in your WordPress dashboard.

The first thing you need to do is install the W3 Total Cache plugin if it’s not already installed.

Next, follow the MaxCDN tutorial to set the W3 Total Cache plugin to work with MaxCDN as its Content Delivery Network. There’s also a video available if you prefer that.

Here are a few screenshots showing you how I’ve set up W3 Total Cache.

W3TC - Page Cache
W3TC – Page Cache
W3TC - Minify
W3TC – Minify
W3TC - Database Cache
W3TC – Database Cache
W3TC - Object Cache
W3TC – Object Cache
W3TC - Browser Cache
W3TC – Browser Cache
W3TC - CDN
W3TC – CDN

After setting things up in the MaxCDN control panel and within the W3 Total Cache settings in WordPress itself, it was time to get some tests done again.

The Results

Here’s the crunch moment, testing the website load times after we implemented the MaxCDN Content Delivery Network service via W3 Total Cache. Again, I tested from various locations.

With W3TC + MaxCDN - Dallas
With W3TC + MaxCDN – Dallas
With W3TC + MaxCDN
With W3TC + MaxCDN
With W3TC + MaxCDN
With W3TC + MaxCDN

The results are clear, we managed to bring down the loading speed of the Amsterdam location, which was the furthest from the server location (Dallas). Since the site has a number of media files (mostly images) they took far less to load from the CDN server located in Europe itself then they had when loading all from the server in Dallas.

In the screenshot below you can see all the MaxCDN server locations.

MaxCDN server locations

With this mission accomplished, visitors to Alyona Travels will now enjoy better loading times thanks to the newly installed MaxCDN service.

Conclusion

If your website has an international audience, installing a CDN is really a no-brainer. It’s worth the small expense when you consider the performance improvements you’ll gain. Most blogs and sites nowadays include a good amount of media files as well as CSS and JS files, so almost all website will benefit significantly from having a CDN in place to serve these files from.

As I said earlier in the post, I recommend MaxCDN and have been very happy with their service as well as interactions with their support stuff. You might be wondering why I didn’t base the case study on WP Mayor itself. The reason is that my hosting package with WP Engine already comes with a CDN (again by MaxCDN) included, so I didn’t have to do anything in that case, the awesome technicians at WP Engine took care of things for me right from the start.

If you have any questions, I’ll be happy to answer your queries, so do leave your comments below.

Table of Contents
Our Sponsor

4 Responses

Leave a Reply

Your email address will not be published. Required fields are marked *

Stay up-to-date with the Mayor
Sign up to receive one weekly email about our latest reviews, tutorials, giveaways and more.