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:

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”

Video Tutorial

If you don’t like the video or need more instructions, then continue reading.

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.

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.

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.

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

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.

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.

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:

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.

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.

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.

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.

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.

Get $10 off on OIO Publisher, a robust ad management plugin for WordPress. View this Deal »

About WPBeginner

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).