The New Domize - One-Hit Wonder!
A couple of weeks ago I launched a new version of Domize, my domain name search tool. I spent a bunch of time optimizing the design and HTML as much as possible, including deferring 3rd-party JavaScript includes until after page load (see below) and trimming down CSS and JavaScript as much as possible.
Probably the most interesting optimization I made was in reducing the number of server requests needed to display the Domize homepage. Reducing HTTP requests has become a fairly common optimization, seen in everything from concatenated JavaScript files to creating images sprites, a technique where all the many small icons and visual flourishes are combined into a single composite image file and then pulled apart using CSS. This last technique can speed up a site significantly (especially in these broadband times, where setting up the connection to download a small image can often take longer than the download itself!)
With Domize, I took this strategy a step further still and was able to render Domize, images and all with just a single request -- the page itself. How? Well Firefox, Safari and Opera (IE users fall back to loading images the old fashioned way) all support the ability to encode a binary file (such as an image) into a "Data URL" structure. A Data URL is a collection of text characters that a web browser can then decode back into the original binary file. The great thing about data URLs is you can put them directly into your HTML source. Using this technique I was able to take my images, combine them into sprites and then embed them directly into my page as data URLs. Enabling GZip compression on my webserver further compresses the page and mitigates the slight inflation of file size you see when a binary file is converted to a text equivalent.
The upshot of all this is that Domize is super-fast to load now. For the particularly technically curious, if you check out the source code of the page you can see how I use JavaScript to embed these data URLs at the very bottom of the page to better support progressive page loading. Go check it out or read up some more on Data URLs at Wikipedia.
