「JavaScriptの実行時間を低減」の改善方法6選【PageSpeed Insights対策】
GoogleのPageSpeed Insightsで診断すると表示される警告のひとつが「JavaScript の実行にかかる時間の低減」です。JavaScriptの処理がページ速度のボトルネックになっていることを示しており、TBT（Total Blocking Time）や INP（Interaction to Next Paint）といったCore Web Vitalsの指標悪化にも直結します。この記事では警告の意味と、実際に有効な改善方法を具体的に解説します。
「JavaScript の実行にかかる時間の低減」が出る原因
JavaScriptはページをインタラクティブにするために欠かせない技術ですが、ブラウザはJSを実行している間、他の処理をブロックします。Lighthouseの診断では、JSの解析・コンパイル・実行の合計時間が2秒を超えると警告、3.5秒を超えると失敗と判定されます。
主な原因は以下の通りです。
- 大量の外部ライブラリやプラグインの読み込み
- 同期処理によるレンダリングのブロック（レンダーブロッキングJS）
- 初期表示に不要なスクリプトを最初から全部読み込んでいる
- 50ms以上かかるロングタスクがメインスレッドを占有している
JavaScriptの実行時間を削減する6つの方法
① defer・async属性でレンダーブロッキングを防ぐ
初期表示に直接関係のない外部スクリプトには defer 属性を追加しましょう。defer を付けると、HTMLのパース（解析）を妨げずにスクリプトをダウンロードし、DOM構築完了後に実行されます。これによりメインスレッドの占有が減り、TBTが改善します。
async 属性はダウンロード完了次第すぐ実行するため、実行順序に依存しないGoogle Analyticsなどの計測タグに向いています。
② JavaScriptファイルをminify（圧縮）する
minifyとはコード内の不要な空白・改行・コメントを除去してファイルサイズを縮小する処理です。ファイルが軽くなるほどネットワーク転送が速くなり、解析にかかる時間も短縮されます。Terser や UglifyJS が代表的なツールです。WordPressならキャッシュ系プラグインがminifyを自動で行う機能を持つものもあります。
③ ロングタスクを分割してメインスレッドを解放する
50ms以上かかる処理は「ロングタスク」として判定され、ブラウザの応答性を下げます。重い処理は小さな単位に分割し、setTimeout や scheduler.yield() を使って非同期的に実行することでメインスレッドを定期的に解放できます。計算量が多い処理はWeb Workerに移すことも有効です。
④ HTTP/2を活用して並列読み込みを有効にする
HTTP/1.1はリソースを順番に1つずつ読み込む仕様ですが、HTTP/2では複数のリソースを並行して取得できるため通信効率が大幅に向上します。JavaScriptだけでなく画像やCSSの読み込み速度にも影響します。利用中のレンタルサーバーの管理画面でHTTP/2対応状況を確認してみましょう。
⑤ 不要なスクリプトを削除・制御する
使っていないWordPressプラグインを停止・削除するだけで読み込まれるJSが減ります。さらに「Asset CleanUp」などのプラグインを使えば、特定のページで不要なJSの読み込みをページ単位でオフにできます。テーマが自動で読み込む不要なスクリプトも同様に無効化できます。
⑥ サーバー環境を見直す
サーバーの応答時間（TTFB）が遅いとJSの到達自体が遅くなります。コードを最適化しても根本的な改善に限界があるため、処理能力の低いサーバーを使っている場合は高速なサーバーへの移行も検討してください。
改善後はPageSpeed Insightsで効果を確認する
対策を施したら必ずPageSpeed Insightsで再計測し、改善前後のスコアを数値で比較しましょう。「JavaScript の実行にかかる時間」の値が下がっていれば対策が機能しています。Chrome DevToolsのLighthouseパネルでもより詳細な内訳を確認できます。
JavaScriptの実行時間短縮は、表示速度の改善・Core Web Vitalsスコアの向上・直帰率の低下という複合的な効果をもたらします。まずPageSpeed Insightsで現状を把握し、影響の大きい問題から順番に対処していくのが効率的です。
