Overhauling WordPress Performance

October 7th, 2010

After launching my new site last week, I’ve wanted to take some time to step back and look at front and back-end performance. As some wise twitter sage recently said, “Simple + Measurable = Successful.” I couldn’t agree more.

Simple Tools

So we need simple tools to speed up our site. Luckily, WordPress is blessed with the W3 Total Cache plugin. This one plugin handles everything from caching to minifying JavaScript and CSS to setting e-tags and proper expiration headers. Basically, it handles all the necessary front-end and back-end performance tweaks in one place!

Initial Measurements

We also need a way to measure our progress. For testing, I’ll use Apache Bench on the back-end and Yahoo! YSlow and Google Page Speed on the front-end.

Apache Bench

So lets take a look at the Apache Bench results from an uncached page, without any JavaScript minification (CSS minification is in place for this test).

Screenshot of Apache Bench - Initial Results

Page Speed

Now let’s take a look at our results from YSlow and Page Speed.

Google Page Speed - Initial Results

YSlow

Yahoo! YSlow - Initial Results

Discussion of Initial Results

Wow, 77.663 seconds to serve 1000 requests, for a whopping 12.88 requests per second. Now, I’m not getting flooded with traffic. But if I ever did, lets just say that wouldn’t work. The site needs some serious tweaking on the back-end.

With regard to the front-end, Yahoo! thinks I’m pretty swell and deserve an A, while Google thinks I’m a C student. So there’s a bit of work to do here as well. My biggest target is reducing HTTP requests from multiple JavaScript and image files.

The Fix

W3 Total Cache is truly amazing. All you have to do is enable the plugin, check on the types of caching you’d like to do, and it handles almost all the usually annoying stuff for you. It caches pages onto the hard disk or memcached. It can concatenate and compress JavaScript and load it in a blocking or non-blocking manner. It can set all the proper headers and etags for ya. It does all the database and object caching.

The only part which requires some careful configuration (as I learned tonight) is the JavaScript minification. I thought I nailed the correct settings, deployed said settings, and found I had broken my site! So, take a bit of care when playing with the JavaScript minification, and it’s probably best not to operate on your site live as I was doing!

That’s it. Sure, I did a bit of work on my CSS files, simplifying them and concatenating + compressing them. But overall, I let W3 Total Cache do all the heavy lifting. So, what are the results!?

Final Results

Once again, we’ll look at Apache Bench, YSlow, and Page Speed.

Apache Bench

Apache Bench - Final Results

Page Speed

Page Speed - Final Results

YSlow

YSlow - Final Results

Conclusion

So, with one simple plugin, and a bit of CSS work, I’ve gotten amazing results. On the backend, it took only a quarter of a second to deliver 1000 requests. That’s 300x faster than our initial run! Requests per second went through the roof as well, from 12ish to around 3800. Unreal. The plugin certainly did it’s job on terms of backend performance.

In terms of front-end, not too shabby. Really, my CSS was already mostly minified and concatenated, so the only gain I really got was taking 11 HTTP requests for JavaScript down to 1! That boosted my Google Score to a solid B, and Yahoo gave me a bit of love as well, bumping my A up by 4 points.

The last thing I need to do is run SpriteMe! on my page to reduce the number of background images being requested. That, and going cookieless for static content, and my site will be about as good as I can get it on a shared hosting service!