Blog Building: How To Dramatically Speed Up Your WordPress Site with W3 Total Cache

Awhile back, I wrote about 4 of the best caching plugins for WordPress. Sorry folks, if you are not using WordPress, this is not for you. Else, you should be publishing your site via WordPress. Anyways, of the 4 I featured, I settled for the one that I felt was the most robust and had the least potential conflicts. That is none other than W3 Total Cache, developed by Frederick Townes of W3 EDGE, and current CTO at Mashable!

W3TC was initially developed for use at Mashable. Being a mega site as it is, you can pretty much expect the plugin to be robust and highly configurable else it would just be another useless piece of code. To cut to the chase, whether you have a WordPress blog where you ramble on about goodness knows what like I do; or have WordPress as a CMS powering a corporate or product site; again like I do too, speed is perhaps one of the more important aspects for you. Though WordPress is lean and mean, like most other things, it gets a little bulky and build up a belly over time.

The reason for the above could be due to various factors like overheads and ever growing databases, too many plugins loading, huge image and video files etc. Though there are plugins to target your WordPress database like WP-Optimize or WP-DBManager (Lester is S’porean like me so I use his plugin… YEAH!), these require a user action every so often. If you do not click ‘optimize’, having the plugin installed does not mean you have the fastest site online. A caching plugin like W3 Total Cache comes in handy here since all you need to do is to set it up right and it will work in the background.

I had W3TC installed for a couple of months now and I have to say that it has done what it said it would do so far. So I am happy. The only thing was I never got down to using the more advanced options like Minification and CDN. All I had was Page and Database Caching setup which was pretty straight forward. Well, I decided to figure out how to Minify my CSS and JavaScript files and at the same time setup a self-hosted CDN. Now, self-hosting a CDN may not come close to what external services may provide you for a price, but I figured i give it a go and see how it turns out. No costs involved, just a heck load of time.

Now, like most peeps, I am no web developer. Yeah I do try to messed around with some HTML and lately CSS codes to customize my own themes. other than that, I am not your guy for developing even a ‘hi, how are you?’ JavaScript. I prefer to leave that to the experts. I have to admit that the installation instructions for W3TC could have been clearer. Still, after some trial and error and googling, I think I have got the setup going. That I know because I have dramatically reduced the load time of my sites by up to 50%. See the screenshots below.

nimopress.com - W3TC with Page and Database Caching On/Off/On

The above screenshot is a full page load test at pingdom.com for nimopress.com with basic W3TC options for Page and Database Caching. You can see that without W3TC, it used to take between 11.11 to 14.66 seconds to completely load this site. All thanks to being a plugin whore and the number of oversized images here.

• Turning on W3TC and the site loads in 6.73 seconds.
• To be sure, I turned it off, emptied my cache, loaded the site again and we took 12.14 seconds.
• Again, I emptied my cache, turn W3TC back on again and the page loaded up completely in 6.7 seconds.

The next screen shot below is a full page load test at pingdom.com for nicholasmong.com with full W3TC options including Page and Database caching, Minify and self-hosted CDN fully configured.

• With everything turned off, it took 13.58 seconds to complete a full page load.
• The longest time ever was 14.66 seonds.
• With everything turned on, it recorded the fastest load time of 3.77 seconds.

nicholasmong.com - W3TC with Page + Database Caching + Minify + CDN

Now, bearing in mind that nicholasmong.com has

1. A lot more images
2. Works on a parent + child theme setup
3. One big ass video screen on the home page (950 x 534)
4. Not using web safe colors
5. Not W3 Markup validated
6. Serves Adsense
7. Runs the notorious OpenX
8. Runs Disqus Comments
9. Runs Facebook Connect
10. Countless JavaScript calls and queries

I know it could be a lot worst but to completely load the full home page in anything under 4 seconds is pretty darn amazing! To be fair, I am still playing around with minification and the longest it takes right now is about 5-7 seconds.

For those of you who are as intimidated by W3TC’s installation instructions, I got a step-by-step idiot’s guide below. As usual, you need to install the W3 Total Cache plugin like any other plugin and activate it. Once there, you can start configuring it. I suggest you put your site under Maintenance Mode or put up a Changing Room curtain while you are at it. this may take awhile depending on how far you want to take this.

Step 1: General Settings

Simple and straight-forward stuff, just set to suggested settings by the developer. If you see any page cache, database warnings on the top of your screen, ignore those for now.

• Page Caching Method: Disk (enhanced)
• Minify Caching Method: Disk
• Database Caching Method: Disk
• CDN Type: Self-hosted (File Transfer Protocol)

The CDN part is what takes most time to setup. Make sure you check the ‘Enable‘ boxes and save your settings.

Step 2: Page Caching Settings

Leave everything as recommended. Check and make sure you recommended settings are as follows.

• Maximum lifetime of cache objects: 3600 seconds
• Garbage collection interval: 3600 seconds
• HTTP compression: gzip (good)
• Don’t cache pages for logged in users – unchecked for now
• Cache the home page – checked
• Cache RSS / Atom feeds (site, post, post comments) – checked

For setup reasons, we do not want to cache pages for logged in users. That way, we can see if we are breaking any codes later. Once we are done, we can check that box again. Once done save your settings and move on.

Step 3: Database Caching Settings

This is not the next item on the menu selection but we can set this up first since it is rather straight-forward too.

• Maximum lifetime of cache objects: 180 seconds
• Garbage collection interval: 3600 seconds
• Don’t cache queries for logged in users – unchecked for now

Again, save your changes and move on.

Step 4: CDN Settings

