2/2 外部CSSと外部JavaScriptで表示速度の低下を防ぐには [ホームページ作成] All About

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

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

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

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

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

例えば、読み込みに5秒間かかるJavaScriptファイルを用意して、

HTMLの先頭付近(＝head要素内)でJavaScriptファイルを読み込む
HTMLの半ば(＝body要素の中間)でJavaScriptファイルを読み込む
HTMLの最後(＝</body>タグの直前)でJavaScriptファイルを読み込む

ように記述した場合、読み込み開始から3秒後あたり(＝JavaScriptファイルを読み込んでいる最中)では、だいたい以下のような表示になります。

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

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

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

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

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

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

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

例えば、

アクセス解析のスクリプト(＝描画にまったく影響しないスクリプト)
ある条件(時刻やユーザの操作など)によって特定の位置の描画を変化させるスクリプト(＝ページの描画が全て終わってから機能するスクリプト)

などは、読み込みが最後でも問題ありません。

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

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

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

【関連記事】