How to create CDN for WordPress with MaxCDN

Learn how you can easily setup content delivery network with MaxCDN to get a faster loading site with a scalability that you'll need as your traffic grows.

In this post, I'll show how to setup CDN for WordPress with a MaxCDN. In more detail, you'll learn how to create a "content delivery pull zone" for your blog inside MaxCDN and how to setup a CNAME for that CDN (Content Delivery Network).

After these step, the next post continue by going through the steps needed to put W3 Total Cache and MaxCDN work together.

This post will do also if you're setting the CDN for Joomla or Drupal. If that's the case, follow along setting up the MaxCDN side of things, and look into the instructions on MaxCDN site for your platform.

MaxCDN

This post got started when a fellow from MaxCDN contacted me a while back, probably because of my speed related posts and guides, and asked if I'd want to join their affiliate program. They offered me an account to test when I asked, so I took the offer and have used MaxCDN here at the blog for several months after that.

There hasn't been any issues with it, the CDN has worked extremely well and it made this blog even faster than it was (and I believe the effect would be even bigger with not-so-minimalistic design). This isn't a review, but I can say that I'm more than happy with how easy MaxCDN was to setup and how well it has worked for me. With that, I'm confident to write a little guide about it.

MaxCDN is not free, but it's very reasonable priced and comes with 30-day money back guarantee in case you'd just want to test it. Plus the first 1TB that you get for a flat free will last a good while. MaxCDN has worked very well for me and the setup is as easy as it can get (no need to move or upload stuff anywhere), so I'm proud to recommend them with my affiliate link.

But now, don't worry if all that CDN and CNAME jargon at the beginning sounded scary, it's quite simple in the end, especially with these step by step instructions...

1. Get a MaxCDN Account

This step is quite simple.

  • Go to maxcdn.com,
  • click on "Sign Up Now" and you'll be taken to the order form
  • Create a new account.

Go to your email, find the maxcdn account verification email and click the link on the email

2. Create a New CDN Zone for Your Blog

After your account is verified, login to the CDN control panel with your new account

Click 'Manage Zones' from the top-menu

(This is the area you create "zones" for your files)

maxcdn manage zones How to create CDN for WordPress with MaxCDN

