JavaScriptの読み込みはレンダリングなどの処理をストップさせてしまうので、body要素の最後に設置すべきです。Google PageSpeed Insightsでもこの点をチェックされます。
<head>
<!-- headの中ではなく -->
</head>
<body>
コンテンツ
<!-- bodyの一番最後で読み込むべき -->
<script src='/path/to/main.js'></script>
</body>
しかし既にhead要素の中でJavaScriptを読み込んでいる状態で、しかもbodyの中にscriptがインラインで記述されていて、その内容が読み込んでいるスクリプトに依存する場合、一旦その依存関係を解消してからでないと移動させられません。
<head>
<!-- すでにheadの中で読み込んでいる -->
<script src='/path/to/main.js'></script>
</head>
<body>
main.jsに依存関係のあるscriptを含むコンテンツ
<!-- このままでは移動させられない -->
</body>
ページ数が多いとその全てをいちいち直して回るのは非常に大変ですが、jQueryを使っている場合は次のようなコードを読み込むことで簡単に移行することができます。
<head>
<script>
App = { // Appという名前は適当に変える
_q: [], // queue
ready: function (func) {
if (typeof func == 'function') App._q.push(func);
return App; // $(document).ready() をサポートする
},
unqueue: function () {
for (var i = 0, l = App._q.length; i < l; i++) App._q[i]();
App._q = [];
}
}
jQuery = $ = App.ready;
</script>
</head>
<body>
jQueryの遅延実行を含むコンテンツ
<!-- スクリプトを読み込む -->
<script src="/path/to/main.js"></script>
<script>
// main.jsにjqueryが含まれているので、ここではjQueryにアクセスできる
$(function () { App.unqueue(); });
</script>
</body>
そしてコンテンツ中の全てのscriptを $(function({ ... }) で囲みます。
<script>
$(function () {
// もとのコードを囲む
});
</script>
これでほぼ何も考えることなくscriptの位置をbodyの最後に移動させることができます。