JavaScript: Delay Loading

Summary: Delay loading your JavaScripts to speed up your content display. By redefining empty stub functions with scripts loaded late in your page, you can ensure that your content displays quickly.

You can make your content display faster if you delay or defer the loading of your external JavaScript files. JavaScripts are executed as they are loaded. Any external JavaScripts referenced within the head of your XHTML documents must be executed before any body content is displayed. One way around this is to delay the loading of your external JavaScript by using empty "stub" functions, and redefining these functions later on.

Here's an example:

<script ...>
<!--
function stub(){};
// -->
</script>
</head>
<body>
...
<script src="/scripts/stub.js" type="text/javascript"></script>
</body>

The empty stub function(s) allow users to interact with your page without generated "undefined" JavaScript errors. The scripts loaded just before the closing body tag redefine the stub function once the body content has displayed.

Be careful with this approach, however. Large JavaScript files, especially those that execute slowly, can bog down the response time of your page after it has loaded. Slow post-load response is more harmful to user satisfaction than slow page load times, according to current HCI research.

XSSI to Merge External JavaScripts

Even better, use XSSI to merge your script directly into your page, to avoid an extra HTTP request, like this:

<script type="text/javascript">
<!--#include virtual="/scripts/stub.js" -->
</script>
</body>

Note that any functions defined in these delayed files will not be available until the page has loaded. For validation and overlaid menus, this shouldn't be a problem. Note also, that any scripts referenced outside of the head of your XHTML documents cannot be reliably compressed by modern browsers. We'll cover HTTP compression in a future tweak.

Comments

I am wandering i cant set a delay on a newWindow?

setTimeout(window.open("survey.asp"),10000); // opens a new window in 10sec

but it opens it as soon as i click

thanks

By: Moises Zaragoza on February 5, 2007 6:11 PM

Moises: I know you posted that EVER SO LONG AGO, but I want to help out.

try the following:
setTimeout('window.open("survey.asp"),10000);

That should work out.

By: Anonymous on August 5, 2008 5:12 AM

i have a serious problem, i want a div that have loaded after 10 second when a page is loaded.
any one can help me so plz send me code on my email id which is atiqkhan2011@yahoo.com

By: Atiq Khattal on October 8, 2009 2:30 AM

so how do I redefine the stub?

By: karhoe on October 22, 2009 11:38 AM

My java script is 666KB long so it it very slower so if you have any idea that how can i speed up my website please tell me

thanks

By: manish on December 30, 2009 5:38 AM

WebSiteOptimization.com

JavaScript: Delay Loading

XSSI to Merge External JavaScripts

Further Reading

Comments

Post a comment

SEO & redesign increased new patients by 100X!

Web Performance Services

Conversion Rate Optimization

Web Development