26

Yahoo best practices states that putting JavaScript files on bottom might make your pages load faster. What is the experience with this? What are the side effects, if any?

Peter Mortensen
  • 28,342
  • 21
  • 95
  • 123
dev.e.loper
  • 34,180
  • 71
  • 151
  • 237
  • Scripts block other downloads, so I tend to load scripts (except those required for immediate page functionality) just before the closing body tag, then place functions that depend on them after that. Finally, I add stuff like Google analytics. As I understand it, the page doesn't always necessarily load *faster* (although it probably will), but users see content *sooner*, which helps the apparent loading speed. Consult the overlord of faster websites here: http://stevesouders.com/hpws/move-scripts.php – Dave Everitt Dec 03 '10 at 12:03

8 Answers8

30

It has a couple of advantages:

  • Rendering begins sooner. The browser cannot layout elements it hasn't received yet. This avoids the "blank white screen" problem.

  • Defers connection limits. Usually your browser won't try to make more than a couple of connections to the same server at a time. If you have a whole queue of scripts waiting to be downloaded from a slow server, it can really wreck the user experience as your page appears to grind to a halt.

John Feminella
  • 281,997
  • 42
  • 326
  • 347
  • 4
    As of 2013, the first point is still somewhat true. However, putting scripts at the bottom is not so relevant anymore. Now with HTML5, if the script need to alter the DOM, you are better off putting it in the head with an html5 "async" or a "defer" attribute, to avoid delaying the overall rendering of the page. For layout purpose, the fastest your scripts are called, the less you are delaying the DOMReady event, and the fastest your page will appear loaded to the user. Only scripts that relate to a user action after window.onload should now be placed at the bottom. – hexalys Jun 01 '13 at 22:48
10

If you get a copy of Microsoft's Visual Round Trip Analyzer, you can profile exactly what is happening.

What I have seen more often that not is that most browsers STOP PIPELINING requests when they encounter a JavaScript file, and dedicate their entire connection to downloading the single file, rather than downloading in parallel.

The reason the pipelining is stopped, is to allow immediate inclusion of the script into the page. Historically, a lot of sites used to use document.write to add content, and downloading the script immediately allowed for a slightly more seamless experience.

This is most certainly the behavior that Yahoo is optimizing against. (I have seen the very same recommendation in MSDN magazine with the above explanation.)

It is important to note that IE 7+ and FF 3+ are less likely to exhibit the bad behavior. (Mostly since using document.write has fallen out of practice, and there are now better methods to pre-render content.)

John Gietzen
  • 45,925
  • 29
  • 140
  • 183
9

As far as I can tell, it simply lets the browser begin rendering sooner.

Michael Myers
  • 178,094
  • 41
  • 278
  • 290
  • 1
    so i imagine if js files are big enough, it will look like the page loaded but user wont be able to do anything because browser still loading js files. – dev.e.loper May 12 '09 at 22:00
  • 1
    That's what happens in Stack Overflow sometimes, at least. :) – Michael Myers May 12 '09 at 22:01
  • 1
    It's not true that the user won't be able to do anything - they just won't be able to do anything that requires the javascript. – Skilldrick May 12 '09 at 22:10
  • To me everything feels sluggish while loading/parsing javascript. For example, a link that uses css to show an underscore while hovered will not do anything until the page is loaded. – Juan Mendes Oct 29 '10 at 19:39
4

One side effect would be that some scripts doesn't work at all if you put them at the end of the page. If there is a script running while the page is rendered (quite commmon for ad scripts for example) that relies on a function in another script, that script has to be loaded first.

Also, saying that the page loads faster is not the exact truth. What it really does is loading the visual elements of the page earlier so that it seems like your page is loading faster. The total time to load all components of the page is still the same.

Guffa
  • 640,220
  • 96
  • 678
  • 956
3

Putting them at the bottom is a close equivalent to using the "defer" attribute (even more info here). This is similar to how a browser cannot continue with page layout unless IMG tags have width and height information -- if the included javascript generates content, then the browser can't continue with layout until it knows what is there, and how big everything is.

So long as your javascript doesn't need to run before the onload event happens, you should be able to either place the script tags at the end, or use the defer attribute.

2

Your page should actually load faster. Browsers will open more than one connection to download three images in parallel, for example. On the other hand, the <script> tags in most browsers cause the browser to block on that script executing. If its a <script> tag with a src attribute, the browser will block to both download and execute. If you put your <script> tags at the end, you avoid this problem.

At the same time, this means that those pages don't have any JS functionality until they're done loading. A good exercise in accessibility is to ensure your site runs well enough to be usable until the JS loads. This ensures that the page will (a) work well for people with slow connections (b) work well for people who are impaired or use text-only browsers.

ziegs
  • 21
  • 2
2

if you are developing for firefox/safari, you can always check with firebug/developer console as they show the loading sequence of files

Jeffrey04
  • 5,428
  • 10
  • 40
  • 62
1

There are some points.

  1. It loads page fast since the JavaScript internal or external is on bottom.

  2. If you have not used a onLoad method of window in JavaScript it will start execution as soon as it rendered. The Script at bottom ensures that your script will execute after page load.

  3. If script is as a file means external then will render after the HTML image and other visual object that forms the page view.

If you are using fireFox then there is a plug in to check the performance. Please do hit the firefox site for this plugin.

Umesh Aawte
  • 4,358
  • 6
  • 38
  • 50