Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Install and Setup WordPress CDN Solution – MaxCDN on your Site

Last updated on by
Elegant Themes
How to Install and Setup WordPress CDN Solution – MaxCDN on your Site

After our redesign, WPBv4, we spent some time doing performance optimization (still some work left to do). After doing some optimization, we saw a major performance improvement on the site. It was noticeable enough that our users emailed us asking about it. We’ve heard your requests, and a complete guide on what we did to speed up our site will be up very soon. Even though we had covered how to install MaxCDN in our tutorial about W3 Total Cache, we have made some additional changes since then. In this article, we will show you how to install and setup MaxCDN in WordPress.

Here is the email we got from one of our users:

“…the main reason I am contacting you is to ask about site speed. How on earth you manage to speed up your site so fast? The speed is insane and I just loved it.”

We did numerous tests using a site called Pingdom. The fastest load time of our homepage was just 483ms. We ran the test numerous times (different hours and datacenters). Our load time range on the homepage was 483ms – 1.7s. Below is one of the screenshots:

WPBeginner Speed Screenshot of Pingdom

A lot went into the performance optimization (reducing HTTP queries such as loading scripts only when they are needed, combining scripts and stylesheets, optimizing images etc). But one of the main components that makes our website load fast and keeps us from crashing is a great WordPress CDN. We are using MaxCDN, and you can our MaxCDN review in our Blueprint section where we explain why we use MaxCDN. If you don’t know what is a CDN or why you need a CDN, then you should check out or infographic “What the Heck is a CDN“.

Now having that said, in order to follow this tutorial, you MUST have a MaxCDN account. It’s very affordable and well worth the money. If you don’t have an account, you can sign up now. You can get 25% off using our MaxCDN coupon “wpbeginner”

Once you have created your account with MaxCDN, you need to install this free WordPress plugin called W3 Total Cache.

First thing you need to do is login to your MaxCDN account and create a “Pull Zone”. To do this, click on the Manage Zones button and then click on “Create Pull Zone” icon.

MaxCDN Create Pull Zone

On the next page, you will be asked to enter the details for your new Pull zone.

  • Pull Zone Name: This can be anything without spaces, minimum 3 characters long. Think of this as your username.
  • Origin Server URL: Enter the URL of your wordpress blog. Must have “http://” and the trailing slash(/).
  • Custom CDN Domain: Use any subdomain for example: cdn.wpbeginner.com
  • Label: This is like a description field. It is optional to add a description.
  • Compression: We recommend that you enable this as it will save the usage of bandwidth on your account.

MaxCDN Pull Zone Details

Once you click create, you will see a success screen. In that green box, you will have a URL for your CDN. It will look something like “wpb.wpbeginner.netdna-cdn.com”. Let’s copy this URL and save it in your notepad. We will need to use it in later steps. If you go to your dashboard, you will now see the zone that you have created. Click on the “manage” icon.

Manage MaxCDN Zone

Next, you need to click on the “Settings” tab and look at the custom domains.

MaxCDN Zone Settings

The goal here is to add multiple subdomains (CNAMEs), so we can improve pipelining performance in the browser. To do this click on the edit button on Custom Domains, and simply add multiple custom domains.

MaxCDN Multiple Subdomains

Once you have added the custom subdomains, then simply click update. In the Compression settings, make sure you enable GZip compression.

Now that you have configured your pull zone, take the long CDN url that you got in previous steps which looked like this “wpb.wpbeginner.netdna-cdn.com”. We are going to need this to set CNAME records. We will show you how to create the CNAME record using cPanel. Most WordPress hosting providers are using cPanel. Login to your cPanel, then scroll down to the Domains Section and click on Simple DNS Zone Editor.

Simple DNS Zone Editor in cPanel

On this page, you will need to fill out the fields to Add an CNAME Record. The two values you will be required to fill are: Name and CNAME.

  • Name: This is the name of your Custom CDN Domain. For example, our custom CDN domain is cdn.wpbeginner.com, so we will put “cdn” in our name field.
  • CNAME: This will be URL provided to you by MaxCDN when you created the pull zone. For example: “wpb.wpbeginner.netdna-cdn.com”.

Example screenshot:

Add a CNAME Record

