It’s no secret that I’m a big fan of WordPress as a blog and CMS platform. While it does have its problems, it’s relatively simple to set up, it’s extensible, and — when properly configured — it has great performance. The WP Super Cache plugin has been a staple on my WordPress blogs for quite some time and it has solved almost all of my performance problems.
However, when you load up quite a few plugins or a heavy theme, the performance will dip due to the increased number of stylesheets, javascript files, and images. You can compress and combine the stylesheets and javascript to decrease load times, but this may not get the performance to a level you like.
I was in this situation and I found a great solution: the W3 Total Cache plugin and the MaxCDN service.
To get started, visit MaxCDN’s site and set up an account. Their current promotion gives you 1TB of CDN bandwidth for one year for $10 (regularly $99). Once you sign up, do the following:
- Click Manage Zones
- Click Create pull zone
At this point, you’ll see a list of form fields to complete:
- Enter an alias for the pull zone name
- The origin server URL is the URL that’s normally used to access your site (i.e. rackerhacker.com)
- The custom CDN domain is the URL you want to use for your CDN (i.e. cdn.rackerhacker.com)
- The label can be anything you’d like to use to remember which zone is which
- Enabling compression is generally a good idea
Once you save the zone, MaxCDN will give you a new domain name. You’ll want to create a CNAME record that points from your CDN URL (for me, that’s cdn.rackerhacker.com) to the really long URL that MaxCDN provides.
STOP HERE: Ensure that all of your DNS servers are replying with the CNAME record before you continue with the W3 Total Cache installation and CDN setup. If you proceed without waiting for that, some of your blog’s visitors will get errors when they try to load content via your CDN domain.
You’re ready for W3 Total Cache now. Install the plugin within your WordPress installation and activate it. Hop into the settings for the plugin and make these adjustments:
- Enable Page Caching and set it to Disk (enhanced)
- Enable Minify and set it to Disk
- Enable Database Caching and set it to Disk
- Leave the CDN disabled for now, but flip the CDN Type to Origin Pull (Mirror)
- Press Save changes
Click CDN Settings at the top of the page and configure the CDN:
- Enter your CDN domain (for me, it’s cdn.rackerhacker.com) in the top form field
- Leave the other options as they are by default and click Save changes
W3 Total Cache should prompt you to clear out your page cache, and that would be recommended at this step. If you fully reload your blog’s main page in your browser (may require you to hold SHIFT while you click reload/refresh) and check the page source, you should see your CDN URL appear for some of the javascript or CSS files.
You may discover that some CSS files, stylesheets, or images aren’t being loaded via the CDN automatically. Luckily, that’s an easy fix. Under the Minify Settings section of the W3 Total Cache plugin settings, scroll to the very bottom. Add in your javascript or CSS files via the form fields at the bottom and the plugin should handle the minifying (is that even a word?) and the CDN URL rewriting for you.
Further reading:
Seems like it give you trouble on your website, I see that on the side of your page :
Warning: gzuncompress() [function.gzuncompress]: data error in /var/www/html/rackerhacker.com/wp-includes/http.php on line 1824
Chmouel – That was actually my fault. I broke one of my widgets and forgot the fix it. ;-)
Curious, why are you setting the caching to Disk? Why not set it to memory which should be much faster, assuming you’ve got the memory.
Adam – I chose to use the disk caching because APC has given me some problems from time to time. Also, the performance gain from using APC was negligible over the disk caching.
With that said, I didn’t try the memcache caching, so I can’t vouch for any performance benefits there.
Great plugin & Easy CDN.. Thanks!!
You’re welcome, Tim.
Thanks for posting this nifty step-by-step how-to.
Little confused by the pull vs. push thing. If the CDN pulls, doesn’t that mean that it’s using a polling interval to grab content and therefore is not-real time. Alternatively, wouldn’t push mean that the site would push changed files to the CDN on demand?
George -
It confused me a little at first, too. It’s an on-demand pull. If someone sends a request for http://cdn.rackerhacker.com/style.css, the CDN provider will pull the latest copy from rackerhacker.com the first time. Subsequent accesses will just pull from the CDN only until the data expires.
If you update something on your site and you need to CDN to pick up the change, you can flush the file from the CDN on their website.
Push CDN’s require you to upload your content to them when you make changes, and that requires some extra work that I’d rather not do. :-)
On cdn will be stored just css and images ?
i want to know if html cached files by total cache are stored on cdn or will be loaded from your site.
thanks
[...] time. Apakah benar begitu? bagi pengalamannya Referensi yg saya baca : W3 Total Cache Plugin WordPress + W3 Total Cache + MaxCDN How-To | Racker Hacker __________________ belajar wordpress Blog Download Software [...]
I’m curious why you are using MaxCDN and not your own Rackspace Cloudfiles?
Alex: The plugin rewrites the URL for static content (images, css, javascript, etc) only. Your HTML will still be served by your server.
David: I’m a big fan of Cloud Files, but I didn’t want to upload my content to Cloud Files regularly each time I updated it. The pull CDN allows me to do a lot more of it automatically. I still use the Cloud Files + CDN regularly, but just not for this purpose.
Thanks Major. Could you quickly give me the differences between Cloudfiles and MaxCDN? I’m an old Mosso customer and am looking to setup this cache method but I’m not sure why MaxCDN works better than Cloudfiles for this application.
David: For Cloud Files, you have to upload your items first before they can be served via the CDN. MaxCDN has a feature where they will pull content from your site as it’s requested by your visitors (this is a “pull” CDN). Once they pull it, they’ll hold onto it and cache it for you until it expires or until you tell them to remove it.
Cloud Files is designed not only to store things, but it’s designed to serve them out when you need it. MaxCDN is not meant for storage, but they serve out content for you from multiple locations.
Major, do you reccomend turning on HTML minify? I see by default it’s disabled.
[...] configuration, they can be easily mitigated W3 Total Cache, makes it easy to use either system, including most pull systems, and enables [...]
[...] Mashable, and some other WordPress “killer hacks” and “whacks” just for you.WordPress + W3 Total Cache + MaxCDN How-To – Racker Hacker – My geek is totally turned on. Combining WordPress with W3 Total Cache and MaxCDN – [...]
hi hayden,
iam using cpanel/WHM
how can i create CNAME?
its asking me to create cname to create like cdn.site.com to cdn.username.netdna-cdn.com
can you please explain me how to do that in WHM?
Hello Seenu,
1. Log into your WHM (need root or reseller privileges that allows u to edit DNS)
2. Select Edit DNS Zone
3. Click on your domain name that you wish to add the CNAME
4. Enter something like below:
cdn CNAME cdn.yourcdnprovider.com.
Notes:
a) remember to add a “dot” after cdn.yourcdnprovider.com.
Click save and wait few minutes for DNS propagation. Sometimes u may need to restart your computers to clear your DNS cache.
Thanks for easy step-by-step setting. Do you reccomend turning on Object Cache Settings?
Do I need to create that specific subdomain (aka cdn.mywebsite.com) in order for it to work as the “pretty link” in which my files are coming from? Or can I just enter it in without having to configure the subdomain?
Thomas –
You’d need to ensure that you have the DNS record created for the subdomain, but you could set it up as an alias of your current domain. For example, I have the following line in my apache virtual host for rackerhacker.com:
ServerAlias cdn.rackerhacker.com
thx man.. I needed this!
[...] For a full rundown on how to CDN your WordPress in conjunction with W3 Total Cache, check out a quick and dirty tutorial courtesy of the Racker Hacker dude. [...]
[...] Other Reviews: human3rror, nerdgrind, rackerhacker [...]
[...] and make your site faster!Here are some links to the buzz and tutorials:BrentOzar.comTechnozeast.comRackerHacker.comWPVedia.comWPBeginner.comDrupal CDNDrupal is an open source content management platform. MaxCDN is [...]
Many Thanks for posting this nifty step-by-step how-to.
Little confused by the pull vs. push thing. If the CDN pulls, doesn’t that mean that it’s using a polling interval to grab content and therefore is not-real time. Alternatively, wouldn’t push mean that the site would push changed files to the CDN on demand?
Mediasiana – A pull CDN will retrieve the media from your site upon the first access. After that, it will keep serving that cached copy until your TTL expires or you manually flush the CDN cache. Pull CDN’s are handy because they pick up data from you only when necessary.
Push CDN’s require you to upload all of your data to the CDN servers first before the data can be served by the CDN. After that, you have to ensure that you upload all new content to the CDN when it needs to be served. I’m not a fan of push CDN’s because it requires more work from me. ;-)
How do i configure the plugin for if i have enabled multisite ? The multisite sites are not sub domains rather folders.
they are like
x.com/1/
x.com/2/
x.com/3/
so what is the best way to use the plugin and settings
http://good-trip.com.ua/wp-content/themes/good-trip-Pmag/images/n_header_right_foto.jpg Сайт о горнолыжном туризме, у нас вы найдете статьи о зимном отдыхе. Окунетесь в мир туризма.
thanks so much for this post! I prefer pull cdns to push cdns.