Dominique Stender Good software is only the beginning…

Optimize your Wordpress Blog Performance

The famous blogging software Wordpress has always been my tool of choice when setting up a blog-like website. The usability of the backend and the number of available themes and plugins make it ideal if you want to see quick results.

However, when it comes to SEO and bandwidth optimization and standard compliance many of the plugins fall short and require some additional attention. The good news is that usually many plugins are available to scratch a single itch. Picking the right one often avoids many glitches.

Social network plugins and social bookmarks

I want to reach out to people with this blog. This includes enabling my honored readers to quickly share my articles with their community through the various social networks.

TweetMeMe Button and Facebook Share are two plugins that put nifty buttons in your blog that include counters to boast about how many people shared your content. Both are really great and work perfectly, but I encountered some issues due to which I removed both from this website after a test period of a couple of days.

I had to remove the TweetMeMe Button simply because it loads content from the tweetmeme.com server which is currently very slow, thus slowing down my website as well. There is nothing the author of this plugin can do about it I guess.

Facebook Share on the other hand was removed because it uses an id="" attribute for the button it displays, even if the button is on the page multiple times. Since this is violating W3C compliance this plugin had to go, too.

In addition to that, both plugins cause my layout to look a little bit messy and 'cheap', which I try to avoid. Again, that is nothing that can be fixed by the plugin authors since it is just my personal opinion. I really liked both plugins but these minor glitches made me move on to...

Tweet This - CSS sprites

I found another nice extension for social bookmarks called Tweet This. The author Richard X. Thripp did a really great job on this, offering bookmark icons for not one but many social networks. That covers my bases.

However I enhanced this plugin slightly in order to utilize CSS sprites for the social bookmark icons. My friend Chris recently talked about CSS sprites on his blog SwiftLizard.com. Here is the concept in a nutshell:

If you display ten icons on your website the traditional way the browser has to request ten files from the server - one for each icon. Since usually browsers do only a handful of requests at a time this slows down your website. With CSS sprites however, you can utilize CSS and one single graphic containing all icons to achieve the same effect with only one image being requested. This results in website response times that are much lower, thus enabling a smoother surfing experience.

Further optimization of Social bookmarks [added]

Since I posted this article I further enhanced the way I handle social bookmarks in this blog, you might want to check that out.

WP Super Cache

The plugin WP Super Cache almost needs no introduction. Written by Donncha O. Caoimh it enables us to circumvent PHP completely and serve static content in many cases. Naturally, this is much faster. The plugin is a must for anyone taking performance seriously. WP Super Cache alone reduced the initial response of my blog (time-to-first-byte) by 80%.

iPhone and mobile browsers

As the owner of a technology related website I believe it is reasonable (and my access statistics seem to agree) to believe that some of my visitors will visit the website from a mobile device such as the iPhone or a Blackberry. While technically the layout I chose for this blog looks ok in my iPhone, there is a lot of clutter that I don't want to wait for on my mobile device.

Thankfully there is a plugin called WPtouch which displays the blog in a highly stripped down but yet good looking manner when viewed with a recognized mobile browser. Not only do mobile visitors get their content faster by removing clutter, the usability is also highly increased. Perfect.

Combining JavaScript and CSS files

Similar to what I said earlier about many images slowing down a website, the same is true for many JavaScript or CSS files. Regardless of the file type you should keep your number of requests as low as possible. With Wordpress and its many plugins that is next to impossible though, unless you want to rewrite every plugin you install.

But there is hope. What CSS sprites achieve for icons, the Head Cleaner plugin does for JavaScript and CSS files. It can combine all JavaScript files into one and do the same for CSS. Further, JavaScript can be minimized and both file types can be compressed, reducing not the number of requests but the bandwidth as well.

Image size

This is a classic. Double check the images you have on your website for size - the size measured in bytes, not pixels. If you're not sure how to reduce images byte-wise, there are online services like the one on dynamic drive which can guide you (and save you lots of manual trial-and-error time).

General rule of thumb is that a png will be smaller than a gif and images with only a few colors should never be stored in a jpg. For example the ScrumMaster badge you see on the upper right was initially a jpg of 25kB. My all means the png I use now looks identical and is only 13kB.

Results

Given all the measures above, I was able to save over 50% of bandwidth and 75% of requests on the frontpage of my blog. No matter how fast your broadband connection is, you feel the difference. Even better, the website is still W3C compliant.

When in doubt what else you can do, I can recommend registering for Google Webmaster Tools and install their Page Speed Firefox plugin. It will hook into the famous Firebug plugin and provide you with an additional tab that gives very useful hints how to improve your website speed.