First, a disclaim: Oodle and eBay are (or at least were) partners. Obviously everything here is my opinion, and has nothing to do with eBay. I'm not going to comment on their business, just a few things I saw in a browser...
Now I came across Oodle because they are hosting a Lunch 2.0 in a couple of weeks. I got the Facebook invite from Terry, and started poking around Oodle. They've supposedly re-done their entire site and made it very Web 2.0-ish, hence the launch of "Oodle 2.0." So what's the secret to their new UI? Let's find out.
I opened up Firebug on a page and saw 7 HTTP requests for JavaScript files. That seemed excessive. I started opening up each JS file that was coming across. Here's the start of the first one:
/*Copyright (c) 2007, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.3.1
*/
Alright, so they are using YUI, at least they didn't re-invent the wheel here. I kept reading this file and one line 11 I see:
/*Copyright (c) 2007, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.3.1
*/
Fail. But wait, there's more. Starting at the end of Line 18 we have:
/*Copyright (c) 2007, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.3.1
*/
I'm seriously not making this up. See for yourself: http://img.oodle.com/jaml/autocomplete/1196308267
Ok, so that file is pretty bad. What about the other six? Here is the contents of another JS file (see it live in all its glory at http://img.oodle.com/jaml/focus/1195340840) :
function focus()
{
var focusElement;
if (document.getElementById('home-what'))
{
focusElement = document.getElementById('home-what');
}
else if (document.getElementById('search-what'))
{
focusElement = document.getElementById('search-what');
}
else if (document.getElementById('email'))
{
focusElement = document.getElementById('email');
}
else if (document.getElementById('sender'))
{
focusElement = document.getElementById('sender');
}
focusElement.focus();
}
addDOMLoadEvent(focus);
That's right, an HTTP request for 20-freaking lines of JS. FAIL! There was also three CSS files loaded for a single page. The ten combined external files are all loaded in the first 20 or so lines of HTML. It's like these guys are trying to make their site slow...
I looked at their house listings. You can click a "see details" for each listing and it makes a slick XmlHTTPRequest call. How very Web 2.0. The response to this is XML. What year is it? Haven't you guys learned about JSON? You would think using YUI they would have figured this out.
Here is one the URLs to a search: http://sf.oodle.com/housing/rent/home/-/bathrooms_2/bedrooms_3/bedrooms_4+/-/95118/+5/.
That looks very Ruby on Rails-ish (or maybe Django.) I looked at their cookies, including their session cookie, but nothing cried out RoR there. Still RoR would fit well with their slowness strategy.
2 comments:
Michael, I'm glad you had time to look at the new Oodle and hope you are able to make it to Lunch 2.0 at Oodle. Thanks for taking the time to look at our site performance. It is something we spend a lot of time on and are always working on improving. You mentioned Firebug, another good tool for web performance profiling is YSlow and the Yahoo! Rules for High Performance Web Sites at http://developer.yahoo.com/performance/index.html#rules
You make some good points on performance. Rule #1 is fewer HTTP requests, and as you discovered, we are reducing the number of HTTP requests needed by grouping our javascript files together. However, instead of grouping them all into one large file, we group them by functions that are commonly used together. This speeds up our pages since users do not download unneeded javascript functions.
We will continue to work on making Oodle a faster and easier to use site. If you want a JSON vs XML debate, come to our Lunch 2.0. Our engineers love to debate technologies, protocols, and caching techniques. We don't use RoR, but we do have PHP, Perl, Java, and C.
Scott Kister
Oodle co-founder and CTO
Darn, I tried to have fun like the guys at Uncov and now the freakin' CTO of Oodle comes along and makes me feel bad :-) Perhaps I need better role models.
I am humbled by Scott bothering to respond to my blog. Don't worry about my attempt at harshness Scott, I only have about 100 daily readers.
Anyways, on to Scott's points. Having multiple requests for JS is not the end of the world. Aggregating JS is a good idea, but you should really minimize it. That would include stripping out comments, like the YUI header that was repeated three times.
Now aggregating vs. keeping small and caching across pages is always some tricky math. But it can be quantified, and it's hard to imagine it ever be worthwhile to keep a single JS function in its own file.
Also, when you do aggregate it usually makes more sense to dump the JS to the page directly. If you are going to externalize, then you should put the loading at the bottom of the page, not the top.
Finally, I didn't realize anybody was debating XML vs. JSON anymore. JSON is always smaller. 'Nuff said.
Post a Comment