jgillman's Liquid Web Update Unofficial tips, tricks, and happenings from a Liquid Web sales engineer

10Jul/121

Using Liquid Web’s CDN with WordPress via W3 Total Cache

For those who don't know, W3 Total Cache is one of the most used performance enhancing plugins for WordPress. It offers many different options to speed up your WordPress site, whether it be through object caching via memcache, to minification of Javascript and CSS files.

It also offers easy integration with a feature that globally visited sites can benefit from: Content Delivery Networks

What's a CDN?

A content delivery network is used when you want to reduce latency for static content (such as images, CSS files, Javascript files, downloads, etc) for a worldwide audience. It does this by caching content on a server that is as physically close to them as possible. The diagram below gives a rough idea how such a network looks:

CDN Diagram

There are two primary methods that facilitate content transfer to the CDN: Origin Pull and Origin Storage.

Origin Pull
With Origin Pull, content is added to the CDN when it is first requested. So for example, the image you see here got added to the CDN when it was first requested:

This is the method that I utilize for this site.

Origin Storage
With Origin Storage, true caching isn't being performed, as files are uploaded prior to access to the CDN itself. This is usually facilitated via FTP. If this site were using Origin Storage, I would have had to upload the file to the CDN before you would have been able to see it. Fear not, though, W3 Total Cache makes this easy for WordPress.

For more information on Liquid Web's CDN offerings, take a look here.

Meanwhile, in W3 Total Cache Headquarters...

Now that you have the basics of how a CDN operates, and how you might use it, let's take a look at how W3 Total Cache can greatly (emphasized enough?) ease the integration process with WordPress.

Step 0
Step 0 (taking a queue from the laws of thermodynamics, of course) is to order a CDN account. This article focuses on Origin Pull, but Origin Storage will work just as well.

After you order the account, you'll be asked a few questions from our Networking team (again, this is for Origin Pull). I will be using this site for example responses:

  1. What's the primary domain that will be cached? In this case it will be lw.rrfaae.com
  2. Is there a specific path you want content pulled from? In the case of lw.rrfaae.com (or any W3 enabled site utilizing Origin Pull), the answer would be no.
  3. What is the supername that you would like to use to access the CDN? Theoretically, this can be anything, but for this site, it would be cdn.lw.rrfaae.com
  4. Do you require multiple supernames? In my case, I didn't need it.

After you answer these questions, you can go ahead and create the CNAME record. It is in the form of [supername].yourdomain.tld IN CNAME [supername].[yourdomain.tld].c.footprint.net.

So for lw.rrfaae.com, this is the CNAME record:

cdn.lw.rrfaae.com. IN CNAME sourcecdn.edgesuite.net.

Step 1
Once you have the CDN account all setup, the next step is to, well, install and activate W3 Total Cache (if you haven't done that already). It's pretty straight forward, so I won't worry about covering that step here (feel free to hit up the comments if you have questions though).

Step 2
The next step is to setup W3 Total Cache to use the CDN.

First is open up the settings page for W3 Total Cache.

They say a picture is worth a thousand words, so I'll take that advice for a good portion of this section:

if you are using Origin Storage, you would select "Self Hosted / FTP Upload" for the CDN Type.

Now once you click save, you'll probably have W3 Total Cache complaining:

In the infinite wisdom of Douglas Adams:
Don't Panic

To fix this, go into the CDN settings page for W3 Total Cache:

Note that W3 Total Cache supports using multiple CDN cnames for various content items, such as CSS or Javascript. This will be shown when you click "Add CNAME". For our purposes though, you can just enter the single CNAME you created, and that will work for everything.

Once you enter your CNAME, click "Save All Settings".

Once you do that, up at the top you'll be prompted to Deploy your changes:

Once you deploy, you are all set!

Step 3
Once you have deployed, you can confirm that your site works. If the CNAME wasn't configured properly (or mis-entered in the settings), you'll basically get a nice, white, ugly page with just text.

If the page loads fine, and you still want to confirm, you can look at the source (or use another tool) to verify the images/other resources are using the CDN:

Conclusion

That's it! Your WordPress site is now utilizing Liquid Web's CDN.

If you have any questions, don't hesitate to give us a call, or leave a comment down below!

Comments (1) Trackbacks (0)
  1. Using the WP via W3 Total Cache makes CDN easy!


Leave a comment


*

No trackbacks yet.

FireStats icon Powered by FireStats
Optimization WordPress Plugins & Solutions by W3 EDGE