Monday, November 10, 2008

Don’t forget about the defer attribute for non-essential external scripts

I was recently reviewing a customers eCommerce site and I noticed that the “Please Wait” page that occurs after completing an order but before you view the order was taking a long time to load.  Using Firebug I traced the issue down to an external script that was taking it’s sweet time to download; it was for affiliate tracking on a 3rd party site.

I’m all for tracking, but not at the expense of performance.  Though I haven’t seen an affiliate/ad partner use the defer attribute on their script tags before, there is good reason for you to add it.  Consider the following example:

Default

SlowRequest.aspx is just an ASP.NET page that after a 2 second delay, returns some JavaScript (not my finest code I might add)

SlowRequest

Sure enough, for the first two seconds, all you see is

Waiting

And finally (2 seconds later)

Done

Luckily for this example, this information isn’t overly pertinent – but if it were my order status, it would be.  Luckily a quick defer=”defer” attribute on your script tag and the wait is gone; the external script is loaded after the DOM is ready:

Defer

No comments: