これまで、デベロッパーがプリロードと事前接続を使用してリソースの優先度に影響を与えることは限定的でした。プリロードでは、読み込む必要のある重要なリソースをブラウザが自然と検出する前に、その情報をブラウザに伝えることができます。これは、スタイルシートに含まれるフォント、背景画像、スクリプトから読み込まれるリソースなど、見つけにくいリソースの場合に特に便利です。サーバーへの接続をウォームアップし、最初のバイトまでの時間などの指標を改善するのに役立ちます。わからない場合に便利です。取得優先度は、こちらのリソースヒントを補完するものです。ベースのシグナルで、デベロッパーはこれを使用して特定のリソースの相対的な優先度を指定できます。プロパティを使用してこれらのヒントを使用して、データに対して行われるリソースの取得の優先度に影響を与えることもできます。フェッチ優先度はプリロードを補完することもできます。プリロードされた画像の優先度は低くなります。優先度の低い他のリソースからプッシュバックされた場合は、優先取得を使用することで、イメージの読み込み時間を改善できます。ページ上のすべてのリソースです。次のロジックが含まれます。リソースなどのリソースの種類。ドキュメントがリソースを参照する場所または順序。属性を使用するかどうか。大部分のリソースの優先順位と順序付けがどのように行われるかを示しています。あり、レイアウトをブロックします。)は初期レイアウトをブロックしません。読み込まれないため、ブラウザはより重要なリソースに集中できます。優先度で読み込まれます。表の脚注にその他の説明があります。使用してプリロードすると、リクエストしているデスティネーションの優先度が使用されます。高い優先度を使用します。「早着」「遅延」とは、プリロードされていないイメージがリクエストされる前にリクエストされる、「遅延」という意味です。プリロードされていないイメージがリクエストされた後になります。スキャナによって取得されず、メインパーサーが到達したときにのみ処理されます。通常はかなり遅れて取得されます。レイアウト時に、ビューポート内の画像は「高」にブーストされます。つを並列にフェッチできます。使用してマークアップで重要な画像にタグを付けると、「高」から開始できます。はるかに高速になりますブラウザは、同じ優先度で、検出された順にリソースをダウンロードします。タブで、ページの読み込み時にさまざまなリソースに割り当てられた優先度を確認できます。列を必ず含めてください)。設定またはツールチップに初期優先度と最終優先度の両方が表示されます。必要になるのは、どのような場合ですか。リソースのダウンロードの優先度に影響を与えるために変更できる変更の例を以下に示します。リソースタグは、ブラウザにダウンロードされる順序に配置します。同じ優先度のリソースは、通常、検出された順に読み込まれます。リソースヒントを使用して、必要なリソースを早い段階でダウンロードします。ブラウザで早期に発見するのが難しいリソースの場合に特に役立ちます。使用すると、他のリソースをブロックせずにスクリプトをダウンロードします。スクロールしなければ見えない範囲のコンテンツを遅延読み込みして、ブラウザがスクロールせずに見える範囲のより重要なリソースに使用可能な帯域幅を使用できるようにします。Paint(LCP)が改善されます。場合によっては、これらのハンドルだけでは、アプリケーションに最適なリソースの優先順位を決めるのに十分でないことがあります。フェッチ優先度が役立つシナリオをいくつか紹介します。スクロールせずに見える範囲に画像が複数ありますが、すべての画像の優先度を同じにする必要はありません。画像カルーセルでは、最初に表示される画像のみの優先度を高くする必要があります。通常は画面外の他の画像については、優先度を低く設定できます。それがビューポートに表示されていることを検出し、優先度を上げます。そのため、ヒーロー画像などの重要な画像の読み込みに大幅な遅延が発生します。開始して、はるかに早く画像の読み込みを開始できます。方がさらに効果的です。画像を早期に検出するには、引き続きプリロードが必要です。して宣言すると、ブラウザはスクリプトを非同期で読み込むよう指示します。優先度の表に示されているように、これらのスクリプトには「低」のあります。エクスペリエンスに重要なスクリプトでは、非同期ダウンロードを確保しつつ、優先度を上げることをおすすめします。呼び出しが混在している場合には、一部のフェッチを低い優先度で実行することもあります。優先度を割り当てますが、一部のリソースが他のリソースよりも重要となる場合があります。タグでダウンロードする際に、CSS、フォント、スクリプト、画像などのリソースタイプのダウンロード優先度を指定します。リソースの優先度が高く、ブラウザ独自のヒューリスティックにより優先度が上がらない限り、ブラウザが通常よりも優先度を高くする必要があります。リソースの優先度が低いため、ブラウザでヒューリスティックで許容できる場合は優先順位を下げます。ブラウザが適切な優先度を選択できるようにします。プロパティを次に示します。属性を適用して、計算される優先度を増減できます。fetchpriority="auto"(◉)は、そのタイプのリソースのデフォルトの優先度を示します。ドキュメントでも確認できます)。highest(◉)です。fetchpriority=high(Ъ)を使用しても、上限があるほど高いため、これ以上増加することはありません。下がり、下がることはありません。フェーズで読み込むことができます。表の脚注にその他の説明があります。プリロードすると、リクエストしているデスティネーションの優先度が使用されます。高い優先度が使用されます。「早着」プリロードされていないイメージがリクエストされる前にリクエストされること(「遅延」は「遅延」の後)です。スキャナによって取得されず、メインパーサーが到達したときにのみ処理されます。あっても、かなり遅れてフェッチされます。つを並列でフェッチできます。使用してマークアップで重要な画像にタグを付けると、「高」から開始できます。設定するのではなく、相対的な優先度を設定します。デフォルトの優先度を適切に増減させます。なりますが、常にそうとは限りません。指定すると、「非常に高い」/「最高」が保持されます。使用すると、「高」が維持され、あります。明示的に設定しません。属性は、リソースの取得優先度に関するヒントをブラウザに与えたい場合に使用します。重要なイメージの優先度を上げることができます。背景画像を示しています。フライトのページを書き換えるテスト。使用すると、スクロールせずに見える範囲の画像のうち、すぐに重要ではない画像(画像カルーセルのオフスクリーン画像など)の優先度を下げることができます。属性が追加された場合でも読み込みます。適切な解決策となります。アプリの以前のテストでは、このメソッドを使用して、読み込み時に表示されない画像の優先度を下げました。最初のカルーセル画像にのみ高い優先度を使用すると、ページの読み込みが速くなります。プリロードされたリソースの優先度を下げるプリロードされたリソースが他の重要なリソースと競合しないようにするには、優先度を下げます。リソースをブロックしないようにする必要があります。マークを付けることができます。してマークすることはできません。後でページを実行した場合は、低い優先度で読み込むことができます。fetchpriority="low"></script>これにより、このスクリプトに到達するとパーサーはブロックされますが、それ以前のコンテンツを優先させることができます。使用することもできます。同時に実行される可能性がある取得が複数ある場合は、重要度の高いデータの取得にはデフォルトの高い優先度を使用し、重要度の低いデータの優先度は引き下げることができます。'low'});優先度の実装メモを取得する取得優先度を使用すると、特定のユースケースでパフォーマンスが向上する場合があります。取得優先度を使用する際は、以下の点に注意してください。属性はヒントであり、ディレクティブではありません。ブラウザはデベロッパーの設定を尊重しようとしますが、リソースの優先度の設定を適用して競合を解決することもできます。フェッチ優先度とプリロードを混同しないでください。プリロードは必須のフェッチであり、ヒントではありません。プリロードを使用すると、ブラウザはリソースを早期に検出できますが、デフォルトの優先度でリソースが取得されます。逆に、取得優先度は見つけやすさには役立ちませんが、取得優先度を増減することはできます。多くの場合、優先度の変更による影響よりも、プリロードの影響を観察、測定するほうが簡単です。フェッチ優先度は、優先度をより細かく設定することで、プリロードを補完できます。大幅に改善されない可能性があります。より向上させることができます。優先順位付けによる読み込み時間の改善は、利用可能なネットワーク帯域幅を奪い合うリソースが多い環境では、より重要になります。接続でよく発生します。そのような場合、優先順位付けによってボトルネックの解決に役立ちます。優先度を通知しても、指定した順序でリソースの優先順位が再設定されないことがあります。このため、取得優先度のテストが難しくなります。HTTP/3)で適用されます。送信元のサポートから独立して内部ブラウザの優先順位付けを行うためだけに、やはり有用です。ブラウザがリソースをリクエストすると優先度が変わることが多いからです。アイテムを処理している間、リクエストされないことがよくあります。プラクティスとして導入できない場合があります。開発サイクルの後半で、ページ上のさまざまなリソースに優先度を割り当てることができます。画像)をプリロードする、意図された目的に使用する必要があります。ヒントの配置は、リソースがプリロードされるタイミングに影響します。取得優先度とは、リソースがフェッチされるときに、そのリソースをどのようにフェッチするかということです。プリロードを使用する際のヒントプリロードを使用する場合は、次の点に注意してください。ヘッダーにプリロードを含めると、読み込み順で他のすべてのものよりも前に配置されます。以上のものについては、パーサーが到達する順序でプリロードされます。先頭にプリロードを含める場合は注意が必要です。フォントのプリロードは、おそらく頭の最後または本文の最初に使用するのが最適です。modulepreload)は、インポートを必要とするスクリプトタグの後に実行する必要があります。そのため、依存関係の読み込み中に評価できるように、必ずスクリプトの読み込みまたは解析を行ってください。属性を使用してテストされました。当時は優先度ヒントと呼ばれていました。インターフェースが変更されました。まとめデベロッパーはおそらく、プリロード動作の修正を備えたフェッチ優先度に興味を持つでしょう。重点が置かれています。そこで、希望する読み込みシーケンスを実行するために追加のノブを使用できるようになりました。ライセンスにより使用許諾されます。ライセンスにより使用許諾されます。サイトのポリシーをご覧ください。関連会社の登録商標です。