Jump to content

How to Load JavaScript Wisely to Speed Up Web Pages

+ 1
  simonstl's Photo
Posted Oct 29 2009 05:16 PM

Widgets and other third-party gizmos can bog down a normally zippy site. This excerpt from Andrew B. King's Website Optimization will help you alleviate some of the issues associated with delays caused by externally referenced scripts.



External scripts referenced in the head of your pages are especially harmful because they delay the display of your body content. Delays before your body content displays make it more likely that users will bail out. Human-computer interaction (HCI) research has shown that delays before viewing pages are less frustrating than delays after a page has loaded.1

Post-loading delays are a common problem with Ajax-enabled pages. When it is poorly written, Ajax can make things especially difficult on narrowband users. Even with HTTP compression, the latency due to grabbing all those separate files can cause indeterminate delays. Ajax also introduces polling with the XMLHttpRequest object (XHR).

The perils of third-party widgets

Webmasters are outsourcing web services with widgets. Widgets are third-party gizmos that embed everything from Google AdWords, Flickr images, and Twitter tweets to iTunes playlists. The problem with widgets is that they can delay the display of your web pages by many seconds and increase delay variability. Widgets are typically used with a snippet of external Javascript, and their performance relies on the response time of the external server providing the service. Most web service providers lack the extreme data-farm resources and thus the responsiveness of a company such as Google. We've seen external survey widgets, Technorati blog tracking code, and even Google Analytics when it first launched actually hang browsers and cause web pages to time out. Removing these widgets or moving these third-party tags to the end of your markup can help to minimize customer impact.

Give your widgets a WEDJE. However, there is a better way. By using Widget Enabled DOM Javascript Embedding (WEDJE), you can rewrite the widget embed code to effectively make your Javascript work asynchronously. WEDJE creates a cross-platform, cross-browser defer by using the document object model (DOM) to append a div, create a script element, and then append the script element to the div, all with Javascript. An example of the technique follows:

<script type="text/javascript"> // create div below
(function(){document.write('<div id="wedje_div_example">Loading widget...<\/div>');
s=document.createElement('script'); // create script element
s.type="text/javascript"; // assign script to script element
s.src="http://www.example.com/scripts/widget.js";
 // assign script s to div element
setTimeout("document.getElementById('wedje_div_example').appendChild(s)",1);})()

</script>


When these elements are linked together in this way, browsers appear to decouple the loading and execution of the attached Javascript, making widget execution asynchronous! Here is the matching external Javascript file, widget.js, which grabs the div we created earlier and loads an image:

document.getElementById('wedje_div_example').innerHTML+='<img src="http://www.
example.com/images/example.gif" width="60" height="60" />';


Another option is to use iframes to load ads, but iframes can ruin the context-sensing abilities of contextual ads and so you must use them carefully. For more details on WEDJE, see Mike Davidson's blog post on the subject. (Note that this technique has some strange Internet Explorer 6-related issues, but you can filter with conditional comments to use on only Internet Explorer 7 and later.)

[1] Dellaert, B., and B. Kahn. 1999. "How Tolerable is Delay? Consumers' Evaluations of Internet Web Sites after Waiting." Journal of Interactive Marketing 13 (1): 41–54.

Website Optimization

Learn more about this topic from Website Optimization.

Is your site easy to find, simple to navigate, and enticing enough to convert prospects into buyers? Website Optimization shows you how. It reveals a comprehensive set of techniques to improve your site's performance by boosting search engine visibility for more traffic, increasing conversion rates to maximize leads and profits, revving up site speed to retain users, and measuring your site's effectiveness (before and after these changes) with best-practice metrics and tools.

See what you'll learn


Tags:
0 Subscribe


2 Replies

 : Nov 16 2009 05:53 PM
Hmmm... this confused me a bit:

External scripts referenced in the head of your pages are especially harmful because they delay the display of your body content. Delays before your body content displays make it more likely that users will bail out. Human-computer interaction (HCI) research has shown that delays before viewing pages are less frustrating than delays after a page has loaded.


It seems to indicate first that pre-load delays are bad, but then that pre-load delays are better than post-load delays. Can you clarify a bit...

Thanks
Brett
---
Brett McLaughlin
O'Reilly Media, Inc.
"I teach"

email: brett@oreilly.com
phone: 214.771.8758
twitter: @oreillybrett
0
  Amy B's Photo
Posted Nov 18 2009 09:13 AM

I came across this article just yesterday, and it suggests yet another way to do this http://www.sitepoint...nd-javascript/.

The comments are really good--they also go into the mechanics of what happens when you load js on the page.