One of my newest and persistent obsessions is constantly looking for ways to make dcunited.com load faster. It’s a challenge because we want to have a content-rich site, with lots of photos, videos, and interactive elements. There are a lot of techniques you can try, from optimizing images, using subdomains to trick browsers into downloading in parallel, combining images into sprites, and so on. Of course, none of these techniques can help you if you choose or are forced to use something that has a big payload.
In this case, I was looking at the javascript libraries we use to do tabs, table sorting, and fancy tooltips. jQuery itself is 31kb minified, which is a little chunky but not a horrible tradeoff. Most plugins are svelt, except qTip which weighs in at comparatively hefty YUI-compressed 38kb. For 38kb you get a ton of features with the plugin, but if you aren’t using most of them, its just bloat.
I need a compact UI library for websites
I started looking for a replacement plugin, and quickly found jQuery TOOLS, which states :
Websites are not desktop applications. They are different. What you really need is high usability, striking visual effects and all those “web 2.0” goodies that you have seen on your favourite websites.
Replacing qTip with the jQuery TOOLS tooltip plugin didn’t take a lot of time, by mid-morning I was already testing it across our supported browsers to roll it out to the live site. You can still get pretty fancy with this plugin. However, you can customize your download to only include the tooltip plugin, which clocks in at just over 3kb minified javascript.
This is a big difference, although 35kB may not sound like much, that’s 35kb less data that visitors have to download. More importantly, that is less javascript code that a browser has to parse when rendering a page. Javascript parsing can block other downloads and slow page loading.