“Wait for me” said Spidermonkey

User experience is improved by fast loading pages. One technique is to load your javascripts at the bottom of the page. Javascript at the top of a page delays the downloading of images/css and delays the rendering of the page. Bikin Chiu points out how the delay can be longer on mobile devices, where download and execution is slower. Pushing javascript to the bottom of the page allows rendering to happen sooner, illustrated here.

Loading javascript last does have some drawbacks though. Your page might look loaded, but only work properly when all the javascript has executed. Lets look at some examples and another approach to work with this technique.

Example: twitter.com

On twitter’s redesigned homepage, clicking the login link causes a login form to pop-out – without loading another page.

A few times that I’ve clicked the login link ‘too quickly’ and instead of the nice pop-out form it loaded the old login page.

This is frustrating because by being fast I’m penalised with a page reload. How do I know when it’s ok to click? The real answer is, not at least until DOMContentLoaded is fired…

Any page that doesn’t cleanly degrade in the absence of javascript could have problems just after page rendering, momentarily behaving as if javascript is disabled.

Google’s approach with GMail is to wait until everything is loaded before showing the main interface.

Facebook engineers tested a comparison between keeping the page blank until all javascript is loaded (similar to the GMail approach), and rendering a page earlier with a brief period when links may do nothing. They saw lower ‘usage statistics’ for the blank page option – hence settled on the render early approach.

A hybrid approach

What about rendering the page as quickly as possible, and defer handling clicks until all javascript has loaded? What if we ‘wait for Spidermonkey‘. I created a quick experiment, that registers a listener for click events, and replays the last click once the document is ready (all scripts loaded). In the twitter example this would mean a small delay but eventually showing the pop-out form.

Try it out in this exaggerated example. The link doesn’t respond until a 5 second delay. (I haven’t made this work in IE yet – can you? Fork this gist).

Is this better or worse? Seen as the window of misopportunity should be small, I think this is an improvement. Clicking a link will have a delay anyway, if we wait until javascript is loaded then the action will be the intended one, not some degradation. However I don’t like that users get no feedback, from the web page, or the browser, that something will happen, or when it will happen. What do you think?

Title photo: jcoterhals.