A Hidden Cache

This last post on WordPress is going to be on caching. WordPress, by its very nature, is dynamically generated using PHP. While this allows us to do very cool stuff, it can also take a heavy toll on a server. It’s not uncommon for a blogger to write a very popular post and end up getting Dugg or Fireballed, which can crush even the mightiest of servers.

So how do you avoid that as a blog developer? Use caching. WordPress has some built-in caching mechanisms, which we definitely want to enable by adding this to your wp-config.php file:

// Enable the WordPress Object Cache:
define(ENABLE_CACHE, true);

For a simple blog, that might be enough. But you’ve kitted yours out with all manner of brilliant plugins, and each one adds more load to the site. So we need some more caching juice than the built-in system can provide. This is where W3 Total Cache comes in.

This bad rider can cache pages as static HTML, minify your CSS and JavaScript, cache database queries, and hook your site into a CDN for some serious speed gains. That last one is really only needed if you’re running a huge site (think Mashable or Smashing Magazine, both of which use W3TC).

But as with many powerful tools, it has a learning curve and requires some setup. After you install it to your site (and if you’re using WordPress 3.0, you’ll want to grab the developer version until version 0.9 is officially released) but before you activate it, you’ll want to set the wp-content folder to be writeable by WordPress, if it isn’t already. Then go ahead and activate the plugin. It will generate some new files in the wp-content folder and create a new folder to house the cache.

Now we want to head over to the settings area for W3TC and configure it. By default, it will cache everything to disk, saving things as static HTML, CSS, and JS files. If you’re on a server that has APC, XCache, eAccelerator, or memcached installed, you set W3TC to use whichever opcode you have installed instead of writing to the disk, resulting in potentially greater speed gains.

You’ll want to go through each of the settings areas, but the place that really can confuse is the minify section. Here, under the JavaScript and CSS portions, you want to copy in the URL of every script and CSS file your site is loading and set whether you want them to load in the header or footer, using either normal or non-blocking (asynchronous) style load. W3TC will scour your pages, find these URLs, and combine these files all into a single, minified file, once for JS and once for CSS. If you’re loading a bunch of JavaScript, this can significantly decrease load time and bandwidth, as only a single lookup and file transfer will occur for every script on your site.

You can even set it to have certain scripts only load on particular templates, which is pretty handy.

Once this is all done, you’ll want to log out to test that the cache is working well, as it won’t be caching anything for admins by default.

You can use the YSlow extension for Firefox to test your site’s capabilities, and see how it stacks up optimization-wise.

Setting up W3TC should help to stave off any issues of bandwidth and speed, resulting in a much more pleasant experience all around.

Tags: Wordpress

This entry was posted on Monday, August 9th, 2010 at 9:00 am and is filed under Design Resources. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.