Is it practically good to put JS files at the bott

Question

It is widely recommended that JS files should be put at the bottom of page to allow html codes to be loaded first. In this case, visitors will see something when waiting for full load of the page. However, I think this is disadvantageous for these reasons:

1. Modern design mainly depends on JS. This means before loading JS, the page will look ugly.

2. If interrupting the connection during the load (not loading JS at all), visitors will miss some of the website features (probably very important); and they will not understand that this is the problem of load (to re-load the page).

3. If the server-side script die (due to an error) at the very end of script before footer (e.g. in PHP), visitors will miss the whole page functionality (by JS); but if loading JS at the top, they will only miss the footer or half the page.

4. If loading JS first, browser will load other stuff (like images) in parallel; but if loading JS last, it may increase the load time. Because JS files are large (e.g. JQuery and JQuery UI), and all tiny stuffs (like images) have been loaded and we are loading a large file, last in line.

UPDATE: 5. Since jQuery library should be loaded before codes; if loading the jQuery library in footer (e.g. footer.php), you cannot add custom jquery codes for different pages (within the body).

Please correct me if I'm wrong! Is putting JS files in footer still beneficial?

Answer 1

The reason putting JS at the bottom of the page or loading in asynchronously is recommended is that JS slows the page load down.

If some browsers downloading the JS blocks other parallel downloads, and in all browsers executing the JS blocks the UI thread and hence rendering (parsing blocks in some too).

Putting it a the bottom or loading asynchronously attempts to delay the issue until it has less impact on the visitors page load experience.

Don't forget that no matter how beautiful you page is, is it takes too long to load people won't wait and 2 /3 seconds is where it starts to cause problems.

1. Modern design can probably depends less on JS that it ever has - yes we need polyfills still but as browsers get better then we can do more with CSS

2. This might be true for things like Backbone.js apps, but if the lack of JS breaks the site then I'd argue the design should be different.

3. If the server-side script dies there are perhaps other issues to worry about, there's no guarantee there's enough of the page to be useful anyway.

4. NO! JS blocks the UI thread and in some cases downloads so the images will be delayed. Also as the JS is using connections then there are less connections available for parallel downloads.

5. Have a look at @samsaffron's article on loading jQuery late - http://samsaffron.com/archive/2012/02/17/stop-paying-your-jquery-tax

If you can delay the JS load you should