Setting Up a WordPress CDN (Content Delivery Networks) for Beginners

network-cables

Last week I saw Will presenting on technical issues associated with SEO. One of the key issues he presented on was site speed. Specifically, the cost of ignoring site speed as a performance and revenue indicator. Will’s own experiences of Distilled’s performance issues (mostly resolved by implementing Cloudflare) were a stark reminder of the importance of building at least a basic knowledge of CDN (content delivery network) implementation.

Why bother with site speed?

Because it costs money not to. A nicely summarised roundup by SmartInsights reported on research showing a dramatic decline in conversion as page load times increases to 4 seconds:

dramatic decline in conversion as page load times increases to 4 seconds

We already know there’s a strong business benefit to improving site speed, it’s possible to see figures as high as 1% conversion rate loss for every second in site speed squandered. I presented at a large retailer network company head office on Thursday, comparing the time to render taken by a search result page at Google, Amazon’s home page and their flagship retail site:

page load time comparison

Assuming a directly proportional relationship between page load and conversion rate, the potential gain for this site is obvious.

How does a CDN work?

Put simply, a CDN caches all of the objects on your site (for instance; images, JS files and CSS files) and serves them from a location that is usually closer to the request location. This should mean that visitors see a faster page load. By hosting all of your static files on a CDN, it’s fair to assume there’ll be a perceived increase in page load, especially in locations far from your own hosting (assuming the CDN has good coverage there).

MAXcdnI wanted to learn about CDN implementation, so I opened an account with MaxCDN. SEOgadget’s static files are now being served from “cdn2.seogadget.com”.

The end to end set-up process should have taken around 10 minutes. There was a little complication owing to SEOgadget being an SSL site, but I’m pleased to note that MAXcdn will work with your own SSL certificate, provided that you have a wildcard certification that will certify any subdomain (for example: *.seogadget.com).

How to configure WordPress with a CDN

Firstly, open an account with your CDN provider of choice. In MAXcdn, create a new “pull zone”:

create new pull zone

