How To Speed Up Sociable

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:

sociable-sprites.zip (206 KB)

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 😉

Related posts :

10 Responses to “How To Speed Up Sociable”

  1. Wesley says:

    Excellent idea! I’m sure joost will implement it if you let him know 🙂

  2. W-Shadow says:

    I’ll do that, eventually 🙂

    (commenting in logged-out mode to test a new plugin)

  3. Hell yeah I’d love to implement this! Any chance you could touch base with me on IM? You’ve got my email address now 🙂

  4. […] bookmarks tagged sociable ø How To Speed Up Sociable | W-Shadow.com ø saved by 4 others     mikal626 bookmarked on 01/30/09 | […]

  5. Xerxy says:

    Wow. Thank you. You’ve saved me hours of work that I would have done if I hadn’t searched and found your solution. On top of being more efficient, the icons also look better with my template.

  6. White Shadow says:

    Glad to help 🙂

  7. cornetjr says:

    Have you been able to combine the css into the main site stylesheet? For some reason when I turn css off in sociable plugin, the sprites do not work, even though the css was added to the main site stylesheet.

  8. White Shadow says:

    I haven’t tried doing it manually, but I’d guess there could be problems with relative image URLs when you combine the stylesheets. I use the PHP Speedy WP plugin that automatically combines the CSS files for me.

  9. cornetjr says:

    I can never get php speedy to work. Especially with javascript. Are you using php speedy with wp-super cache?

  10. White Shadow says:

    Yes. I think I had to do some configuration tweaking to get it to work reliably though.

Leave a Reply