JavaScriptの読み込み方を工夫することで、表示を高速化しよう

表示高速化
2021-12-21
更新日: 2024-4-11
tomoya.okura

表示高速化するときにJavaScriptの最適化しようとは誰でも思います。
ですが、結局どうすればよいかわからなくなってしまっているのでないでしょうか。

もちろんJavaScriptの読み込みの最適化といってもいろんな観点があるかと思います。
当記事では表示高速化の観点から大まかな方針を示したいと思います。

なお、async等を用いた非同期処理、未使用のJavaScriptの削除、処理のロジックを見直すなどすれば、JavaScript自体も高速化が可能です。

ただ、当記事はあくまで読み込み方の話なので、この辺は割愛します。

1 読み込み方一覧
2 では、どう読み込めばよいのか。
3 読み込み位置について
4 様々なパターン
5 まとめ

読み込み方一覧

まず、そもそもの読み込み方ですが、当記事では主に4種類にわけたいと思います。

１，シンプルな読み込み

ここでは便宜上シンプルな読み込みと表現しましたが、要するに一番単純な読み込み型です。
例

<script src= “./something.js” ></script>

詳細はおそらく知っていると思いますし、調べるとすぐ出てくるので割愛しますが、上記のようにパスを指定して読み込みます。

当記事ではシンプルな読み込みと表記します。
文字通り一番単純な読み込みであるからです。

２，async

上記のコードにasync属性を付与すると、非同期で読み込みができます。

<script type='text/javascript' async src='./something.js' ></script>

asyncを付与することで、JavaScriptをバックグラウンドで読み込むことができます。
非同期読み込みの何が良いのかというと、HTMLの処理を継続したままにできます。
これが通常の読み込みだと、<script>タグの位置で、HTMLの処理を一旦ストップして、JavaScriptを読み込みます。

処理がストップしない分、表示高速化につながります。

asyncの場合、読み込みが終了した時点でJavaScriptが実行されます。その実行の間はHTMLの処理がストップするので注意です。

３，defer

asyncだけでなくdeferを使うことでも、非同期で読み込めます。

<script type='text/javascript' defer src='./something.js' ></script>

asyncと同じくバックグラウンドで読み込むことで、その間はHTMLの処理がストップせず、高速化につながります。
asyncとの違いは、JavaScriptを読み込んだ後の振る舞いにあります。
asyncは読み込みが完了するとすぐ実行されますが、deferはそうではありません。
読み込みが終わっても、そのタイミングでは実行せず、HTMLの処理が終了しDOMが構築された後、DOMContentLoadedの直前のタイミングで実行されます。

４，インライン

インラインとはそのままを用いてHTMLにJavaScriptのコードを直接記述する方法です。

<script type='text/javascript'>
     //何かしらのJavaScriptを記述
</script>

前述した３つの読み込み方ではJavaScriptの記述が書かれたファイルが別にあるので、それを読み込みに行きますが、インラインだとその必要がないので、その分処理が少なくて済みます。

なお、インラインの場合、<script>タグにasyncやdeferを用いても実行されないので注意してください。基本的に同期的に読み込まれるため、HTMLの処理がストップし、全体の読み込みは遅くなってしまいます。

では、どう読み込めばよいのか。

読み込み方には複数種類がありますが、ではサイトの表示高速化のためにはどの読み込み方をすればよいのでしょうか。
大まかにはなりますが、基本的には下記の方針がオススメです。

基本はdeferで読み込み
特別な場合はasyncを使う
インライン、シンプルな読み込みは基本ファーストビューかライブラリの読み込みに使う

１つ１つ解説していきます。

基本はdefer

さて、asyncとdeferによる非同期で読み込みです。どちらを使うか迷うかもしれませんが、基本deferです。

まず非同期で読み込むのは、HTMLの解析処理を止めないためです。HTMLを処理しつつ、バックグラウンドでJavaScriptを読み込むことで全体として速く読み込みを終えることができます。

asyncはHTML構築中に実行される可能性があるので、deferにしてDOMcontentLoadedの直前に実行させるのがよいでしょう。asyncも悪くはないですが、deferの方がより良いでしょう。

特別な場合はasyncを使う。

非同期読み込みの場合、基本はdeferですが、全てのパターンをカバーしきれるわけでなく、asyncを使った方がよい場合もあります。

抽象的な言い方になりますが、サードパーティースクリプト、何かをトラッキングする類のJavaScript、DOM(HTML)の一部の箇所に適応されるJavaScriptに対して使うと良いです。

例えば、Google Adsenseのタグでも

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

などの読み込み方が紹介されています。

引用元:https://developers.google.com/publisher-ads-audits/reference/audits/async-ad-tags?hl=ja

非同期で読み込みながらも早めに実行させたい場合がこれに当てはまります。

なお、非同期で読み込むとうまく機能しなくなるものもあるのでそれは注意です。

一度asyncで読み込めるか検討してみるとよいでしょう。

シンプル、インラインはファーストビューで使う。

まず、シンプルな読み込みは使用しない方向でよいかと思います。非同期でない読み込み方はHTMLの解析をストップさせるため、全体の読み込みが遅くなってしまうからです。

とはいえ、そのデメリットを許容してもインラインやシンプルなやり方でJavaScriptを読み込んでもいい箇所があって、それはファーストビューです。

ファーストビューとはサイトにアクセスした際に最初に表示される部分です。
ファーストビューに関してはいち早くJavaScriptを実行させることで、LCPの向上に繋がる場合があります。

正直ここもasyncを使う方が個人的にはオススメです。
ここをシンプルな読み込みかインラインで読む場合、どちらにするかは、制作物や管理方法などで分かれると思います。

LPなどならインラインで良いかと思いますが、
ファイルを別にすると管理がしやすいので、
そのメリットを取る場合はシンプルな読み込みを使ってもよいでしょう。

同期

外部に読みにいかない(インライン)
他の処理をストップするので、jsの読み込み自体はいくらか速くなる可能性がある。

非同期

ファーストビューはともかく、全体はこちらの方が速い。

どちらのメリットをとるのか判断が難しいですが、
個人的には非同期(async)が良いかと思います。

読み込み位置について

さて、ここでは読み込み位置について軽くコメントしておこうと思います。

よく言われるのはheadの中で読むか、の直前で読むか、という話がありますね。
もちろんそれ以外の選択肢もあるかと思いますが、基本的にはこの2択で議論されることが多いです。

実はここまでの話を全て満たせるのなら、JavaScriptをわざわざ</body>の直前に置く必要はなくなります。

むしろ、<head>の中に置く方が良いかと思います。
なぜなら特別な場合を除き、非同期で読み込むことになるので、先に読み込んで置いた方が速く読み込みが終わります。特別な場合もファーストビュー等なので、それらの後にJavaScriptを置くことになり、</body>の前に置くと単に読み込みの開始が遅くなるだけなので、読み込み完了が遅くなってしまう可能性があります。