Help
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.
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.
