Set WordPress to use CDN with just couple of clicks. No uploading files, no complicated settings. Just W3 Total Cache and MaxCDN. Cake is harder than this.
Setting up a Content Delivery Network (CDN) for a website can be complicated. You might need to upload files to the CDN storage, update all links to point to the CDN, and time-consuming operations. Even with plugins or addons, all that easily takes at least 30 minutes.
I'll show you how setup WordPress CDN in a minute or less.
You do need to first setup W3 Total Cache and create CDN for WordPress with MaxCDN, as instructed in the previous post. Even with all that, it won't take you too long, and more importantly, it'll be very easy. And you only have to do this once.
W3 Total Cache and MaxCDN take care of everything, you don't need to manually change the image or file URLs. You don't need to upload anything to CDN or anything. Just enable CDN in W3TC with MaxCDN. It's so simple that it's pretty damn close to magic if you ask me.
The CDN information W3 Total Cache needs
Before you can configure W3 Total Cache to use CDN, you must have the account details from MaxCDN. (See the previous post)
From MaxCDN, you need
- the custom CDN URL, which required you to create a new CNAME record, and
- the MaxCDN API ID and API Key.
The Custom CDN URL is something like: "cdn.example.com" (without the quotes), depending on how you configured your Pull Zone at MaxCDN. The API ID is numeric ID, e.g. 1234. And the API Key is a string of various characters.
On the previous post, we set up the MaxCDN account and the pull zone for our WordPress blog. We got the API ID/Key and created CNAME record for the CDN. If you followed the instructions on that post, you should now have what you need.
Got the API ID/Key and the custom CDN URL?
OK, here's how to set W3 Total Cache and your WordPress blog to use MaxCDN...
Setting up MaxCDN to W3 Total Cache
1. Go to W3 Total Cache settings on your admin area (Click 'Performance' on the left)
2. On the General Settings -page, scroll down to Content Delivery Network settings
3. Check the checkbox to Enable CDN
4. Choose (Origin Pull) "Mirror: NetDNA / MaxCDN"
5. Click 'Save changes'
You'll very likely see a warning on red: "Content Delivery Network Error: The "Replace default hostname with" field must be populated."
To fix, and get things running...
1. Go to the Content Delivery Network (CDN) Settings
All checkboxes on CDN Settings - General can be checked...
2. Enter the API ID and API Key you saved from MaxCDN to Configuration...
Leave SSL Support as Auto, unless you know better.
3. Enter the new custom CDN URL you updated on the CNAME records, e.g. http://cdn.zemalf.com, into the "Replace site's hostname with:"
4. Click 'Test NetDNA'
If you see "Test passed", all is cool.
(if not, there's probably something wrong with the API ID/Key, or the DNS server has not been updated with the new CNAME yet)
5. Click 'Save changes' to put MaxCDN into action.
And then, one last thing...
- Go to the General Settings -page and
- click on 'empty all caches'
Now if you open your blog, and check the Page Source, you'll see that the minified JS- and CSS-files are served from the custom CDN URL, and also images and files from your Media Library.
All done. Test to see the results
You can also analyze your blog with Firebug / Page Speed / YSlow if you want, but note that they don't necessary recognize your custom CDN URL unless you tell'em. Of course, you will see the benefit in speed, even that the "CDN rating" in YSlow is F for example.
It is also possible that loading speed on individual tests go up. For me, because the site was stupidly fast to start with: full load time went up, but response time for the first byte, the render start and document completely loaded got faster. So getting everything loaded takes (just) a bit longer, but the visitor sees (something from the) page faster, so it's better overall.
However, CDN will even the load on traffic spikes and keep the site fast for everyone, which might not be the case when you don't have the CDN. Also, using CDN will even the loading speeds for visitors from different locations.
- Get your MaxCDN API ID, API Key and custom URL for the CDN (see previous post)
- Enable CDN in W3 Total Cache: (Origin Pull) "Mirror: NetDNA / MaxCDN"
- Enter API ID and API Key you saved from MaxCDN to W3TC CDN Settings
- Enter the custom CDN URL to W3TC CDN Settings