JavaScript の実行時間を短縮する

JavaScript の実行に時間がかかると、いくつかの点でページのパフォーマンスが低下します。

  • ネットワーク費用

    バイト数が多ければダウンロード時間が長くなります。

  • 解析とコンパイルの費用

    JavaScript が解析されて、メインスレッドでコンパイルされます。 メインスレッドがビジー状態の場合、ページはユーザー入力に応答できません。

  • 実行費用

    JavaScript もメインスレッドで実行されます。実際に必要になる前にページで大量のコードが実行されると、操作可能になるまでの時間も長くなります。これは、ユーザーがページ速度をどう感じているかに関連する重要な指標のひとつです。

  • メモリ費用

    JavaScript が多数の参照を保持している場合、メモリを大量に消費する可能性があります。ページのメモリを大量に消費すると、表示がジャンクしたり動作が遅くなったりします。 メモリリークによりページが完全にフリーズする可能性があります。

Lighthouse JavaScript の実行時間の監査が失敗する仕組み

Lighthouse では、JavaScript の実行時間が 2 秒を超えた場合に警告が表示されます。実行に 3.5 秒以上かかる場合、監査は不合格になります。

Lighthouse による JavaScript の実行時間短縮の監査のスクリーンショット

実行時間に最も大きく貢献している要素を特定できるよう、Lighthouse ではページの読み込み時に発生した各 JavaScript ファイルの実行、評価、解析に要した時間がレポートされます。

JavaScript の実行を高速化する方法

ページの読み込み時間を短縮するその他の方法については、パフォーマンス監査のランディング ページをご覧ください。

関連情報

JavaScript の実行時間を短縮する監査のソースコード