重要なリクエストのチェーンを回避する

クリティカル リクエスト チェーンは、ページのレンダリングに不可欠な、依存する一連のネットワーク リクエストです。チェーンの長さとダウンロード サイズが大きいほど、ページ読み込みのパフォーマンスに大きく影響します。

Lighthouse では、高い優先度で読み込まれた重要なリクエストが報告されます。

[Lighthouse Minimize total request depth] の監査のスクリーンショット

Lighthouse で重要なリクエスト チェーンを特定する方法

Lighthouse では、レンダリングをブロックする重要なリソースを特定する際にネットワーク優先度を使用します。Chrome でこれらの優先度がどのように定義されているかについては、Google の Chrome のリソースの優先度とスケジュールをご覧ください。

重要なリクエスト チェーン、リソースサイズ、リソースのダウンロードに要した時間に関するデータは、Chrome リモート デバッグ プロトコルから抽出されます。

重要なリクエスト チェーンがパフォーマンスに与える影響を軽減する方法

重要なリクエスト チェーンの監査結果を使用して、ページの読み込みに最も影響するリソースを最初にターゲティングします。

  • 重要なリソースの数を最小限に抑えます。たとえば、リソースを削除する、ダウンロードを延期する、async とマークするなどの方法があります。
  • クリティカル バイト数を最適化して、ダウンロード時間(ラウンド トリップ数)を削減します。
  • 残りの重要なリソースの読み込み順序を最適化します。すべての重要なアセットをダウンロードして、クリティカル パスの長さを短くします。

詳しくは、画像JavaScriptCSSウェブフォントの最適化に関する記事をご覧ください。

スタック固有のガイダンス

Magento

JavaScript アセットをバンドルしていない場合は、baler の使用を検討してください。

関連情報

クリティカルなリクエストの深さを最小限に抑える」監査のソースコード