Friday, November 16th, 2007
Yahoo! Search Contextual Precaching
Category: Performance, Yahoo!
Yahoo! Search does an interesting bit of caching. To see it in action, go to the main search page with Firebug enabled and ready (or any tool that lets you see network traffic). Then type any character into the search input box and you will see some traffic kick off to download items such as:
http://us.js2.yimg.com/us.js.yimg.com/lib/s3/ysch_srp_clean_200711061918.css
http://us.js2.yimg.com/us.yimg.com/i/us/sch/el/att_hdspr_1.6t.png
http://us.js2.yimg.com/us.js.yimg.com/lib/s3/ysch_srp_clean_200711051714.js
http://us.js2.yimg.com/us.yimg.com/i/us/sch/gr2/sprt_srp_core_6.gif
http://us.js2.yimg.com/us.yimg.com/i/us/sch/el/ng_bg.png
What are these files? They are artifacts for the results page. So, Yahoo! groks that you obviously are going to do a search once you start to type something in, so why not go ahead and preload the files that are needed as part of the results page? Nicely done.
That’s pretty smart. Does it preload javascript and css files too?
Jordan: that’s what the first two URL are (.js and .css).
We did something like this over a year ago with an online demo of our Workflow Designer JavaScript widget.
We cached all of the resources needed for the actual Designer on the license agreement page in the background. This took the initial load time from 14 seconds to about 3 seconds. We populated the cache with the Designer HTML page and all necessary CSS, JavaScript, and XML. It made a big difference in the user experience, saved them about 11 seconds.
If only their mail app was this fast. My girlfriend rolled back to the classic version because it’s just unusable.
Wow. That’s extreme!
This sounds like a good candidate for somebody to create a library/tool/module to pre-load anticipated dependencies. You wouldn’t want to hard-code these dependencies into your pages if there were more than a few. That would get to be a maintenance nightmare.
It could be done with a dojo build-time add-in or with a FreeMarker macro, I’ll bet.
Anyone want to bring anticipated dependency pre-fetching to the masses???
@Tinus
That’s funny, I just rolled back to the classic version too – because they changed something recently that started crashing Firefox whenever I would close the window :(
This is a neat idea – thanks for sharing!
@Peter
Firefox is also crashing on me, but when when I close GMail… I think the problem is in Firefox itself, not in the app (this problem seems to have appeared in a very recent version of Firefox, 2.0.0.9 maybe)
precaching… this is newsworthy?
…people were precaching things back in the mid 90’s. Precaching’s just a part of providing a better user experience. But apparently everyone’s forgotten the trick enough so it can be “reinvented” by yahoo. gravy.
@Arron
I think it never hurts to talk about old patterns once in a while. Don’t forget that new people enter the work force every day and may not know them.
but this will slow down the search page, isn’t it?
yeps, this is what I would call “conditional preloading”, where you’re smart about anticipating your users’ next steps and caching page components.
There could also be the “unconditional preloading” where you always preload. Examples? yahoo.com loads a JS and a CSS stylesheet onload. google.com preloads a css sprite onload. Check http://www.google.com with Firebug’s Net Panel on and you’ll see this image
http://www.google.com/images/nav_logo3.png
which is not needed until the next page.
More about this here – http://www.sitepoint.com/article/web-site-optimization-steps/3
Julien Lecomte, it wouldn’t slow down the search page. Once you’ve input something ( and while you input the rest of the search term(s) ) into the search box they preload images which will be displayed in the nest page so when you do click “Search” those images will be in your cache already.
Go Yahoo! – I still like Google better… :-)
So as soon as you type something, it loads a 30kb javascript file, and some other bits… That’s just brilliant!. The final results page should be a lot less than that; explain to me why caching something that is a lot bigger than the final page should be is smart???
What if you were on dial up? This would be horrendous!
Don’t forget that new people enter the work force every day and may not know them.