Two great tastes that taste great together.
A match made in heaven. For a long while using a CDN (Content Delivery Network) was something only the big boys did. The CDN market was pioneered by Akamai who remain one of the major players, and companies like Akamai tend to want to deal with other big companies.
For a long time this type of arrangement put the use of a CDN out of reach for the average net user. But these days there are numerous CDNs for every conceivable type of content. Video, images, CSS and JS files, you name it, it’s out there. Still though using a CDN is sort of a pain, you have to either upload all your content to the network, or configure the network to pull it automatically from you but then you have to go and change each and everyone of your URLs.
Luckily, WordPress users have an elegant CDN solution in the form of W3 Total Cache and MaxCDN. Let’s dig in a little and see what exactly a CDN is, how you can set one up, and how you can make it work for you.
CDN? Is that like CNN?
In a strange way sort of. CNN broadcasts to a satellite and then is picked up by receivers the world over. The broadcast then travels through different networks until it finally reaches your television. Or someone else’s television clear across the country, clear across the world. And it does this rather quickly at that!
A CDN works in a similar way except you are the one doing the ‘broadcasting’. Images, javascript, css files, static html pages, and more can put automatically ‘broadcast’ out to the CDN. The CDN then distributes this content to different servers through the globe. Then rather than linking to the content stored with your blog you rather link to the content stored on the CDN.
Due to some internet magic called anycasting when a user from Los Angeles accesses your CDN content they will be sent to a different server than someone who accesses your site from London. In point of fact, they will access the server closest to them. This drastically reduces loading times for all viewers of your CDN content. As a bonus, this content no longer is providing a drain on the resources of your own blog. All the bandwidth used is carried from the CDN network, not your own.
Sounds neat but it seems like a lot of work…
It can be but it doesn’t have to be. Rather than having to upload all this content manually CDN providers like MaxCDN provide a clever option. Using something called a ‘Pull Zone’ you can set up a special URL that actually points to the CDN and not your own blog. When a user accesses this URL the CDN will check and see if it already has the file being requested. If it does, great, it returns that file. The cool part is if it doesn’t have that file yet it will automatically download it from your site and then serve it. So you never have to actually upload anything manually at all.
But we still have a problem. Once we create this special URL how do we tell WordPress to replace all our links with links to our special URL? Enter W3 Total Cache.
W3 Total Cache automates the entire process. After installation and configuration all the content you want on the CDN will automatically have their links changed to point to the CDN without any further effort on your part.
How do we set that up?
Well first we need to install W3 Total Cache which is installed like any other WordPress plugin. After installation we’ll see a new menu in the WordPress Admin area called Performance. W3 Total Cache provides extensive caching capabilities for your blog and I highly recommend you explore all the options the plugin gives you.
For now though we’re interested in two primary areas. We will need to first enable the CDN support from within W3 Total Cache and then we will need to configure it. W3 Total Cache supports any generic pull zone and several push zones which operate in the opposite way of a pull zone (your blog itself handles the uploading to the CDN). However, W3 Total Cache provides special support for NetDNA/MaxCDN. MaxCDN provides an API that lets W3 Total Cache take care of the pull process and that is one of the strong reasons using this with W3 Total Cache is so seamless.
The first thing we’ll need to do is create ourselves a MaxCDN account. You get a terabyte of bandwidth for a very reasonable price with the deal they are running so now is an excellent time to jump on the CDN bandwagon. Once you have the account we will need to create a pull zone for our blog.
In the MaxCDN control panel click on Manage Zones. This will take you to a screen where you will see the panel above. We need to create a new pull zone so let’s click that button.
Fill in the appropriate information for your blog. The pull zone name and label can be largely what you want. I suggest you enable Compression as well. The Custom CDN Domain is actually optional but provides a nice branding opportunity we’ll come back to this later. Once complete we’ll click Create and MaxCDN will automatically set everything up for us.
Back to the custom domain for a moment. After you create the Pull Zone if you go to the Manage Zones tab and view your zones you can view settings for your newly created zone. If you cannot create CNAMEs on your domain name you must use the displayed URL instead. Otherwise create a CNAME on your domain and make sure it points to that URL. A final piece of information you can get by going to the Manage Account tab and then the API sub tab. You will see your account number and api displayed. You will need these in order to finish configuring W3 Total Cache.
The first thing we need to back in WordPress is open the General Settings tab and enable W3 Total Cache. Then in the CDN section we need to both enable it and choose the NetDNA / MaxCDN option for the CDN Type. Once these steps are complete we can move forward and choose the ‘CDN’ option from the Performance menu.
There are many advanced options that we can play with but for now let’s focus on the general settings. These checkboxes will let you decide which general type of content you want to use a CDN for. Unless you have a specific reason otherwise there is no great harm in simply selecting all of the options and saving the changes.
Lastly we need to input our API ID and Key in the configuration panel on the same page. These let W3 Total Cache perform much of it’s automated functionality. I recommend keeping SSL support on Auto. Finally if we set up a custom CDN we input it in the provided field, otherwise we put in the NetDNA domain we found in the Pull Zone settings on the MaxCDN site. Click Test NetDNA to make sure the connection can be made successfully and then save the changes.
And that’s it! Your blog is now using a CDN. Take some time to look at the advanced options available on this page. You might want to add the wp-content/uploads folder to the folders being managed by the CDN. Also some plugins don’t take kindly to being cached and from the advanced settings panel we can disable CDN pulling for single files or entire directories.
This setup is extremely simple and robust. It’s a credit to both W3 Total Cache and MaxCDN that such a powerful solution is readily affordable and simple to setup.
Connect with Me