Lazy Load Google Maps
Google Maps is a powerful API for including interactive maps on your website (but who didn't know that :)). But with features comes complexity and with complexity come larger startup times (at least in JavaScript land). But there are ways to improve the user experience for your visitors. To test the possibilities, I wrote a (very) little app, which displays POI-markers for the three Liip offices.
Prerequisite: I used some YUI components to make it easier, especially for displaying some time measurements. All common components are loaded before timing started, so that is not really an issue here:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/logger/assets/skins/sam/logger.css" /> <link rel="stylesheet" type="text/css" href="masync.css"/> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/logger/logger-min.js"></script>
The JavaScript files should actually be at the bottom of the html, if possible, but we don't obey that rule here.
Here the 4 ways I tested, click on the title to see the implementations in action (If you have firebug enabled, turn it off, otherwise it takes ages on firefox):
1) "no lazy load top" approach - the usual way
For the first attempt, I took the "usual" way. Putting the inclusion of the google map JavaScript file into the <head> element. But when a JS file is loaded, the browser won't load anything else, until that one is finished and therefore won't for example load and display the little icon I put on the page. The important load times are:
Time until image loaded: 327ms
Time until domready fires: 316ms
Time until window.onload fires: 390ms
Time until map.load fires: 274ms
It takes pretty long, until something appears on the webpage, as loading and parsing the google javascript takes precedence.
2) "no lazy load bottom" approach - a more recommended way
Instead of putting the big google map javscript file in the head, we put it at the end of the </body> part. That improves response for the visitor a lot.
Time until image loaded: 11ms
Time until domready fires: 331ms
Time until window.onload fires: 461ms
Time until map.load fires: 290ms
While domready and onload are not sooner than in the first approach (even take longer), the image from the content part is loaded much faster and loaded almost immediately. Your user will see the whole page, just has to wait for the map a little bit longer. The effect is the more noticeable the slower your connection is, since the image loading part doesn't have to wait until the file from google is loaded.
3) "direct lazy load" approach - using the Google AJAX API
With the Google AJAX API, you can load the whole google maps code on demand. For this third approach I just did this, after the window.onload event fires. This leads to the following times:
Time until image loaded: 11ms
Time until domready fires: 41ms
Time until window.onload fires: 47ms
Time until map.load fires: 352ms
As you can imagine, the domready and window.onload events now fire much much sooner, but the total time until the map is ready takes a little bit longer. If your page relies on having domready and/or window.onload ready as soon as possible (for other components than the map), this could be a way to improve the end user experience. They don't have to wait until the map is loaded for other dynamic components to appear.
4) "on demand lazy load" approach - using Google Static Maps API
The last approach is not loading the google maps javascript by default, but only on demand. With the help of the Google Static Maps API you can even show a map, without having to execute lots of javascript code (but unfortunately only street maps currently and no satellite). As some user may nevertheless wish to zoom and pan into the map, we load the whole interactive code as soon as the user moves the mouse over the map. On a decent internet connection, this should be fast enough and not really noticeable (except that the street maps are not exactly the same :)). This gives you the responsiveness of a fast static website plus the interactivity of a google maps based site, if the user wishes so. Of course, this later-on-demand loading isn't really what you want, if the map is the central part of your site :)
Time until image loaded: 16ms
Time until domready fires: 52ms
Time until window.onload fires: 61ms
Time until map.load fires: n/a
domready et al. take a little bit longer, because the static image from google has to be loaded, which the first three approaches don't.
Comments [16]
Add a comment
Your email adress will never be published. Comment spam will be deleted!
Yoan, 22.04.2008 14:22 CEST