JavaScriptがWebサイトの読み込み速度を遅くする理由

モバイルサイトの検索順位について考える際に、一般的に最初に気になるのはWebサイトの読み込み速度です。読み込み速度を向上させる方法として、最初に思いつくのは画像のファイルサイズの調整です。それはそれで、確かに効果はあります。しかし、Webサイトの読み込み速度を決定する要因がJavaScript（以下JS）であるということはしばしば見落とされがちです。JSという言語は、ほとんどすべてのWebサイトのコードに使用されています。
Webサイトのコードでは、HTML（HyperText Markup Language）がWebサイトの構造とコンテンツとを調整し、CSS（Cascading Style Sheets）がWebサイトの外観や表示形式を調整します。JSは表示ページに双方向性を与え、ダイナミックな動きを実現します。Webサイトを構築するプロセスで、われわれはJSを使ってWebサイトに期待する機能を持たせようとしますが、JSは要求される機能を実現するのと同時に、Webサイトの読み込み速度にも影響を与えます。過去５年の間にモバイルサイトのJSの平均ファイルサイズは１０１キロバイトから３８７キロバイトにまで増大しています。

JSがWebサイトの読み込み速度を遅くする2つのポイント

1つ目のポイントとなるのは、JSのコードのサイズです。画像ファイルのサイズと変わらず、画像ファイルに次いで大きいようだと読み込み速度の向上を妨げます。
2つ目のポイントはJSのスプリクトの実行です。ファイルのダウンロードが完了して，ブラウザーがJSのスプリクトを実行しようとすると、Webページ上の他の要素のダウンロードと読み込みを阻害します。そしてこの阻害はJS本体の大きさが与える影響よりもさらに深刻です。

Webサイトの読み込み速度はJSの種類によって決まる
JSは読み込みの方式によって、ブロッキング型、埋込み型、非同期読み込み型、遅延読み込み型に分類できます。

１.ブロッキング型JS

ブロッキング型JSというのはJSがWebページと同期的に読み込まれるもので、ブラウザーがWebページのコードを順に読み込み、JSが記述されている行まで来たときに、そのJavaScriptのダウンロードや読み込みの処理が終わるまでは、後続のコードの読み取りが行われません。Webページの表示もJavaScriptの読み込みが終わるまでブロックされます。ついでに言えば、もしJSの読み込み方式を指定しなければ、この型がデフォルトです。

２．埋込み型JS(inline)

埋込み型JSは、直接JSをWebサイトのコードの中に書き込むもので、外部から呼び出す必要がありません。このスクリプトはブロッキング型と同じで、ブラウザーがJSを読み取る時に、優先的にJSを読み込み、後続のコードの読み取りはJSの読み取りが終わるまで停止されます。埋込み型JSとブロッキング型JSとの違いは、外部から読み込むJSファイルが必要ないという部分です。

３．非同期読み込み型JS

非同期読み込み型JSは、ブラウザーがJSをダウンロードし、パースしているタイミングで、同時に残りのコードのパースを行います（コードを分析した上で構築と表示を行う）。これを実現するためには、HTML内にasync属性を付与します。ブラウザーに対し、コードにJSがあってもその他の全ての処理を後回しにしなくてよいと知らせます。

４．遅延読み込み型JS

遅延読み込み型JSは、ブラウザーに対して、コードを解析した上でページ画面を構築するまでは、そのJSを実行する必要がないと知らせるものです。HTML内にdefer属性を付与することで実現されます。

JSの最適化でWebサイトの読み込み速度を向上させる方法

１．WebサイトのJSへの依存をできるだけ減らしましょう。JSは、HTMLやCSSではできないことを実現するために使われます。W3Cが徐々にJS特有の機能だったものをHTMLやCSSの標準仕様に追加していて、それがブラウザーによって実現されるようになっているので、HTMLやCSSで実現できることにはJSを使う必要がありません。なぜなら、一般的にHTML やCSSのほうが効率がいいからです。レスポンシブ・イメージがJSを使わずに、CSSとHTMLとで実現できることはその好例です。
２．できるだけ非同期読み込み型JSと遅延読み込み型JSを使い、インラインとブロッキングの方式は使わないようにしましょう。Webサイトの重要な機能や構築がJSに依存してしまっていると、このようなJSでは確かにブロッキングする方式を使うことが必要で、サイトの機能と表示の完全性とがしっかりと保持されます。その他の機能を実現するJSには、非同期読み込み型と遅延読み込み型を使用するべきで、Webサイトが、まずユーザーが見ている前で読み込まれることを確実に保証します。
３．JSの数を減らしましょう。最近の大部分のブラウザーの受け付け可能な同時リクエスト数は最大で６までです。もしWebサイトの同時リクエスト数が６を上回ったら、７番目のリクエストは最初の６つのリクエストのうちのどれか一つが処理を終えるまでは実行できず、リクエストとそれに対するレスポンスの時間が長くなり、それだけWebサイトの表示速度を低下させます。
JSファイルのサイズが大きくなればなるほど、解析と実行にかかる時間は長くなります。ファイルサイズが１キロバイト増えるごとに処理時間は1ms長くなると考えていいでしょう。世界最大の検索エンジンであるGoogleでも「UglifyJS」や「Google Closure Compiler」といった最適化ツールを使ってJSをミニファイすることを推奨しています。

[原文]