Loginskip to content

February 5th, 2008

Google APIs and Performance

After adding our new Google Maps and Search portlets to the Yale portal, I was disappointed to find that the page load times for our portal took a noticeable hit. It appears as though merely including the javascript for the maps and search APIs is enough to degrade performance, even if you don’t *use* the APIs. As much as I adore the shininess Google has bestowed upon the internet, that kind of performance hit isn’t always acceptable. In the portal’s case, we were even less able to overlook these load-time issues, since these portlets are generally rendered on every request, but users don’t necessarily use them each time the page is loaded.

I initially decided to write javascript to only include the Google javascript on demand. In this model, we wouldn’t include the external script in the top of the page. When the user tried to interact with the portlet for the first time, we’d import the Google javascript, then perform the user’s request. This approach causes the user’s first interaction with the Google elements to be slower that it otherwise would, but at least the user only has to wait for the Google scripts to load when he or she actually wants to use them.

As nice as this plan was, I discovered that Google’s scripts include other scripts via document.write. In practice, this means that if you attempt to load the Google javascript libraries on demand, the page reloads and then hangs. :(

The solution I ultimately used was to isolate all the Google content in an IFRAME and only load the IFRAME when the user attempts to perform a Google-related action. Initially, the page contains a search form and a dummy IFRAME with no src attribute. When the user performs the first search, the javascript switches the IFRAME to include a small google AJAX search page with the appropriate query. As the frame is loaded, javascript sets the IFRAME element height to the height of the enclosed page, so the user never sees any scrollbars. For the Google Map search, we followed a similar approach, replacing the initial map view with a simple image.

A Google AJAX search loading in an IFRAME.
above: A Google AJAX search loading in an IFRAME.

Leave a Reply

You must be logged in to post a comment.



Calendar

February 2008
M T W T F S S
« Jan   Mar »
 123
45678910
11121314151617
18192021222324
2526272829  

Categories