This blog post was originally posted on the SexyBookmarks’ blog. Shareaholic has since taken over the responsibility for the continued development and improvement of SexyBookmark publisher plugins!

Any of you who work hard to optimize the load time of your blog have undoubtedly noticed that SexyBookmarks has become increasingly slow in recent months. The reason for this has to do with the idea which made it so fast in the beginning. See, when the plugin was first released, there were only about 15 or 20 icons available. So, merging all of those icons into one single sprite was still much faster loading than trying to make 15 or 20 separate HTTP requests to load each individual icon. This is no longer the case.

Now the plugin offers over 80 sites to choose from (current development version) which creates an image sprite that is nearly 6,000px wide and a whopping 237kb in weight! Most people aren’t going to choose anywhere near 80 sites to go in their bookmarking menu, and as such, they’ll be loading up those additional icons for no reason. Hence the sluggishness in load times.

The sad truth

We’ve known about this issue for a while, but just weren’t sure how to go about finding a solution. However, Jan over at Trick77 recently wrote an article warning users to be wary of SexyBookmarks due to the slow load times and massive image sizes… This really lit a fire under our butts and got us brainstorming, and I do believe we’ve found a solution… (we hope)

The good news!

We’ll be making use of PHP5 and the PHPGD library to take individual icons and merge them into a sprite based on what you select from now on. This means that only the icons you choose will be placed in the sprite, thus reducing the file size while also reducing HTTP requests because it’s still a single image sprite.

We’ve also realized that it was just plain stupid to merge all of the custom background images (eg. “Sharing is caring”, “Sharing is sexy”, etc) into a sprite! Nobody is going to display more than one background image at a time, so there’s no need to load them all when the page loads. So we’ll also be separating each of the background images so that you only load the one you need.

We’re also talking over ways to ensure that the plugin only loads the CSS associated with the icons you select to be in the menu. This will help to reduce the file size of the stylesheet that comes with the plugin. Also, we plan to “minify” the css/js that comes with the plugin, which will reduce the file sizes as well. On top of that, we’ll be loading the JS in the footer now rather than in the header.

Last but not least…

Even after I separated all of the icons individually, each icon was about 5.2kb in size. This isn’t terrible, but when you multiply that by 80 icons it adds up to a little over 400kb! This is a problem! So, I took the time to run each individual icon through Smush.it and saw a savings of around 50% on each icon! I also ran each of the background images through the program as well, and saw similar savings. So, now all of the background images AND icons all together only come to around 212kb, which is a HUGE savings in file sizes!

Now couple that with the features mentioned above, and v3.0 of SexyBookmarks should load like the web’s equivalent of a Ferrari.