Is "Put Scripts at the Bottom" Correct? [closed]

Question

In the Best Practices to improve web site Performance http://developer.yahoo.com/performance/rules.html, Steve Souders mentioned one rule "Move Scripts to the Bottom". It's a little confusing. Actually, I notice that a lot of web pages that doesn't put script at bottom, while YSlow still mark A for these pages.

So, when should I follow the rule "Put Scripts at the Bottom"?

Gobbler

Answer 1

When a user requests a page from your site, the page HTML starts streaming to the browser. As soon as a browser encounters a tag for an external image, script, CSS file, etc., it will start downloading that file simultaneously.

If you put your scripts at the bottom of a page, they'll be loaded last. In other words, the HTML content/structure/css/images of youe page/app will be loaded first, and something can show up in the browser faster; Your users don't have to wait for a script to finish downloading before they see something in your application.

Protoxide

This is what the 'defer' attribute is for. It might be worth updating this answer to account for that, since it shows up quite high in Google results. – Corneous

Answer 2

The reason why pages that have scripts at the top of the page still score an 'A' is because this is not as important as other performance improvements that could be made.

Each rule is weighted, so some rules affect the ySlow grade more than others.

I always put scripts at the bottom. There are very few reasons for needing scripts at the top of your page. The only reason I can think of is you need your JavaScript to execute immediately before anything else in the page, which is quite rare.

Byars

Answer 3

Sometimes, you have no choice but to put scripts at a specific location in page. However, if you put scripts at the bottom of the page, the browser won't interrupt its rendering to load JS engine to process your script (which might be costly, if you have loops running for large number of times) and will probably display an early view of the page sooner.

Vudimir

Can you give an example of when "you have no choice but to put scripts at a specific location in page"? – Bract

@Draemon: for instance, using document.write in the middle of the page to generate some tags. Yes, you can wait for the page to load and then set the innerHTML of some element. That's not what I mean. I meant being able to put scripts at bottom, without refactoring the code. – Vudimir

Ok, I'd call that kind of code broken. I don't see why you would expect not to change the code, but technically I take your point. – Bract

What about small snippets of <script></script> inline that simply initialize data? Does that defer downloading of previously declared images, etc.? – Frodi

Answer 4

The code may reference DOM objects that haven't been instantiated yet is the most obvious reason I can think of.

Gushy

Code doesn't have to run immediately when it loads. You can delay the running by having the functions called on an event later – Rizal

Yes, that's another way, but not necessarily the best. Don't use a workaround if you can avoid the problem with good coding style. And then you've got the possibility of framesets, etc. – Gushy

Answer 5

I'm not sure it's a performance issue (could be), but I was at a presentation given by Microsoft, and the presenter said that web spiders sometimes only read the first x amount of characters on a web page to index it. So, if you have a large amount of scripts, your content may not be reached and indexed properly (and your site's page rank won't be as high).

Monadism