You can name the zone anything you like, in our case, “SEOg”. Set the “origin server URL” name to match your domain name and enter your intended custom CDN domain (the location from which your static files will be. Don’t worry, you don’t have to do anything with DNS just yet:

new pull zone at MAXcdn

After you’ve created your new pull zone, you’ll see this message:

our new pull zone is live

Take a note of the two domains, your custom domain (cdn.yourdomain.co.uk and the pull zone location generated by MAXcdn – seog.seogadget.netdna-cdn.com). Now head to your DNS control panel:

(This assumes you’re using CPanel to manage your domain a, cname and MX records via your web host. We use TSOhost’s nameservers and SEOgadget has been hosted with them for a long time. If you’re not using CPanel, you’ll have to follow slightly different steps to get to the DNS zone editor at your registrar - it’s very easy though, so don’t be put off if this is new):

Select “Advanced DNS Zone Editor” and the domain you’d like to edit, here:

finalising DNS

Protip: Yoast uses more than one CDN address serving JS and CSS separately. This (I think) has the benefit of asynchronous downloading of those files.

Configure MAXcdn with W3 Total Cache

W3 Total Cache is our caching plugin of choice. It’s easy to use, fast and reliable. What’s most powerful about the plugin is compatibility with several well known CDN service providers. Here’s how to set it up with MAXcdn very quickly:

W3 Total Cache general settings CDN

Firstly, select “NETDNA / MaxCDN”. Don’t enable just yet, just click “Save all settings”. Next, head to the CDN configuration from the options along the top of the settings page.

CDN config in W3 total cache 2

You’ll see a space for your CNAME, so complete that and fetch the API key from MaxCDN here:

api config in maxcdn

As soon as you’re done, click “Save all settings” and select “Test NetDNA” to make sure all is well. The outcome should look like this:

This makes a great weekend project – give it a go!

I quite enjoyed getting SEOgadget set up with a proper CDN. The process is not without its pitfalls – especially if you happen to use SSL to serve your content. Still, with a little perserverence and background reading, it becomes relatively simple (and extremely interesting). The main limitation I faced were problems related to multiple subdomain names (cdn.*, cdn2.*, etc) because of the SSL certificate. We have a wildcard certificate that wasn’t validating easily in the MaxCDN interface. To save time and hassle I elected to creating a separate certificate which was fine for one subdomain but not for multiple addresses.

The performance panel provided is initially very interesting. We’re now serving the US far more locally, (so I might expect our latency to be vastly improved in the US) but, we’re serving the UK and all of Europe from Amsterdam. I suspect that overall performance won’t be improved much in the UK. My initial tests certainly make me feel the improvement locally is marginal, but still improved.

CDN performance

I used Pingdom tools to evaluate overall object loads and got some initially interesting results from New York, with one exception to the observation that we appear quite a lot quicker:

results

Initial data is almost irrelevant though, so I’ll be watching Google Analytics (site speed report, segmented by country) for a reduction in page loads from our main traffic generating sources over the next few weeks. I’m hoping for an improvement across the board, and certainly no increases in the UK:

analytics page load

I’ve set up a basic alert in Google Analytics to inform me when there’s a week on week decrease in page load – it’s not terribly granular, so we’ll see what happens:

page speed alert in GA

A few useful sources

I’d like to recomend you take a look at these (extremely useful) blog posts:

http://rackerhacker.com/2010/02/13/wordpress-w3-total-cache-maxcdn/

http://devilsworkshop.org/maxcdn-setup-on-wordpress-using-w3-total-cache-plugin-wpmu-tutorial/

http://yoast.com/articles/cdn-wordpress-maxcdn/

http://support.netdna.com/knowledgebase/installing-custom-ssl/

Image credit: Yi Shiang

Setting Up a WordPress CDN (Content Delivery Networks) for Beginners, 5.0 out of 5 based on 1 rating

Comments

  1. David

    Nice detailed post, i did always mean to get around to doing a detailed post on my progress. I’ve had a fair bit of success with Amazon Cloudfront lowering load times from 10-15 seconds down to 4-6 seconds and a further improvement with a drop to 2-3 seconds by moving to VPS.net.

    I did use the multiple subdomains to get a nice boost in load times, but also if there is a blip sometimes CSS or Images don’t load correctly first time. I’m sure that Amazon may not be the fastest on the market but it’s surely cost effective.

    The next step I’m looking at is moving to a true CDN provider to get than extra improvement in page load time. Some of the other improvements would be to remove “Facebook” and “Google AdSense” for that instant boost…

  2. Richard Baxter Post author

    Thanks for dropping by David! Yes, I have to admit it takes time to unpick who provides what in the CDN industry. My biggest “gap” I suppose is linking performance by geo-location to a service provider than has strong coverage in those areas, so I’m really trying to find a service that is cost effective, but can reduce load times in my key traffic markets.

    It’s really interesting work! This will without a doubt improve our process for making CDN recommendations during SEO projects, too.

  3. David

    Ah yes Amazon would be great if they offered an easier way to use their edge locations depending on users location, i think there is something kinda in the works but certainly that will be the big move in 2012.

    I know VPS.net seems to be the most aggressive in the international expansions but I had options of London,Amsterdam or USA as the asia-pacific locations aren’t ready for all VPS services just yet. Certainly want to look at integrating CDN into more projects but will think that’s something more for side projects at this stage.

  4. Modesto

    Another great post Richard!

    Greatly appreciate the fact that you published it on a bank holiday :)

  5. Dan Bochichio

    Very nice post/summary. I’ve been meaning to setup a CDN for one of my main sites but keep putting it off, I’m still curious to know how much of an impact it would actually have, my site loads fairly fast currently (very well optimized for loading + W3 Total Cache also.)

    I’ve got CDN on my list of things to setup for the Summer, here’s hoping that I actually get it done

  6. Richard Baxter Post author

    Hi Dan – I’ve put a follow up in the calendar around 2 weeks from now. That should give us a solid feel for the pros / cons.

    I can tell you now though – in the UK a 90k image loads .5seconds faster via a direct URL rather than via the CDN in the UK. It sort of bothers me that I’m trading one very fast web connection in the UK for one that’s probably less exciting in the UK but consistently OK everywhere.

    Richard

  7. Jonathan

    Good tutorial.

    I recently setup a CDN (jumped on Yoasts MaxCDN offer post) on my tennis blog. Also hosted at Tsohost courtesy of your recommendation in a blog post a long time ago!

    Turned out to be a lot simpler than I imagined and support was top class.

    MaxCDN + Cloudflare + W3 Total Cache has so far worked seamlessly.

    Although I will add it’s not clear cut on the benefits, and even though I haven’t had chance to run any specific tests, based on visiting my own blog via several PC’s it doesn’t appear to be stupidly quick in the UK. Looking forward to reading your Pro’s & Con’s post because of that.

  8. Richard Baxter Post author

    I thought the same – aren’t cloudflare and maxcdn essentially the same service? Using both in tandem sounds really interesting but I’d love to know how and why!

  9. im seo Alan

    I was trying to explain to a client the other day the importance of having a site load quickly, I must click off a few sites every time I’m shopping online because they take forever loading, and if I’m doing this I’m sure Google will be too?

  10. Modesto

    On the slide comparing loading times from Google, Amazon and your client’s site, all 3 tests were ran from different locations (Amsterdam, Dallas, New York). Wouldn’t that lead to wrong conclusions or is there some other reason for that choice?

  11. Richard Baxter

    As with all posts; I advise my readers to go and do the tests themselves. For Amazon and Google the location really doesn’t make enough of a difference to care. MaxCDN happens to have nodes in those cities and I think the switching between locations was merely a product of testing the CDN nodes on SEOgadget properly. Obviously there’s a bit more to my work on this than just this post. I’m planning to do an update, so thanks for the reminder.

  12. Tony

    Hi Richard,

    I have a SEO related question. If I implement a CDN for a WordPress site, will the site suffer in terms of losing image traffic because the images are being served from a sub domain on the CDN network rather than being served from my site. Is there a way where I could count the traffic that has been generated from the related CDN network?

  13. home

    Woah! I’m really digging the template/theme of this blog. It’s simple, yet effective. A lot of times it’s challenging to get that “perfect balance” between usability and appearance. I must say that you’ve done a amazing job with this. Also, the blog loads super fast for me on Internet explorer. Excellent Blog!