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

JavaScriptのコードをHTMLとは別ファイルとして保存し、HTMLからリンクさせて読み込むことを「外部ファイル化する」と呼んだりします。
その際、以下のようにHTMLのhead要素内から読み込むことには大きなデメリットがあります。

<html>
<head>

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

</head>
<body>


</body>
</html>

JavaScriptの外部ファイルをhead要素内で読み込むとどうなるか?

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

コードはHTMLファイルの一番上から順番に読み込んでいき、その途中にJavaScriptなどの外部ファイルがあればその時点でその外部ファイルを読み込みに行きます。
そして、外部JavaScriptファイルを読み込んでいる間はレンダリング(描画)が止められるため、head要素内にそのような外部ファイルがあるとページが表示されるのがそのぶん遅くなります。
その時点で無駄な通信が1本(外部ファイルが1つの場合)発生し、その間ページの表示が止められるということです。

外部JavaScriptファイルはbody要素の最下部から読み込むほうがベター

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

<html>
<head>

</head>
<body>


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

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

一般的なページ構造であれば、ページを表示するために最も優先されるべきものはHTMLファイルとCSSファイルですから、そちらを優先させてダウンロード・レンダリングさせたほうがページ表示のタイミングが早くなります。
たとえトータルでダウンロードするファイルの数やサイズは同じだとしても、画面上に表示されるタイミングが一瞬でも早いほうが体感速度が早まるのです。

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

JavaScriptをhead要素内で読み込んだとしても、その実行タイミングはページ表示後だったりします

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

なぜなら、JavaScriptのコードではonloadreadyといった関数が使用されるのが一般的で、これらの関数によって実行タイミングが「DOMツリー構築後」とか「ページの表示後」などにされているからです。
「DOMツリー構築後って何だ?」と思った方もいると思いますが、大ざっぱに言えば「ページ表示後」とだいたい同じと考えていいです。
つまり、head要素内で外部JavaScriptファイルを読み込むと、

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

という全く無駄な状況が生まれてしまうのです。
外部JavaScriptファイルの読み込みはbody最下部に書くようにしましょう。
ページ表示速度にうるさいGoogleもそれを推奨しています。
参考リンク:レンダリングを妨げる JavaScript を削除する  |  PageSpeed Insights |  Google Developers

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

サポートBBS

サイト内を検索
サイト運用事例
提供サービス
メールフォーム

ダウンロード一覧へ

アンケートフォーム

ダウンロード一覧へ

BBS

ダウンロード一覧へ

その他おすすめ

ダウンロード一覧へ

Web制作のブログ

ブログ記事一覧へ

カテゴリ別
制作者の詳細
  • 谷元博のブログ
  • Google+