Honestly, this is the fun part. The example below is for self-hosted CDN (cPanel). for S3 Amazon or other stuff, you can follow the guide and figure the rest out yourself.

• FTP hostname: localhost or 127.0.0.1 – no need for (http://www.)
• FTP username: yourftpusername – your should know this
• FTP password: yourftppassword – your should know this too

At this stage, you should have created a sub-domain to serve as your CDN on your hosting server. If you have not, login to your web host or server, and create a sub-domain. Name it anything you want but I prefer something that makes sense. In my case, here is what I did.

• Login to web host control panel (cPanel)
• Under ‘Domains‘ > ‘Subdomains‘
• Type in static and select top domain (i.e. static.yourdomain.com)
• Your ‘Document Root‘ should point to ‘/public_html/static‘ (you can name it to something else like static-domainname1, static-domainname2 if you have multiple setups for multiple domains.)

Once done, go back to W3TC and add the following on the CDN Settings page.

• FTP path: static.yourdomain.com (or whatever you named it under ‘Document Root‘ i.e. static-domainname1 or static-domainname2)
• Use passive FTP mode: checked
• Replace default hostname with: static.yourdomain.com (this is the sub domain you created)

Click on the ‘Test FTP server‘ button and if you see that your passed the test in green, you should start uploading all your files.

• Upload include files
• Upload theme files (if you are using a child theme, you need to copy your parent theme into the CDN Document Root as well)
• Upload minify files
• Upload custom files

Scroll your page up to the top and click the following buttons.

• import attachments into Media Library and CDN
• export media library to CDN

Once done, save your settings and move on.

Step 5: Minify Settings

First, make sure that the following settings are correct.

• HTTP compression (gzip): checked
• HTTP compression for MSIE6: checked
• Rewrite URL structure: checked
• Automatically upload modified files: checked

Next, save your settings and clear whatever page, minify, cdn and database cache warnings. Easiest way to do this is by going to General Settings > empty all cache. You need to come back to the Minify Settings page after that.

Step 6: Minify – JS and CSS file management

This is the part that becomes more time-consuming and could break your codes. That was the reason why we ‘unchecked’ the 2 options. There will be a fair bit of adding lines and checking to see if your site is loading up correctly. For a start, the simplest way of explaining minification is the removal of ‘white space’ and ‘line breaks’ in your JavaScript or CSS files.

Without Minification

/* Sets up basic grid floating and margin. */
.column, div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6,
div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12,
div.span-13, div.span-14, div.span-15, div.span-16, div.span-17, div.span-18,
div.span-19, div.span-20, div.span-21, div.span-22, div.span-23, div.span-24 {
  float: left;
  margin-right: 10px;
}

/* The last column in a row needs this class. */
.last, div.last { margin-right: 0; }

/* Use these classes to set the width of a column. */
.span-1 {width: 30px;}

With Minification

.column,div.span-1,div.span-2,div.span-3,div.span-4,div.span-5,div.span-6,
div.span-7,div.span-8,div.span-9,div.span-10,div.span-11, div.span-12,
div.span-13,div.span-14,div.span-15,div.span-16,div.span-17,div.span-18,
div.span-19,div.span-20,div.span-21,div.span-22,div.span-23,div.span-24
{float:left;margin-right:10px;}.last,div.last{margin-right:0;}.span-1{width:30px;}

With the removal of white space and line breaks with minification aims to fine-tune your JS and CSS files. This is to push it further and speed up read times on your site.

The files that should go into the JS and CSS file management will usually come from your theme folder. A good way of picking out JS and CSS files that you can minify is to do a full page load test at http://tools.pingdom.com/. I will pick out all files I can to minify. Copy and paste the URLs of the files as you see them on pingdom into the JS or CSS fields is required. I will always select to minify and call the scripts in the ‘Footer‘. The reason for doing so is ‘Footer‘ components load the last on your site. Thus placing the calls here can significantly speed up your site by allowing other bits on your site to load first. Unless the first choice does not work, I will set to ‘Footer (non-blocking)‘, ‘Header‘, and ‘Header (non-blocking)‘. If all else fails, then perhaps the file should not be minified in the first place. As far as I know, ‘Footer‘ works fine for all my minification.

As a general recommendation, try not to minify JS and CSS files for your plugins. There is a high chance it could break the codes. JS and CSS file for types of plugins that should never be minified include:

• Gallery Plugins – i.e. FancyBox for WordPress, NextGen Gallery etc.
• Multimedia Plugins – i.e. Wordtube, WP YouTube etc.

Doing so will surely break your slide show and video codes. If you do find that you broke a code somewhere, just remove that line. Just as a tip, commenting plugins like IntenseDebate, Disqus and Facebook Connect plugins are extremely ‘Fat’. Though it will be nice if you could minify them but most of their JS and CSS files are located off server. Meaning on theirs, not yours so you can minify nothing. Best rule of thumb, if it bugs you, do not use these and any other plugins with API calls leading back and from their sites. I have never use this but I presume Twitter types might be another such plugin but perhaps leaner.

The JS files that I am managing with Minify are all the JavaScript files found in my active themes folder plus a couple of plugins. As for CSS files managed with Minify, strictly my theme style sheet and nothing else. I hope you find this article useful. Some screenshots below for visual examples. Once you are done, stuff that you ‘unchecked‘ earlier, you can now ‘check‘ them again.

Download: W3 Total Cache

This entry was posted on Thursday, February 18th, 2010 at 14:42 and is filed under pressed and tagged with conflicts, cto, cut to the chase, dbmanager, goodness, mashable, optimize, overheads, sorry folks, townes. You can follow any responses to this entry through the RSS 2.0 feed.