Setting up a CDN for WordPress is confusing. I often hear this from people who want to make their WordPress site faster. And I can completely relate to what they’re saying. When I first tried setting up a CDN on my WordPress site a few years back (before I was hired by MaxCDN), I was a little lost too.
Having not known much about CDN at the time, I probably should have just contacted the provider’s support team. But hey, like many website owners, I like tinkering and figuring things out on my own.
Eventually, with the help of tutorials, I installed CDN on my WordPress site. But looking back, I think having a real world setup example would have made things easier on me.
So that’s what I’m going to give you today. I have uninstalled MaxCDN on my website and am starting fresh. Just get a free MaxCDN test account here, then follow the three steps below to make your WordPress site faster.
This is going to be easy – and fun.
Step 1: Claim Space on MaxCDN’s Network
After buying a package or setting up your free test account, follow steps via email until you gain access to your MaxCDN Control Panel. Once you have access, what you’ll want to do is claim space for your content (images, files, etc.) on our network. This “space” is called a zone.
Click on Zones > Create Pull Zone, then create your pull zone using your WordPress site’s homepage URL. (You can call the zone anything you want, even something as simple as “cdn”.)
After clicking on +Create, you’ll be redirected to your pull zone’s summary page. Here you will see the URL of the zone you created. This is your CDN URL:
As you can see, the CDN URL is formatted like this: zonename.lastnameorcompanyname.maxcdnslegacyname-cdn.com. Pretty long and un-sexy, huh? Well thank god for CNAME. It will help you pretty up this beast and align it with your personal or company brand.
CNAME records allow you to set one domain name to point to another domain name.
Step 2: Pretty Up Your CDN URL
Would you agree that fast.robertgibb.me is cooler than maxcdn.gibb.netdna-cdn.com? If so, you’ll want to set up a CNAME. If you don’t, the URL bar will greet people like this when they come across your content:
To make myself – and the rest of my file URLs cooler – I’ll have to get replace the standard CDN URL with something short and sweet. How about fast.robertgibb.me? That way people will know they’re still in the right place (robertgibb.me), and the word” fast” makes sense because it’s a CDN file.
After you think of a custom domain name you want, go to Zones > View Pull Zones > Manage Settings, and put that domain into the Custom Domain Settings box. (This custom domain is essentially a mask for your ugly CDN URL.)
To form a true connection between this pretty URL and the CDN URL, we have to create something called a CNAME DNS record. Don’t worry, it’s actually quite easy. We provide all the necessary steps here (do this first) and give you simple instructions for testing if it worked here (do this next).
After you do this and follow the instructions in the third step below, you’ll have a spiffy URL like this for your CDN content:
By this point, you should have done two things: reserved space for your content on MaxCDN (pull zone) and created the URL you want for CDN-enabled content (custom domain).
If you’ve done this, I recommend testing the current performance of your website before officially enabling MaxCDN. This will give you a rough idea of the site speed MaxCDN offers, even though speed is just one of the many benefits of CDN.
Use the Pingdom tool to get a baseline reading. I tested my site speed from Pingdom’s Amsterdam location and here were the results:
2.06 seconds isn’t bad at all, but what happens when you put content on Amsterdam’s side of the Atlantic Ocean if your main server is in the United States? Things start to get interesting …
Step 3: Enable MaxCDN Using a WordPress Plugin
This is the most important step. But because it requires working in the platform you’re familiar with – WordPress – it’s also the easiest step. All you have to do is pick the plugin you want to use (I used WP Super Cache) and insert your custom domain in the appropriate field.
Here are some MaxCDN integration plugins in order of popularity:
To test that you’ve successfully integrated MaxCDN using your chosen WordPress plugin, go to your website and right-click on the page. Select View Page Source or your browser’s equivalent, then press Command+F if you’re using a Mac.
If you’re not seeing your custom domain in the source code, run through the WordPress-CDN tutorial again and refresh your browser. See it now? If you still don’t, go ahead and contact our support team. We’ll help you fix the issue in a few minutes.
MaxCDN and WordPress: A Perfect Match
So how does it feel to have a MaxCDN-powered WordPress site? It should feel good, because, quite honestly, not enough people know what a CDN is. My 25-year-old self included. (I’m 27 now.) But seriously, you’re riding the edge of web performance technology. Let it soak in. Feel smart.
Sure, a lot of people have a WordPress site, but very few have high performance WordPress sites. How high is that performance? Well let’s find out.
Using the Pingdom tool again, run a test from the same location you did before for accurate data. When I ran a performance test with MaxCDN enabled on my WordPress site, these were the results:
That’s about a 160% improvement in page load time just from implementing MaxCDN!
However, when I first did this “with-CDN” test, I didn’t see that sexy 796ms number. So if you’re not seeing a number that’s lower than the one in your “without-CDN” test, don’t worry. You just have to “warm the cache.”
See, before MaxCDN caches content on an edge server, the edge server must receive two requests. Only on the third request do we store the content and start serving it. So, in order receive your site’s true speed, simply run the Pingdom test three times. The third request will be the most accurate.
Is the difference sensational? If so, I’d love to see it.