wp 150x150 How to Setup MaxCDN on WordPress using W3 Total Cache Plugin [WPMU Tutorial]

Wordpress CDN

CDN or Content distribution network is a set up of various system around the globe containing the same content and when any client request a webpage, it is delivered from the nearest possible location. This helps user to get the data fast and put less load on main server. If you have a blog which got good traffic, you should try CDN on your blog/Websites. Specially when Google officially made the announcement that website speed will be one of the major factor in search engine ranking, CDN is the need of time. Many major blog/Services like mashable, Buysellads are using CDN to optimize their site speed and to keep your site up with high traffic volume.

In this guide we will be setting up maxCDN in our WordPress MU and will be using W3 Total cache plugin.

Starting today, we have configured one of our high traffic blog Devils’ Workshop to serve “static content” using MaxCDN, a CDN service. Soon all of our blogs will be using CDN for faster loading of site.

There are few more reasons for our use of CDN and we also find it economical. More about these points can be discussed on some other day.  At the moment, I would like to share steps I have gone through to get CDN working for us.

So here we go…

1. Get an “Origin Pull” CDN account

There are many ways in which CDN can be configured. Most easy, simple-to-use and highly transparent is “Origin Pull” CDN mode. It is also called “mirror” CDN. Again, why I am stressing on “Origin Pull” CDN in this article will be discussed some other day.

The “Origin Pull” is very easy to use and just in case you want to say bye-bye to CDN in future for some reason, all you need to do is deactivate CDN support from w3 Total Cache plugin.

Shockingly, rackspacecloud or amazon cloudfront do not offer desired kind of CDN setup.

We choose MaxCDN as they offers “Origin Pull” CDN.

2. Create “Origin Pull” zone with MaxCDN

  1. First, login to you MaxCDN account.
  2. From MaxCDN dashboard menu, jump to “Manage Zones” option. Then click on “Create Pull Zone” option. (see screenshot)

1. Create Pull Zone MaxCDN 590x382 How to Setup MaxCDN on WordPress using W3 Total Cache Plugin [WPMU Tutorial]

3. On next screen enter few things needed to create a pull zone.

  • Pull Zone Name: This can be anything. It just needs to unique, without spaces, 3 char long. Much like username field.
  • Origin Server URL: Exact link to homepage of your wordpress blog. Include “http://” as well as trailing slash(/).
  • Custom CDN Domain: Optional. Recommended for branding. Use any unused subdomain like cdn.example.com
  • Label: Optional. Can be anything describing this zone. MaxCDN allows you to create many (maybe unlimited) pull zones.
  • Compression: Enable this as this will save usage if bandwidth on your account.

Below is a screenshot showing values we have used for http://devilsworkshop.org/

2. Pull Zone MaxCDN 590x409 How to Setup MaxCDN on WordPress using W3 Total Cache Plugin [WPMU Tutorial]

4. Once you click “create”, if all goes well you will see a success message like below.

3. Pull Zone MaxCDN 590x189 How to Setup MaxCDN on WordPress using W3 Total Cache Plugin [WPMU Tutorial]3. Creating a CNAME record

When you see “success” message, technically your CDN is ready for use. But if you care about branding part and wanted to use a subdomain of your own, you must create a CNAME record and also verify that this newly created CNAME record is being reflected worldwide.

While steps to create a CNAME record varies for different domain registrar you can use a service like just-ping.com (review) to verify if your CNAME record is created successfully.

Once you become sure that your CNAME record is successfully created, jump to next step.

4. Configuring w3 Total Cache with CDN

There may be many wordpress plugins for CDN but w3 Total cache is very simple to use. You can use w3 Total Cache for CDN only, just in case you are using other caching plugin as well. We use Wp Super Cache for page caching and now w3 Total Cache for CDN and minifying scripts.

To configure your wordpress to use CDN you have created in above steps, first install w3 Total Cache if its not already installed.

Next, go to “Settings >> w3 Total Cache” options page. You will land on “General Settings” page.

Just scroll down to “Content Delivery Network” settings menu. (see screenshot below)

4. W3 Total Cache General Settings CDN 590x214 How to Setup MaxCDN on WordPress using W3 Total Cache Plugin [WPMU Tutorial]

Enable CDN and select “Mirror” as CDN Type. Click “Save Changes” button.

You will be next prompted to configure “Replace default hostname with” field under “CDN Settings”. (see screenshot below)

5. W3 Total Cache CDN Settings 1 590x285 How to Setup MaxCDN on WordPress using W3 Total Cache Plugin [WPMU Tutorial]

Click on “CDN Settings” and you will see a new set of options.

Jump to “Replace default hostname with” field and enter subdomain value you have created CNAME for in above step. (see screenshot below)

6 W3 Total Cache CDN setup 590x410 How to Setup MaxCDN on WordPress using W3 Total Cache Plugin [WPMU Tutorial]Click on “Save Changes”. At this point, your CDN has been setup.

Verify if CDN setup is working

First, clean all caches you may have on your wordpress from w3 Total Cache or Wp super cache or any other caching plugin.

Next, visit your blog from front-end and check image URLs. Image URLs must being with CDN subdomain rather than actual domain of your blog.

For example:

http://devilsworkshop.org/files/2010/05/just-ping-service-2-600x236.png

will become

http://cdn.devilsworkshop.org/files/2010/05/just-ping-service-2-600x236.png

Feel free to use comment form below, in case you get stuck! icon wink How to Setup MaxCDN on WordPress using W3 Total Cache Plugin [WPMU Tutorial]

Links: Signup for MaxCDN | w3 Total Cache | Just-Ping.com