Repeat this process for all the custom domains you will add. The CNAME value will be the same. All you are changing is the name to like “cdn”, “cdn2″ etc. Adding the CNAME method may be different if you have a non cPanel host.

Now that you have configured MaxCDN, lets go ahead and integrate it with WordPress. We will need to use the W3 Total Cache plugin. Install and activate the plugin. On the General screen, if you scroll down, you will see the CDN box. Enable CDN and select NetDNA/MaxCDN option.

W3 Total Cache CDN

Save the settings. Now, you will need to go to CDN menu in W3 Total Cache to configure MaxCDN with WordPress. This page will ask you to enter your API ID, API Key, and your custom domain names.

W3 Total Cache MaxCDN Integration

You can get your API ID and Key from your MaxCDN Dashboard. If you go Manage Account » API. Click on add key, and create your key.

How to Get MaxCDN API Key

Once you configure the W3 Total Cache part, you are good to go. You can click on the Test NetDNA button, and you should be able to get Test passed.

Want to speed up your WordPress? Well, then we recommend that you start using a CDN service like MaxCDN. Use the MaxCDN coupon “wpbeginner” to get 25% off.


Editorial Staff at WPBeginner is a team of WordPress lovers led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »
  • Abhishek

    Great tutorial! I was looking for how to add multiple CNAME’s and your post really helped. Thanks a lot!

    -Abhi

  • Ranbir

    Hi syed,

    I wanted to ask you whether using cdn also changes the path of your image files and whether it will be good to use it on a site with too many images. Will it be good for image seo as google will find suddenly that so many images path has been changed. please let me know, as i am very confused.

    • http://www.wpbeginner.com Editorial Staff

      The images are always stored on your web host. So no you don’t have to change anything. W3 Total Cache will take care of the mirroring process. This does not hurt your image SEO at all.

      • Ranbir

        hey thanks,

        So I should not concern about it. I appreciate your help buddy. Thanks :-)

  • http://www.facebook.com/profile.php?id=100003085233226 Chris Fewings

    How do MaxCDN and Cloudflare compare?

    • http://www.wpbeginner.com Editorial Staff

      We don’t know. We have been using MaxCDN since day 1 (before Cloudflare launched).

  • Akshay

    I deleted my pull zone setting/records, now when am again trying to configure it again, it says techvogue.techvogue (my cdn address i guess) already exist . please suggest what can i do to configure and run my cdn successfully.?

    • http://www.wpbeginner.com Editorial Staff

      You can always rename the zone. The zone name holds almost no value.

  • Michael

    Hello, I’ve been thinking about implementing a CDN. But once you activate it, what exactly is it caching/storing? Can you select which things are cached by the CDN and which aren’t?

    How about images? It’s great that it speeds up images loading, but with multiple CNAMES, how do you know the address of the image, for the sitemap for instance. If one image loads on cdn1, and then another on cdn2? Are the image urls static, or do they change on refresh or depending on load?

    Thanks

    • http://www.wpbeginner.com Editorial Staff

      The sitemap will contain the normal image URL. This is mirror caching, so all content is stored in your server. The CDN’s are just mirroring it. MaxCDN caches your static content (images, CSS, JS)

  • Jan

    Can you use 1 MAX CDN Account for more then 1 domain / wordpress site ? If yes how ?

    Jan

    • http://www.wpbeginner.com Editorial Staff

      Yes, you can use it for more than one site. Simply create multiple zones. Repeat the process listed above for as many sites as you want.

  • Gautam Doddamani

    thanks i was in a confusion whether to purchase a cdn or not. since i have a lot of images on my blog…i think cdn is necessary on the whole and the only cdn i have heard a lot about is maxcdn mostly because joost devalk talks a lot about it, although cloudflare is a good choice too if you are going for a free option!

  • Ahmad Awais

    Nice guide !
    I am having issues with W3Tcache pluign. My server is litespeed server and when I activate W3tcache plugin my css vanishes away.Blog is left with html only.ANy suggestions?

    • http://www.wpbeginner.com Editorial Staff

      Try turning off your Browser Cache. I honestly have no idea why it will do it. Frederick would probably know better. But I read a response from a year ago where he suggested that a guy turns off browser cache.

      -Syed

    • Aizal

      Maybe in W3TC, try disable minify as I experienced it once turning minify screwed up my site’s layout. You have to be careful with that.