JavaScriptの実行時間を短縮する

JavaScriptの実行に時間がかかると、ページのパフォーマンスはさまざまなかたちで低下します。

• ネットワークコスト

  バイト数が多いと、ダウンロードも長引きます。

• 解析とコンパイルのコスト

  JavaScriptは、メインスレッドで解析およびコンパイルされます。メインスレッドがビジー状態に陥ると、ページはユーザー入力に応答できません。

• 実行コスト

  JavaScriptもまた、メインスレッドで実行されます。ページがその時点ではまだ必要のないコードを数多く実行してしまうと、Time to Interactive (インタラクティブになるまでの時間) (ユーザーがどのようにページの速度を認識しているかを判断するための主な指標の1つ) も遅延します。

• メモリコスト

  JavaScriptが多くの参照を保持すると、それにより多くのメモリが消費される場合があります。大量のメモリを消費するページは、ぎくしゃくしたり、遅く見えたりします。メモリリークが発生すると、ページは完全にフリーズしてしまう場合があります。

# LighthouseのJavaScript実行時間監査が失敗する原因

JavaScriptの実行に2秒以上かかると、Lighthouseは警告を表示します。実行に3.5秒以上かかると、監査は失敗します。

実行時間が長くなる最大の要因を特定できるように、Lighthouseは、ページが読み込む各JavaScriptファイルの実行、評価、解析に費やされた時間を報告してくれます。

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

• Only send the code that your users need by implementing code splitting.
• Minify and compress your code.
• Remove unused code.
• Reduce network trips by caching your code with the PRPL pattern.

For other ways to improve page load, check out the Performance audits landing page.

# リソース

Reduce JavaScript execution time (JavaScriptの実行時間を短縮する) 監査のソースコード