クリティカル要求をチェーン化しない

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

Lighthouseは、高優先度で読み込まれたクリティカル要求を報告します。

# Lighthouseがクリティカル要求チェーンを識別する方法

Lighthouseは、レンダリングをブロックする重要なリソースを識別するためのプロキシとしてネットワーク優先度を使用します。Chromeがこれらの優先度を定義する方法の詳細については、GoogleのChromeリソースの優先度とスケジュールを参照してください。

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

# クリティカル要求チェーンがパフォーマンスに与える影響を減らす方法

クリティカル要求チェーンの監査結果を使用して、最初にページの読み込みに最大の影響を与えるリソースをターゲットにします。

• 重要なリソースの数を最小限に抑えます。たとえば、これらのリソースを削除したり、ダウンロードを遅延させたり、asyncに設定したりします。
• 重要なバイト数を最適化して、ダウンロード時間 (ラウンドトリップ数) を減らします。
• 残りの重要なリソースが読み込まれる順序を最適化します。クリティカルパスの長さを短くするために、すべてのクリティカルアセットをできるだけ早くダウンロードします。

画像、JavaScript、CSS、およびWebフォントの最適化の詳細をご覧ください。

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

# Magento

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

# リソース

クリティカル要求の深度の最小化監査のソースコード