I was just using the plugin "Yslow" for Mozilla Firefox, and it told me that I should put JavaScript at the bottom. I have heard this before but haven't really thought about it too much. Is there really an advantage in putting JavaScript at the bottom of a web page compared to the top?
-
What about if the Javascript is in a separate file? I prefer this way, simply because it's easier to debug/read. Is this loading faster/slower?Mark Kadlec– Mark Kadlec2009-10-28 17:14:08 +00:00Commented Oct 28, 2009 at 17:14
-
2You could go right to the source on this one...developer.yahoo.com/performance/rules.html is the Yahoo explanation of this practice.Nick Larsen– Nick Larsen2009-10-28 17:18:07 +00:00Commented Oct 28, 2009 at 17:18
-
1Are these yahoo performance rules still up-to-date? I have to imagine that someone has published a similarly complete set of rules (or yahoo has possibly published an update) that takes into account changes that have occurred in the past four years.kralco626– kralco6262013-09-06 20:03:24 +00:00Commented Sep 6, 2013 at 20:03
-
1@kralco I found this article interesting. Takes into consideration the nature of today's web.Rafa Viotti– Rafa Viotti2014-02-11 17:00:34 +00:00Commented Feb 11, 2014 at 17:00
-
Actually my jQuery submit method didn't work until I move the javascript code to the bottom. Why is that?coderH– coderH2021-09-15 15:17:18 +00:00Commented Sep 15, 2021 at 15:17
Add a comment
|
10 Answers
It'll allow the web page to load visibly before executing JavaScript, which makes sense for things like Google Analytics, which don't need to happen before the page loads.
You may also want to look into things like jQuery, prototype, etc and attach to the "ready" handler, which executes JavaScript code after the DOM has been fully loaded, which is an appropriate place for much JavaScript code.
5 Comments
NateShoffner
Does this mean that JavaScript that is usually within the <head></head> tags can be wherever in the page after the <body> tag?
vava
Yes, <script> tag can be anywhere and it will be executed when encountered, so there's a good chance that everything before it will already be visible to the user (but it is not guaranteed).
Nick Larsen
You dont even have to put the script inside the html tags, you can put it outside at the bottom and it would still work... though it might look a little funny.
wojo
Before going mostly event-driven with jQuery, I sprinkled script tags all around as vava and NickLarsen mentioned. They can be nearly anywhere in your HTML, even after the HTML tag.
Corey Ballou
@NickLarsen, this doesn't validate. Bad practice.
Assuming you aren't running on a CDN or aren't serving your JS from a separate sub-domain or server, it will load synchronously and force your HTML content to wait until it has downloaded the files. By placing the JS at the bottom of your page before the closing </body> tag, you are allowing the HTML to be parsed prior to loading the javascript. This gives the effect of faster page load times.
Comments
If you have static html content and a lot of javascript, it can make a difference in perceived page load time since the html will load first giving the user something to look at. If you don't have much javascript, or the existing page content relies on the javascript to be useful, then this is not as useful practically-speaking.
Comments
I want to bring update to this topic, google has recently introduced async snipped http://support.google.com/analytics/bin/answer.py?hl=en&answer=1008080&rd=1 which can be added for your site to bring e.g. google statistics support. It should be placed bottom of the <head> section for best performance. The point is that this increases likely hood of tracking beacon to be sent before user leaves the page.
Also it should be located there if you want to verify your site in google webmaster tools using your google analytics.
Other than that, same rules still applies basically - javascript at bottom for "fast" loading of the page. I used quotes because I dont count page fully loaded until javascript finishes ;-)
Comments
Yes, the page will load the content and render it before loading and executing javascript, and the page will, as a result, load faster.
Comments
TOP
When you put your JavaScript at the top of the page, the browser will start loading your JS files before the markup, images and text. And since browsers load JavaScript synchronously, nothing else will load while the JavaScript is loading. So there will be a timeframe of a few seconds where the user will see a blank page, while the JavaScript is loading.
BOTTOM
On the other hand, if you place your JavaScript at the bottom of the page, the user will see the page loading first, and after that the JavaScript will load in the background. So if, for example, your CSS & HTML takes 5 seconds to load, and your JavaScript takes another 5 seconds, putting our JavaScript on the top of the page will give the user a “perceived” loading time of 10 seconds, and putting it on the bottom will give a “perceived” loading time of 5 seconds.
Taken from Demian Labs.
Comments
It allows all the DOM elements to fully load before loading the Javascript which addresses them. This standard is also part of Visual Studio.
Comments
Placing scripts at the bottom of the element improves the display speed, because script compilation slows down the display.
Comments
Yes including the javascript at the bottom of the page really quickens the loading of the page. Since browser executes things synchronously it impacts the page loading if it is placed at the top of the page. If it is placed at the bottom of the page, the page would have loaded the entire markup by then when the browser starts loading the javascript giving a better experience to the user.
Comments
It's advisable to put all inline scripts at the end to improve performance, you don't want your users to be staring at a blank white screen while the script renders. You can use defer attribute eg. to prevent link scripts from delaying your html rendering.
