「JavaScript の実行にかかる時間の低減」とは？改善方法も解説【PageSpeed Insights】

Googleが提供する無料のWebページ診断「PageSpeed Insights」。診断にかけるとWebページの読み込み時間の短縮につながるヒントが得られます。
その中のひとつである「JavaScript の実行にかかる時間の低減」とはどういう意味か、また診断結果を改善する方法についても解説します。

　

「JavaScript の実行にかかる時間の低減」とは？

JavaScriptとは、現代のウェブページ構築において欠かすことができないパーツになっています。ウェブをより流動的にしてくれますが、一方で利用するユーザー側のパソコンのスペックや、ブラウザの環境に依存しているという点が問題とされています。JavaScriptで構築されたサイトのパフォーマンスを改善する方法はいくつかありますが、基本的にはどれだけ効率的にユーザー側にデータを読み込ませるか。または、元々の容量を小さくするかです。サイト運営者側の考え方により、どの方法をチョイスするかは違ってきます。

「JavaScript の実行にかかる時間の低減」の改善方法

HTTP/2を利用する

旧来のHTTP/1.1では基本的に一つずつの処理しかできませんでした。例えば、webページにいくつかのアイコンがあったとして、ひとつのアイコンを読み込んだ後に、ようやく次のアイコンを読み込みはじめるわけです。HTTP/2は比較的新しいHTTPプロトコルで、JavaScriptで構築された部分だけではなく、サイト全体のパフォーマンスを効果的に改善できます。いくつものリクエストやレスポンスを一度に処理、送受信できるという機能がポイントです。HTTP/1.1で挙げた例にあてはめると、いくつかあるアイコン全てを同時に読み込む事ができるようになります。HTTP/1.1に比べて閲覧するユーザー側のブラウザ環境に依存せずに、通信効率が改善され相対的にwebページの読み込みが早くなります。

HTMLの容量を小さくする

ウェブサイトのページサイズというものは、全体のパフォーマンスに大きく関係してきます。HTMLの容量が大きいと、それだけwebページの読み込みが遅くなってしまいます。HTMLの容量を小さくするという意味は、タグの数を減らしたり、表示させる画像等の大きさを小さくまとめることを指します。専用のソフトウェアで圧縮することも可能ですが、それではどうしてもweb構成がチグハグになってしまうというリスクが伴います。出来るだけ、自分の手でHTMLの内容を削減するように考え、実行することも重要です。意識的にコンパクトに構成するように心がけましょう。

JavaScriptファイルを圧縮する(minファイル化)

JavaScriptファイルの圧縮とは、不要なデータや重複したデータの削除やそもそも使用されていないコードの削除などをすることを指します。これらは自分の経験やスキルを利用して圧縮することも可能ですが、HTMLの圧縮、軽量化に比べたら複雑な処理が必要になってくるので出来るだけ専用の圧縮ソフトウェアなどを積極的に利用しましょう。JavaScriptファイルの容量が小さければ小さいほど、ユーザー側のブラウジング環境に影響されずにwebサイトの高速化が可能です。圧縮ソフトウェアを使い軽量化に成功したら、ソースコードを読むなどして細かい部分は自分の手で調整していくといった方法も有効です。

これらの改善策を行ったあとは、page speed insightsを利用して対策をする前と、した後の「JavaScript の実行にかかる時間」を比較してみましょう。