Speed up page loads, defer your JavaScript

Posted At : September 28, 2007 9:56 AM
Related Categories: ColdFusion,JavaScript

A coworker of mine showed me something today that looks interesting. Say you've got a page with a lot of client site JS code that runs AFTER the page is loaded. Things like form validation, Ajax functions, stuff like that. Well, apparently you can add a defer attribute to your script tag, and the browser will not load the JS file until AFTER the page has been fully loaded and displayed to the user. With JavaScript heavy sites, this could dramatically decrease page load times. Here's an example:

<script src="script.js" type="text/javascript" defer="defer"></script>

I am not sure if this works in all browsers, and I'm not sure if it causes any problems. If anybody has any experience with this, please drop me a comment.

Comments (9) | Print | del.icio.us | Digg It! | Linking Blogs | 8206 Views
Comments
[Add Comment]
Jake, I've played around with this attribute for a while now and I've found that I cannot guarantee any performance gain through its usage. There are times that I've used it and gained a steady 0.25 to 0.5 second increase in performance, and other times it has made no difference at all.

I've always meant to investigate the judicious use of this attribute, but just never made the time for it.

Would love to hear more from you as you monkey with it. Perhaps you'll come across some trick that I've missed.
# Posted By Steve Brownlee | 9/28/07 11:19 AM
I've seen this come up on the jQuery site before. I'm thinking you would have to have a fairly heavy script to see much benefit. This seems like a good thing to dump into onRequestEnd.cfm and try out...
# Posted By Jim Priest | 9/28/07 1:06 PM
@Jim, funny you would say that because it's when I have enormous scripts that it makes no difference. For example, I'm building an app now using Ext with the jQuery adapter. Total scripts run over 1MB. Using defer shows no measurable difference. However, 2 months ago, I did a much smaller site using just jQuery and a few plugins and defer made a significant difference in how the page loaded.

This is why I've been so confused as to how to properly use it.
# Posted By Steve Brownlee | 9/28/07 4:00 PM
I'm wondering if it would make a difference to defer ONLY the functions and code doesn't affect the initial page rendering. It would take a lot of work, especially if you are using a framework like jQuery, but I wonder if it would help. Maybe you guys have tried that?
# Posted By Jacob Munson | 9/28/07 5:13 PM
Little bit of information about it:
http://www.websiteoptimization.com/speed/tweak/def...
# Posted By Scott P | 9/28/07 7:32 PM
Using defer is both old and unpredictable. Defer makes the script load after the page has loaded, which could cause some scripts to fail, you just won't know which ones until you play with it. The "right" way to gain some speed performance is to put your scripts in the body section instead of the head. Firefox will download all the scripts contained within the head and process them before downloading the rest of the page (This is why Digg is so slow). By putting them at the beginning of the body section, you forgo this. I've also heard, although I haven't had a change to really try this, is to load your scripts at the end of the body tag.
# Posted By Tony Petruzzi | 9/29/07 3:13 AM
@Tony - Thanks for some additional info. I'll try some of those tricks in my latest app.
# Posted By Steve Brownlee | 9/29/07 5:20 AM
There's some info about both use of Defer, and moving the js to the end of the page, at:
http://developer.yahoo.com/performance/rules.html#...
# Posted By duncan | 9/30/07 11:12 PM
Yeah, this is a handy attribute, but it does not work in Firefox.
# Posted By steve | 10/1/07 5:15 AM
[Add Comment]
BlogCFC was created by Raymond Camden. This blog is running version 5.9. Contact Blog Owner