This guide was written after I completed the process of hooking up MaxCDN to my Digital Ocean hosted WordPress blog.
This wasn’t a straightforward process, partially due to my own errors and partially because I was using WP Super Cache which I’m pretty sure just doesn’t cooperate with MaxCDN for reasons I may never understand. However, I now have it working so here’s my guide to everything I did.
Why I wanted a CDN: To speed up my top money-making property, which is also my slowest because it’s got long articles and lots of images.
I chose MaxCDN because it seemed to have a lot of good reviews and at about $10/month was reasonably priced.
Setting up MaxCDN with W3 Total Cache and a custom CNAME on Digital Ocean
I signed up and was disappointed to see that the URL MaxCDN gave me by default included the business name I used when I signed up. I wanted cdn.mysitename.com, but by default MaxCDN gave me cdn1.mybusinessname.netdna-cdn.com. MaxCDN calls this the “branded domain” and you can use it as-is, but I would guess most people want to customize it.
My business name and my website name are not the same and I didn’t want to expose the former in the latter. (They don’t tell you they’ll use your business name this way when you sign up, nor do they let you change it once you opened your account. Ugh.)
Fortunately, you can set up a custom domain and use that instead, and my steps below include that process.
Step 0: Set up a pull zone. MaxCDN has good documentation on pull zones.
Step 1: Enter your custom domain into the pull zone settings. Go to Pull Zones > Settings and fill in the Custom Domains field with cdn.yoursitehere.com (or cdn1.yoursitehere.com, or whatever you prefer. The important thing is that all three parts of the url are present.)
Step 2: Get into Digital Ocean’s record management. Inside Digital Ocean’s droplet management page, go to Networking and then go to Domains. Click the magnifying glass next to the domain you’re adding this CDN to to get into its records. More help adding/editing domain records in Digital Ocean.
Step 3: Add a CNAME record to your droplet’s domain. If you want cdn1.yourdomain.com, fill the form out like this:
- Enter Name: cdn1
- Enter hostname: cdn1.yourdomain.netdna-cdn.com (the “branded” domain that Digital Ocean gave you by default)
Be sure to click the Create CNAME Record button to actually add it to the list of records.
Step 4: Wait about 20 minutes for it to propagate.
You can watch it propagate here: https://www.whatsmydns.net/#CNAME/cdn1.yourdomaincom
Assuming nothing else is conflicting (you didn’t leave your DNS hooked up to CloudFlare like I did, you don’t have a competing www.yourdomain.com record like I did, etc), this should happen in 20 minutes or less.
Step 5: Now you can hook it up in your WordPress caching plugin! MaxCDN has docs for setting up MaxCDN with many different WordPress caching plugins here.
At first, I was using WP Super Cache and every time I turned on the CDN feature my site’s styling and images disappeared. I fought with this for a while, got good and frustrated, then tried W3 Total Cache like MaxCDN suggests and WOW – it was like night and day. I followed MaxCDN’s tutorial and basically, it just worked. Be sure to whitelist your site’s IP (go into Terminal or command prompt and ping www.yoursite.com to get your site’s IP if you don’t know it, or look in Digital Ocean’s droplet list).
If you’re having a problem with WP Super Cache making your styles and images disappear with MaxCDN, try W3 Total Cache instead.
Step 6: Verify it works by loading your site
If everything’s working, you should be able to load your site (yoursite.com) at its usual url (not the cdn url) and look in the network tab of your browser to see responses coming in from the CDN url (cdn.yoursite.com).
Fast way to check: right click any image on your site and view it in another tab. Its url should be your cdn’s url.
If you don’t have any images, you can see this in Chrome by right clicking to Inspect and then click over to the Network tab before loading your site. Hover over some resources (like .css resource) and you should see cdn1.yourdomain.com.
You should also start to see improvements to your page’s load time immediately.
If you don’t see the changes right away: While the cdn1.mysite.com changeover was observable right away on the computer I was working on, it wasn’t on my laptop. The cause seems to be the computer’s own DNS settings. By switching my laptop’s DNS settings to Google’s, I was able to see the most up-to-date (ie: not cached) version of the website.
How to use Google’s public DNS on your Mac or Windows machine: https://developers.google.com/speed/public-dns/docs/using
(Alternatively, waiting a while – up to a day – should resolve it with no changes to your computer.)
Pingdom results, before and after MaxCDN
Here’s a couple of “before” load times on my website, taken less than a minute apart and both from New York City. The thing I often notice on Pingdom’s Website Speed Test is how much variance there can be in load time across multiple tests when all other factors remain the same (location testing from, time of day, etc).
Site speed: before
Here, there’s a huge difference in load time just on these two “before” tests.
The kind of extreme difference in load time seen above is why I like to run several Pingdom tests when collecting my “before” data before making a change that I think should effect load time. Here’s another test, this one from San Jose, California.
Site speed: after
Whoo! Look at that, down to <2 seconds since turning on MaxCDN:
Here’s an even faster one, best one I saw in my several tests:
And one from San Jose:
So far I like MaxCDN. Their online support is very responsive. I sent a detailed plea for help on a Sunday afternoon in the U.S. and had a (reasonably) customized response within an hour. Their documentation is plentiful and thorough. They include many examples and their screenshots are up-to-date with their current interface.
The real test will be in seeing if getting the site speed down to ~2 seconds has any noticeable effect on the site’s Google rank and total conversions (sales).
CDN Traffic Boost?
Totally unscientific study here, but my site’s traffic pulled out of a slump as soon as my CDN hookup went live. (March 17 is just beginning as I post this update.)
Relevant MaxCDN docs and tools:
- Check if it propagated yet at whatsmydns.net – change yourcdnprefixhere.yoursitenamehere.com yours in the url bar
- MaxCDN Tutorials – it’s huge and worth a skim just to see the stuff you can do with MaxCDN
- MaxCDN’s ping test for comparing yoursite.com vs. cdn.yoursite.com – use with the default url they give you or use it with the custom domain you set up once it propagates