JavaScript の実行に時間がかかると、いくつかの点でページのパフォーマンスが低下します。
ネットワーク費用
バイト数が多ければダウンロード時間が長くなります。
解析とコンパイルの費用
JavaScript が解析されて、メインスレッドでコンパイルされます。 メインスレッドがビジー状態の場合、ページはユーザー入力に応答できません。
実行費用
JavaScript もメインスレッドで実行されます。実際に必要になる前にページで大量のコードが実行されると、操作可能になるまでの時間も長くなります。これは、ユーザーがページ速度をどう感じているかに関連する重要な指標のひとつです。
メモリ費用
JavaScript が多数の参照を保持している場合、メモリを大量に消費する可能性があります。ページのメモリを大量に消費すると、表示がジャンクしたり動作が遅くなったりします。 メモリリークによりページが完全にフリーズする可能性があります。
Lighthouse JavaScript の実行時間の監査が失敗する仕組み
Lighthouse では、JavaScript の実行時間が 2 秒を超えた場合に警告が表示されます。実行に 3.5 秒以上かかる場合、監査は不合格になります。
実行時間に最も大きく貢献している要素を特定できるよう、Lighthouse ではページの読み込み時に発生した各 JavaScript ファイルの実行、評価、解析に要した時間がレポートされます。
JavaScript の実行を高速化する方法
- コード分割を実装することで、ユーザーが必要とするコードのみを送信する。
- コードを最小化して圧縮する。
- 未使用のコードを削除します。
- PRPL パターンを使用してコードをキャッシュに保存することで、ネットワーク トリップを削減します。
ページの読み込み時間を短縮するその他の方法については、パフォーマンス監査のランディング ページをご覧ください。