Optimizing aizatto.com

With the slow connection to Malaysia, I decided that it was time to actually implement some of the optimization tips I’ve written to optimize my main site, aizatto.com.

With the use of the Web Developer Toolbar for Mozilla Firefox, you can find out the sizes of each item your website loads. Open up the WebDev Toolbar and go to Information > View Document Size, and tadah! Beautiful and brilliant, no?

Initial Sizes

Documents (1 file) 6 kb
Images (8 files) 31 kb
Scripts (4 files) 139 kb (147 kb uncompressed)
Style Sheets (1 file) 945 bytes
Total: 177 kb (185 kb uncompressed)

I was surprised when I saw the results. Just look at that, 177 kb. Thats incredibly huge, and whats eats over almost 80% of it is the JavaScripts libraries I love to use, Prototype (46 kb) and OpenRico (88 kb).

As the biggest culprits were the JavaScript libraries, my first move was to optimize both Prototype and OpenRico, by trimming out all the comments, and cleaning up the whitespace. This is a small script I cooked up, using Regular Expressions (regex) to do the magic.

If your wondering what it means by ‘uncompressed’, that is because of the additional scripts from other people, ie: search, etc… Google sends their scripts compressed. Similarly I tried to enable compression for JavaScript on my server, but I couldn’t get it to work. Maybe I have to talk with my ISP.

Optimizing JavaScript

Documents (1 file) 6 kb
Images (8 files) 31 kb
Scripts (4 files) 116 kb (137 kb uncompressed)
Style Sheets (1 file) 945 bytes
Total: 154 kb (175 kb uncompressed)

Results: 154kb / 177 kb = 87% ( 23kb saved )
Just by cleaning out the scripts, I’ve saved 23 kb. Thats alright, nothing so great, but still doable. Now let’s try using something more robust, rhino. My script shrunk Prototype to 40 kb (87%, 6kb saved) and OpenRico to 72 kb (82%, 16kb saved). Yes I notice the math doesn’t add up, its because of rounding errors.

I found rhino, in one of my google searches, coming upon an article by the Dojo: The JavaScript Toolkit on optimizing JavaScript. The difference between my script and rhino is that, rhino is more robust. It does some of the same thing my script does, ie: remove comments, whitespace, etc. But it also renames variables such that they are shorter and take up less space. Warning though, with those sort of compression things may not work (luckily for me it did). While definitely not good for readability, a computer doesn’t really care. So I ran the commands as instructed:

java -jar custom_rhino.jar -c infile.js > outfile.js 2>&1

Optimizing JavaScript with Rhino

Documents (1 file) 6 kb
Images (8 files) 31 kb
Scripts (4 files) 99 kb (120 kb uncompressed)
Style Sheets (1 file) 945 bytes
Total: 154 kb (175 kb uncompressed)

Results: 137 kb / 177 kb = 77% ( 40 kb saved )

As you can see its a much better improvement, over an additional 17 kb saved. By now Prototype was at 32 kb (70%, 14kb saved) and OpenRico at 64 kb (73%, 24kb saved). With nothing remaining I could do to the JavaScript, I continued on to the other areas. The Style Sheets, and images.

Though already under 1 kb, I decided to run my style sheet, under one of my scripts.

For the images, I did a little big of goggling, and found information on how to optimize png graphics. Seemed like quite a good place, and the instructions weren’t difficult to understand.

Though the tools looked good, pngcrush and optipng, sadly they weren’t able to crunch much out of the PNG.

Compressing Images and Style Sheets

Documents (1 file) 6 kb
Images (8 files) 30 kb
Scripts (4 files) 99 kb (120 kb uncompressed)
Style Sheets (1 file) 762 bytes
Total: 154 kb (175 kb uncompressed)

Results: 136 kb / 177 kb = 77% ( 41 kb saved )

As you can see, not much of an improvement :( . How sad.

But I didn’t give up. Instead, the only remaining option was to give up the JavaScript libraries I was using. Luckily for me the only JavaScript foo I did on the splash page is the rounded corners, so I opted out for searching something lighter to do the trick.

I stumbled upon curvyCorners, which did the trick for me. Interestingly enough it comes it wo version, a normal one, and a lite one. Obviously I opted for the lite one.

Switching to curvyCorners

Documents (1 file) 6 kb
Images (8 files) 30 kb
Scripts (4 files) 35 kb (56 kb uncompressed)
Style Sheets (1 file) 762 bytes
Total: 73 kb (175 kb uncompressed)

Results: 73 kb / 177 kb = 41% ( 104 kb saved )

There you have it, the biggest improvement to my site. 104 kb saved taking it down to 41% of the original size. Though I’d say its still a big at 73kb, its definetly a big improvement over the original.

Perhaps I should have just opted to use curvyCorners from the start? But see this as an example for choosing the correct library to use. As it was only a splash page, I had the privilege of switching to a smaller library. For a bigger application, a bigger library might be more suited for you.

After all, I could just opt out of using JavaScript to create rounded corners :) , now that would save me quite a bit!

Most definitely a lesson in choosing better libraries.