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

公開日 更新日

翻訳先言語: English, Español, Português, 한국어, 中文, Pусский

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

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

Lighthouseのクリティカル要求深度の最小化監査のスクリーンショット

See the Lighthouse performance scoring post to learn how your page's overall performance score is calculated.

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

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

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

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

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

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

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

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

Magento

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

リソース

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

最終更新日: 記事を改善する

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.