1

Consider a compressed Javascript file (containing few merged javascript files) called compressed.js. This file could be called using: <script src="javascripts/compressed.js" type="text/javascript"></script> Afriend of mine said that placing the following code in the footer would be better in terms of the site performance:

        <div id="footer:>
          <script type="text/javascript">
           //Compressed js code is located here
          </script>
        </div>
    </body>
    </html>

Is he right? Any answers and links concerning the javascript performance improving are greatly appreciated

PHeiberg
  • 29,411
  • 6
  • 59
  • 81
George
  • 2,050
  • 6
  • 26
  • 36
  • 1
    possible duplicate of [Where to place Javascript in a HTML file?](http://stackoverflow.com/questions/196702/where-to-place-javascript-in-a-html-file) – Richard Dalton Nov 28 '11 at 10:49
  • 1
    You can have a look at: http://developer.yahoo.com/performance/rules.html, especially the `Put Scripts at the Bottom` part – JMax Nov 28 '11 at 10:50
  • 1
    [Yahoo Guidelines](http://developer.yahoo.com/performance/rules.html) – Arindam Nov 28 '11 at 10:54
  • 1
    it will save you a single request-response iteration sacrificing code maintainability, have you looked into deferring JS loading? http://code.google.com/speed/page-speed/docs/payload.html#DeferLoadingJS – Oleg Mikheev Nov 28 '11 at 11:02

2 Answers2

3

Javascript, by definition, is client side, so (in most cases) there's no point loading it before the website has been delivered to the browser and laid out.

If you load it in the footer it doesn't increase the performance of the javascript, what it does it allows the page to download and load in the browser before you load the javascript. This can be done by reference or by inclusion in the code, however its always better to have the javascript in an external file so that it doesn't increase the size of the html page you're delivering to the browser.

Thomas Clayson
  • 29,657
  • 26
  • 147
  • 224
0

Rather than load it at the bottom, it may be better to load it asynchronously (http://stackoverflow.com/questions/2774373/asynchronous-js-file-loading-syntax)

This way the browser can download the script in parallel (so it's available sooner) without it blocking the other browser operations.

Have a look at slides 31-36 of Stoyan Stefanov's presentation - http://www.slideshare.net/stoyan/performance-patterns

Aaron Peter's Velocity EU presentation on Javascript loading is also well worth a read -http://www.slideshare.net/startrender/fast-loading-javascript

Andy Davies
  • 5,794
  • 2
  • 26
  • 21