Click "Create Pull Zone"

  • Add Pull Zone Name (e.g. blog, this will be part of the long URL provided by MaxCDN)
  • Add your blog URL as the Origin Server URL (where you normally access your site = URL as seen in browser window, e.g. http://example.com or http://www.example.com)
    • Use the final destination URL, e.g. if you redirect www.example.com to example.com, use example.com and vice versa
  • Add custom CDN domain (e.g. cdn.example.com, a sub-domain that will "mask" the temporary MaxCDN URL)
    • Note that you need to create a CNAME record for this custom CDN domain, and I'll show you how in this article
    • The custom CDN domain is like a subdomain of the main domain, but instead of hosting the sub-domain on your server, the sub-domain will be the URL for MaxCDN via CNAME record.
    • The prefix can be anything, but for clarity, you probably want to include the "cdn" in it, e.g. my blog is zemalf.com, so I made my custom CDN domain cdn.zemalf.com. If your blog is example.com, you can make the CDN domain cdn.example.com and so on.
  • Add a label for the zone (e.g. blog's name, this is shown on the MaxCDN dashboard)
  • Enable compression by checking the checkbox (like on a site, gzip compression is a good thing for speed)
  • Click 'Create'

maxcdn how to create a new pull zone How to create CDN for WordPress with MaxCDN

After MaxCDN creates the zone, you'll see a notification like this:

Pull Zone has been successfully created.
Please create a CNAME record for cdn.example.com to blog.example.netdna-cdn.com"

Save the Custom Domain URL and the temporary MaxCDN URL for reference, as we'll need'em soon, e.g. copy-paste the notification with the "Please create a CNAME record..." to a text editor.

In the text file, you should have:

  • Custom CDN URL, e.g. cdn.example.com
  • The long MaxCDN URL, e.g. blog.example.netdna-cdn.com

3. Get the MaxCDN API Key

To set up a content delivery network for your blog, we started by creating an account at MaxCDN and proceeded to create a new Pull Zone in MaxCDN. Next, we need to generate a MaxCDN API ID and Key the W3 Total Cache will use...

  1. Go to MaxCDN and login
  2. Click 'Manage Account'
  3. Click 'API'
  4. Click '+ Add Key' (button on the right)
  5. Enter Description (e.g. "API for W3 Total Cache on example.com")
  6. Select 'Individual Zones'
  7. Select the Pull Zone you just created.
  8. Click 'Save'

You could use the same API for all your sites, and choose Master, but this is the more secure way to do this, and the individual API ID/Key will not be not overused.

Click the 'API' again, and you'll see your newly created API Key there.

Copy-paste the API ID and the API Key to a text-file.

Keep your MaxCDN API ID and API Key safe, no stranger needs to see those. So you and those configuring your websites for you only.

You can always find them from MaxCDN dashboard, but since we'll be putting them into use, it's handy to have'em in a text file. You should now have these saved:

  • Custom CDN URL you setup, e.g. cdn.example.com
  • The MaxCDN URL, e.g. blog.example.netdna-cdn.com
  • API ID (4-5 digit number)
  • API Key for the ID (long string of characters)

Next step is creating the CNAME record for the custom CDN URL.

To do this, jump into your hosting control panel, and create the CNAME record to the MaxCDN URL. That's the one you saved from the MaxCDN message: xxx.yyy.netdna-cdn.com, e.g. "blog.example.netdna-cdn.com".

After creating the CNAME record, using the custom CDN URL (cdn.example.com) will be "the same" as using the long MaxCDN URL (blog.example.netdna-cdn.com), which again, serves the content of the origin URL you created the Pull Zone for (e.g. example.com) via MaxCDN content delivery network.

4. Create a CNAME record for the custom CDN URL to the long MaxCDN

Before you start using the newly created content delivery network, you need to create a CNAME record for the custom CDN URL to the MaxCDN URL.

The CNAME record is done to the main domain. CNAME record, or the "Name", will be the prefix of your custom CDN URL. For example, if the CDN URL is cdn.example.com, CNAME record "Name" is "cdn" (without the quotes). The "CNAME" in the CNAME record is the long MaxCDN URL, e.g. blog.example.netdna-cdn.com.

How you create the CNAME record depends a bit on your hosting provider / domain registrar. Usually CNAME is created on your hosting control panel, where you can manage your domains.

I added instructions below on how to do it with cPanel (e.g. Host Gator and Bluehost) and how to create CNAME record on DreamHost control panel.

If your (uncommonly) using name servers other than your hosting provider, it's possible that you can/must manage CNAMES on your domain registrar. If that's the case, define the CNAME record there.

On hosts with cPanel, like Host Gator or Bluehost:

  • find the Domains section, and
  • click 'Simple DNS Zone Editor',
  • Find the 'Add an CNAME Record',
  • Enter Name = cdn,
  • Enter CNAME = the URL you got from MaxCDN, and finally
  • click 'Add CNAME Record' after filling the values.

To update DNS record on DreamHost...
how to update cname record on dreamhost 1 How to create CDN for WordPress with MaxCDN

  • log in to your account at panel.dreamhost.com
  • click 'Manage Domains'
  • click 'DNS' under your blogs URL
  • Find 'Add a custom DNS record to...'
  • Add "cdn" as Name (or any other prefix you set for the 'custom CDN domain' at MaxCDN
  • Choose 'CNAME' for the Type
  • Add the long domain name you got from MaxCDN to Value
  • Add (optional) comment (I added "maxcdn")

how to update cname record on dreamhost 2 How to create CDN for WordPress with MaxCDN
how to update cname record on dreamhost 3 How to create CDN for WordPress with MaxCDN

After creating the CNAME record, you can wait for a day to ensure all DNS servers are updated with the new CNAME before you start using the custom CDN URL, e.g. set up W3 Total Cache to use MaxCDN.

Check that the CNAME record works before configuring your blog / website.

  • If the CNAME record creation went OK, the Custom CDN URL (e.g. cdn.example.com) now "points" to your blog.
  • You can test if the custom CDN URL opens your blogs front page. If it does, then it's all good.
  • To double check, run the URL through WebPageTest.org or some other service that accesses the URL from otherside of the world.

5. Start Using Your New Content Delivery Network

When the custom CDN URL works, you can access all files in your site via that URL and it will be delivered through the MaxCDN content delivery network.

For example, if you normally open an image from example.com/images/example.jpg, that same image now opens with cdn.example.com/images/example.jpg as well, and it's loaded from content delivery network.

As there is no "special setup", MaxCDN can be used on any website, replacing the normal URL with the Custom CDN URL, leaving the "path" as it was.

In theory, you could go, search & replace the URLs of all static file (e.g. images, CSS- and JavaScript -files, etc.) with the new CDN URL by hand and it'd work just fine. But there's no reason to do that by hand, when you can do it without any of that trouble even when files change.

There are plugins and addons for the most popular platforms, like Joomla, Drupal, vBulletin and Magento. For WordPress, the easiest way to start using MaxCDN is to use W3 Total Cache -plugin, as after setting it up with MaxCDN, it'll get your blog's files served via CDN automatically after you set it up once.

The next post has the instructions for the W3 Total Cache and MaxCDN setup. If you don't have W3TC installed yet, start with my W3 Total Cache guide.

Summary

  1. Sign up for a MaxCDN account
  2. Create a pull zone for your blog at MaxCDN
  3. Get your MaxCDN API Key
  4. Create a CNAME record for the custom MaxCDN URL
  5. Start using your New CDN for WordPress (or any other site/platform you have)
Posted by

Topic: WordPress Optimization
Tags: , , ,

If you enjoyed this post, sign up for updates (it's free)


Feedback, questions and comments are also welcome on my Facebook page