JavaScript最適化による表示スピード高速化

JavaScript最適化をして表示スピード高速化する方法

JavaScriptを外部ファイル化する

JavaScriptの外部ファイル化は、ファイル管理面やメンテナンス性しやすいだけでなく、表示スピード高速化するという点においても有効です。

HTMLファイルなど、変更の可能性が高いものはキャッシュさせないことがあります。
そのHTMLファイルにJavaScriptやCSSを直接記述している（インライン化）と、リロードするたびにHTMLと一緒にJavaScriptやCSSの記述も再読み込みしてしまいます。
記述されている分だけHTMLのファイルサイズが大きくなる上に、通信量も増えて表示スピードに影響がでます。

JavaScriptを外部ファイル化しキャッシュするようにしておけば、読み込み時の通信量がその分減ります。

しかし、外部ファイル化がしておけば、必ず表示スピードが高速化されるわけではないのに注意が必要です。

webページを表示する時、HTMLコードを上から順に解析する「HTMLパース」という処理を行うのですが、
scriptタグなど外部ファイルを読み込む際は解析を一旦停止し、外部ファイルのダウンロードと、処理の実行を優先します。

そのため、外部ファイルが存在すると、ダウンロード（読み込み）や処理の実行時間の分だけ、HTMLの表示が遅れることになります。
初回読み込み時などのキャッシュが無効の場合は、外部ファイル化している時の方が表示が遅くなる可能性もあることを理解しておきましょう。

また、JavaScriptの書き方を変更することで、ブラウザ処理の負荷軽減や表示の高速化が可能です。
外部ファイル化する際に記述方法に関しても改めて見直しましょう。

JavaScriptファイルの記述を変更して読み込みを遅らせる

ユーザーに表示の速さを体感させるには、内でJavaScriptのやCSSファイルの記述順にも気を付ける必要があります。

CSSファイルより先にJavaScriptファイルの記述がある場合、JavaScriptファイルの記述に到達した時点で、JavaScriptの解析・処理を行います。
JavaScriptファイルの解析・処理が完了後に、CSSファイルを読み込み、解析して適用します。
この記述のままだと、CSSの適応までに時間がかかり正しいデザイン（見た目）でページが表示されないことがあります。
CSSファイルより先にJavaScriptファイル記述することで、デザインの表示を優先させることが可能です。

ファーストビューに関わるJavaScriptがある場合、CSSが適用する完了する前にJavaScriptの処理を優先させたい時もあると思います。
次に読み込みや処理をコントロールできる属性をご紹介します。

defer属性、async属性を使用することで読み込みをコントロールできる

「defer」や「async」という属性を使うことで、JavaScriptファイルやCSSファイルの処理をコントロールすることができます。
scriptタグにdefer属性を付与することで、JavaScriptの読み込みだけを行い、処理を後回しにできます。

async属性は、JavaScriptの読み込みが終わり次第、処理を実行させます。

表示に影響があるJavaScriptはasync属性を使い、後回しにしても問題ないJavaScriptにはdefer属性を使うと良いでしょう。

外部ファイル化したJavaScriptファイルは極力1つにまとめる

運用上、CSSファイルやJavaScriptファイルは複数に分割されていることが多いです。
しかし表示スピード高速化する場合、内で読み込む外部ファイル多いと、表示が遅くなる可能性があります。

1ファイルにつきHTTPリクエストが1回増えるので、表示が遅くなるのです。

例えばタグで外部CSSファイルを読み込む記述は、サーバーに対して「このCSSファイルをください」という要求（HTTPリクエスト）を投げることです。
サーバーはこのHTTPリクエストに対して、該当ファイルを返す（HTTPレスポンス）という処理を行います。

ファイルを複数に分割して複数回のHTTPリクエストを送るより、ファイルを1つにまとめて、少ない回数でHTTPリクエストを行う方が表示速度が改善する可能性が高いでしょう。

ライブラリを改良する

JavaScriptの高度な処理が手軽に行えるライブラリは便利ですが、使わないソースコードや処理も多く含まれているため、表示スピード高速化には向きません。

表示スピード高速化をする場合、処理の高速化、ライブラリから不要なソースコードや処理を削除しましょう。
ライブラリを改良するのでなく、そもそもファイルを自分で作った方が良い場合もあるので覚えておきましょう。

JavaScriptファイルをMinify化する

Minify化は、JavaScriptの変数名の短縮化やコメントアウト・空白・改行の削除をツールを使って行うことを言います。
JavaScript Minifier（https://javascript-minifier.com/）のようなサービスを使うことで手軽にMinifyが可能です。

Minify化をすると、ファイルサイズはかなり軽量化できますが、かなり読みにくい状態になります。
定期的にソースコードを変更するのであれば、Minify化は後回しにする方が良いでしょう。