なぜhead要素内で外部JavaScriptファイルを読み込むのが良くないのか?

JavaScriptのコードをHTMLとは別ファイルとして保存し、HTMLからリンクさせて読み込むことを「外部ファイル化する」と呼んだりします。

その際、以下のようにHTMLのhead要素内から読み込むことには大きなデメリットが実はあるのです。

<html>
<head>

<script src="ここにJavaScriptファイルへのパス"></script>

</head>
<body>


</body>
</html>

このページではそのデメリットと理由や解決法について解説していきます。

WebブラウザがHTMLなどのファイルを読み込んで解析し、ページを描画するまでの一連の工程のことを「レンダリング」といいます。
「ブラウザ内でレンダリングが行われてページが表示される」というふうに使います。

コードはHTMLファイルの一番上から順番に読み込んでいき、その途中にJavaScriptなどの外部ファイルがあればその時点でその外部ファイルを読み込みに行きます。

そして、外部JavaScriptファイルを読み込んでいる間はレンダリング(描画)が止められるため、head要素内にそのような外部ファイルがあるとページが表示されるのがそのぶん遅くなります。

その時点で無駄なHTTP通信が1本(外部ファイルが1つの場合)発生し、その間はページの表示が止められるということです。

JavaScriptの外部ファイルの読み込みはhead要素内に限らずbody要素内に書くことも認められています。

<html>
<head>

</head>
<body>


<script src="ここにJavaScriptファイルへのパス"></script>
</body>
</html>

body要素の最後からJavaScriptの外部ファイルを読み込むことで、HTML内の要素の読み込みがストップされることなく最後までいきます。

一般的なページ構造であれば、ページを表示するために最も優先されるべきものはHTMLファイルとCSSファイルですから、そちらを優先させてダウンロード・レンダリングさせたほうがページ表示のタイミングが早くなります。

たとえトータルでダウンロードするファイルの数やサイズは同じだとしても、画面上に表示されるタイミングが一瞬でも早いほうが体感速度が早まるのです。

そのような理由から、ページの表示後に読み込み・実行しても問題ない内容(アクセス解析ツールなど)のJavaScriptファイルはhead要素内で読み込むのではなく、body要素の最下部に書いておいたほうが良いでしょう。

実際のところ、head要素内でJavaScriptコードを読み込んだとしても、そのコード内容が実行されるタイミングはページ表示後というケースが多いです。

なぜなら、JavaScriptのコードではonloadreadyといった関数が使用されるのが一般的で、これらの関数によって実行タイミングが「DOMツリー構築後(ready)」とか「ページの表示後(onload)」などにされているからです。

「DOMツリー構築後って何だ?」と思った方もいると思いますが、大ざっぱに言えば「ページ表示後」とだいたい同じと考えていいです。
つまり、head要素内で外部JavaScriptファイルを読み込むと、

外部JavaScriptファイルを読み込んでいる間はページのレンダリングが止められるけども、そのJavaScriptの内容の実行はページ表示後に行われる。

という全く無駄な状況が生まれてしまうのです。
というわけで、外部JavaScriptファイルの読み込みはbody最下部に書くようにしましょう。

ページ表示速度にうるさいGoogleもそれを推奨しています。
参考リンク:レンダリングを妨げる JavaScript を削除する  |  PageSpeed Insights |  Google Developers

WordPressでjQueryをフッターで読み込ませたい場合は「WordPress同梱のjQueryをGoogle CDNのものに変更してwp_footer()で読み込む方法」のページで解説しています。

提供サポートなど