Optimization results

September 10, 2009

As mentioned yesterday I’m working on a new version of the Googlemap addon. The current version features clustered markers with an Flickr style info window. It is hard to believe I wrote that nearly 18 months ago. In internet time that is like ages ago.

Anyway, there were some bugs with that initial version, most noticeably the fact the scroller kept on scrolling while there were no images. Furthermore, the image that was supposedly the last image ended up on random places in the set. Something you’d rather not see with an image that says: “this is the last image”.

So I decided to take another approach and over the course of 18 months on the internet lots of new software was developed, far more advanced than what I have now. So I searched a bit and found an excellent example over at Woorks place. Only problem was it used Prototype as a JS framework while I really wanted to use the more lightweight kid on the block: JQuery.

I managed to rewrite the whole thing in JQuery using The JQuery Tools and decided to compare them head-to-head. So here are the charts from Yahoo! Yslow:

scroller_old scroller_new
(The one on the left is the old situation with Prototype, while the one on the right is the new JQuery solution)

As can be seen I managed to cut down the size from 257Kb to 86Kb, a size reduction of 67%. This reduction is caused by the much smaller JQuery framework in combination with the JQuery Tools compared to Prototype. I bet I can squeeze it even more down by using GZip to send the page. However, that will probably squeeze down the Prototype based page also. :p

So far it works in IE8, Chrome and Firefox, while there are some minor issues in IE7 that I need to address.

Categories
Programming

« »

2 responses

Have you thought about going super simple, and removing the

Jay Williams | September 10, 2009

Have you thought about going super simple, and removing the fancy scroller, and going with the browser’s horizontal scroll bar? That way it wouldn’t require as much JS overhead, and you could go as slow or fast as you wanted.

Using the scrollbar from the browser is indeed the simplest

Dennis | September 11, 2009

Using the scrollbar from the browser is indeed the simplest and fastest way to handle this. With the use of Flickr and other sites using this solution has become more or less mainstream. Pages build back in the late nineties (leave out the animated gif) are probably also a lot faster compared to the current pages.

But fast is relative, the speed in those days was also much lower compared to the current day internet connection. While this isn’t a reason to make slow pages using a lot of overhead of several JS frameworks, I do feel we could add to the experience.

For example, the photoblog layout, written in late 2007, early 2008 uses several JS frameworks and additional single JS files. At the time this was the only way we could accomplish what we wanted. I did some research and found that almost 95% of all the features can be handled by JQuery, thus limiting the load. I’m now in the process of porting my code to the JQuery framework and I tend to make a comparison on the load and speed of the page.