W-Shadow.com

I’ve always cared about WordPress performance. I’ve optimized my database, tweaked the server’s configuration, used plugin profilers and installed WP Super Cache and PHP Speedy WP – the “heavy artillery” of performance-related plugins. However, only recently did I decide to finally track down and fix all the remaining subtle issues that may cause slow loading times. One of these is the social bookmarking plugin Sociable.

Make no mistake – Sociable is a great plugin. In fact, one of the reasons I use it is because it’s pretty lightweight compared to the JavaScript-heavy social bookmarking plugin I used before (ShareThis). Still, with a little bit of hacking you can make it even faster. In this post I’ll show you how.

The Problem

The problem with Sociable is that the bookmarking icons are stored as separate images. This means that when loading a post/page, the browser will need to create a new HTTP connection for each enabled icon and download every image separately. This is bad because :

• Every new connection carries an (admittedly small) overhead that impacts loading time.
• A web browser can only make a fixed number of simultaneous connections to a single domain. Depending on the browser, this can be as low as 2 connections. So if you have a lot of images on a page, the browser will load only a few of them at a time and put the rest in a queue. Slooow.

The Answer : CSS Sprites

This is a well-known technique where multiple smaller images are merged together to produce a single master image. Then a few CSS tricks are used to display individual parts of that merged image where needed. The advantage is that the web browser needs to download only one image, so we get rid of the multiple connection overhead and the simultaneous connection limit.

After a bit of fiddling, I successfully hacked Sociable 3.0.2 to use CSS sprites for the bookmarking icons. You can download the modified version here:

However, that’s not the end of the story. In the above version, the master image includes all of the icons used by Sociable. That works, but the file ends up pretty big. In practice you can make the merged file much smaller (=faster loading) by only including the icons you use on your site. Here’s how to create a custom sprite file for the modified plugin :

1. Select the images you want to use from sociable/images/ and put them in a new zip archive.
2. Go to the CSS Sprite generator and put the .zip file in the “Source Files” box. Also, tick “Compress Image with OptiPNG” – this will make the resulting file much smaller.
3. Click on “Create Sprite Images & CSS”.
4. Copy CSS code from the “CSS Rules” field. Then open the sociable/sociable.css file, remove all sprite-related code from below the line that says “/* CSS sprite buttons */” and paste the generated code in it’s place.
5. Click on “Download sprite image” to download the merged file. Rename the file to “csg-sprites.png” and put it in sociable/images/ (overwrite the existing file).
6. Finally, upload the entire sociable folder to your /wp-content/plugins/ directory.

The modified version should work okay as a drop-in replacement for the original Sociable plugin. Your existing settings will be retained, and the new buttons will look pretty much the same (the spacing/margins may be slightly different). Anyway, standard disclaimers apply.

Sidenote : It’d be nice if Joost de Valk could somehow incorporate CSS sprites into the official version of Sociable 😉