外部JavaScriptの読み込みはhead要素外にも書ける

スクリプトはhead要素外にも書ける

▲スクリプトはhead要素外にも書ける

外部JavaScriptファイルを読み込むためのscript要素は、HTMLのhead要素内にしか記述できないわけではありません。右図のように、body要素内に記述することもできます。

このscript要素の記述位置は、ウェブページの表示速度(表示完了までにかかる時間)に影響する可能性があります。


 

script要素の記述位置によってページの表示速度が変わる

例えば、読み込みに5秒間かかるJavaScriptファイルを用意して、
  1. HTMLの先頭付近(=head要素内)でJavaScriptファイルを読み込む
  2. HTMLの半ば(=body要素の中間)でJavaScriptファイルを読み込む
  3. HTMLの最後(=</body>タグの直前)でJavaScriptファイルを読み込む
ように記述した場合、読み込み開始から3秒後あたり(=JavaScriptファイルを読み込んでいる最中)では、だいたい以下のような表示になります。

1はまったく表示されず、2は中間まで、3は全部表示されている

▲1はまったく表示されず、2は途中まで表示、3は全部表示されている


上図のようになる理由は、HTML中にJavaScriptファイルを読み込む記述があると、そのJavaScriptを読み終わるまで、ウェブページのレンダリング(描画)が止まってしまうからです。

外部JavaScriptファイルをHTMLの先頭で読み込ませると、そのJavaScriptを読み終わるまでページの描画が始まらなくなってしまいます。しかし、HTMLの末尾で読み込ませれば、ページの描画が全て終わってからJavaScriptファイルが読まれるため、(JavaScriptファイルの読み込み完了を待つために)描画が止まることはありません。

外部JavaScriptファイルの読み込みで速度低下を防ぐには

スクリプトはHTMLの最後に

▲スクリプトはHTMLの最後に

JavaScriptファイルの読み込みによってページの表示完了にかかる時間が遅くなるのを防ぐためには、できるだけ(外部JavaScriptファイルを読み込むための)script要素は、HTMLの最後に記述するようにしましょう。

ページの描画に直接影響するようなスクリプトであれば、末尾に追いやるわけにはいかない場合もあります。しかし、そうではない内容なら、HTMLソースの最後(=</body>要素の直前)に記述するのが良いでしょう。

例えば、
  • アクセス解析のスクリプト(=描画にまったく影響しないスクリプト)
  • ある条件(時刻やユーザの操作など)によって特定の位置の描画を変化させるスクリプト(=ページの描画が全て終わってから機能するスクリプト)
などは、読み込みが最後でも問題ありません。

※外部JavaScriptファイルの読み込み位置を変更した場合は、描画途中にエラーが発生しないかどうかや、描画が想定通り正しく行えているかどうかなどを、公開前に確認して下さい。

記述位置だけで、読込速度や表示速度に影響する

今回ご紹介したように、最終的な表示結果が同じであっても、外部ファイルを読み込む際の記述方法や記述位置によって、読込完了までにかかる時間や表示(描画)完了までにかかる時間は変化します。外部CSSファイル・外部JavaScriptファイルを読み込ませる場合には、ぜひ気をつけてみて下さい。

【関連記事】



※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。