このページは Cloud Translation API によって翻訳されました。

Fetch Priority API を使用してリソースの読み込みを最適化する

Fetch Priority API は、ブラウザに対するリソースの相対的な優先度を示します。これにより、最適な読み込みが可能になり、Core Web Vitals を改善できます。

Addy Osmani

Leena Sohoni

Patrick Meenan

Barry Pollard

対応ブラウザ

ソース

ブラウザはウェブページを解析し、画像、スクリプト、CSS などのリソースの検出とダウンロードを開始すると、取得用の priority を割り当てて、最適な順序でダウンロードできるようにします。通常、リソースの優先度は、その内容とドキュメント内の場所によって異なります。たとえば、ビューポート内の画像には High の優先度が設定され、<head> の <link> を使用して早期に読み込まれるレンダリングブロック CSS の優先度は Very High になる可能性があります。ブラウザは優先度を適切に割り当てることができますが、すべてのケースで最適とは限りません。

このページでは、Fetch Priority API と fetchpriority HTML 属性について説明します。この属性を使用すると、リソースの相対的な優先度（high または low）を知ることができます。取得優先度は Core Web Vitals の最適化に役立ちます。

概要

優先取得が役立つ主な領域:

画像要素に fetchpriority="high" を指定して LCP 画像の優先度を上げ、LCP が早く発生するようにします。
async スクリプトの優先度を上げ、現在の最も一般的なハック（async スクリプトに <link rel="preload"> を挿入）よりも優れたセマンティクスを使用。
画像でのシーケンスを改善するために、後期身体スクリプトの優先度を下げます。

Google フライトのホームページの 2 つのテストを比較したフィルムストリップビュー。下部では、取得優先度を使用してヒーロー画像の優先度を高め、LCP を 0.7 秒短縮しています。 — Google フライトのテストで、取得優先度の改善により Largest Contentful Paint が 2.6 秒から 1.9 秒に向上。

これまで、デベロッパーはプリロードとプリコネクトを使用してリソースの優先度に影響を与えることができました。プリロードを使用すると、ブラウザが自然に検出する前に、早い段階で読み込む必要がある重要なリソースをブラウザに通知できます。これは、スタイルシートに含まれるフォント、背景画像、スクリプトから読み込まれたリソースなど、検出が難しいリソースに特に便利です。プリコネクトは、クロスオリジンサーバーへの接続をウォームアップし、最初のバイトまでの時間などの指標を改善するのに役立ちます。オリジンはわかっているものの、必要なリソースの正確な URL がわからない場合に便利です。

取得優先度は、これらのリソースヒントを補完します。これは、fetchpriority 属性で利用できるマークアップベースのシグナルで、デベロッパーは特定のリソースの相対的な優先度を示すために使用できます。また、JavaScript と Fetch API で priority プロパティを使用してこれらのヒントを使用することで、データ用に取得されるリソースの優先度に影響を与えることもできます。フェッチ優先度はプリロードを補完することもできます。Largest Contentful Paint 画像を取得します。この画像がプリロードされていても優先度は低くなります。優先度の低い他のリソースからプッシュバックされた場合は、優先取得を使用することで、イメージの読み込み時間を改善できます。

リソースの優先度

リソースのダウンロード順序は、ページ上のすべてのリソースにブラウザが割り当てた優先度によって異なります。優先度計算ロジックに影響する要因には、次のようなものがあります。

CSS、フォント、スクリプト、画像、サードパーティリソースなどのリソースの種類。
ドキュメントがリソースを参照する場所または順序。
スクリプトで async 属性または defer 属性を使用するかどうか。

次の表に、Chrome がほとんどのリソースの優先度を設定し、順序付ける方法を示します。

この表の読み方の例:

初期の CSS（<head> の CSS など）はデフォルトで highest であり、レイアウトをブロックします。
遅延した CSS（<body> の途中の CSS など）は初期レイアウトをブロックしません。ブラウザがこのレイアウトブロッキングフェーズにある間は、すべて読み込まれるわけではありません。ブラウザがレイアウトブロッキングフェーズを終了するまで、他のリソースとともに 1 つずつ読み込まれるため、ブラウザはより重要なリソースに集中できます。
一致しない CSS（ページが画面に読み込まれて出力されていない場合の media="print" スタイルシートなど）は、lowest 優先度で読み込まれます。

詳細については、表の脚注をご覧ください。

	レイアウトブロッキングフェーズで読み込む		レイアウトブロッキングフェーズで 1 つずつ読み込む
Blink 優先度	VeryHigh	高	中	低	VeryLow
DevTools の優先度	最高	高	中	低	最低
	メインリソース
	CSS（早期**）		CSS（遅れ**）		CSS（メディアの不一致***）
		スクリプト（早期** またはプリロードスキャナからのもの以外）	スクリプト（遅れ**）	スクリプト（非同期）
	フォント	フォント（rel=preload）
		インポート
		画像（ビューポート内）	画像（最初の 5 枚の画像 > 10,000px2）	画像
				メディア（動画/音声）
					プリフェッチ
		XSL
	XHR（同期）	XHR / フェッチ*（非同期）

注:
* 特定の "destination" で "as" または fetch を使用してプリロードすると、リクエストしているデスティネーションの優先度が使用されます。たとえば、プリロード as="style" は最も高い優先度を使用します。明示的なデスティネーションがない場合は、非同期 XHR と同様にフェッチの優先度が決まります。
** 「早め」とは、プリロードされていない画像がリクエストされる前にリクエストされることを、「遅延」はプリロードされていない画像がリクエストされた後であることを意味しています。
*** メディアタイプが一致しない CSS はプリロードスキャナによって取得されず、メインパーサーがその CSS に到達したときにのみ処理されます。通常、これは非常に遅れて取得されることを意味します。

デフォルトでは、イメージの優先度は「低」から開始します。レイアウト時に、ビューポート内の画像は「高」にブーストされます。Chrome 117 以降では、この速度を上げるために、最初の 5 つの大きな画像が「中」に設定され、最初の「タイトモード」中にそのうちの 2 つを並行して取得できます。fetchpriority="high" を使用してマークアップで重要な画像にタグを付けると、すぐに「高」から始めて、はるかに高速に読み込めます。

ブラウザは、同じ優先度が計算されたリソースを検出順にダウンロードします。Chrome デベロッパーツールの [ネットワーク] タブで、ページの読み込み時にさまざまなリソースに割り当てられた優先度を確認できます。（表の見出しを右クリックして、チェックを入れて、Priority 列を必ず含めてください）。

多数のフォントリソースがリストされている Chrome デベロッパーツールの [Network] タブ。すべて優先度が最も高いです。 — BBC のニュース詳細ページのリソース `type = "font"` の優先度

フォントリソースの一覧が表示されている Chrome の DevTools の [ネットワーク] タブ。優先度が「低」と「高」が混在しています。 — BBC のニュースの詳細ページのリソース `type = "script"` の優先度

優先度が変更された場合は、[Big request rows] 設定またはツールチップで、最初の優先度と最終的な優先度の両方を確認できます。

Chrome の DevTools の [Network] タブ。[Big request rows] 設定にチェックを入れ、[優先度] 列には、優先度が「高」で、その下には別の初期優先度「中」の画像が表示されます。ツールチップにも同じ内容が表示されます。 — DevTools の優先度の変更。

取得優先度が必要になるのは、どのような場合ですか。

ブラウザの優先順位付けのロジックについて理解したところで、ページのダウンロード順序を微調整して、パフォーマンスと Core Web Vitals を最適化しましょう。リソースのダウンロードの優先度に影響を与える変更の例を次に示します。

<script> や <link> などのリソースタグを、ブラウザにダウンロードさせる順序で配置します。同じ優先度のリソースは、通常、検出された順に読み込まれます。
preload リソースのヒントを使用して、必要なリソースを早めにダウンロードします。特に、ブラウザで早期に検出されないリソースに使用します。
async または defer を使用すると、他のリソースをブロックせずにスクリプトをダウンロードします。
スクロールせずに見える範囲より下のコンテンツを遅延読み込みすることで、ブラウザが利用可能な帯域幅をファーストビューで表示される重要なリソースに使用できるようにします。

これらの手法は、ブラウザの優先順位計算を制御するのに役立ち、パフォーマンスと Core Web Vitals を向上させます。たとえば、重要な背景画像をプリロードすると、それをより早期に発見できるため、Largest Contentful Paint（LCP）が改善されます。

場合によっては、これらのハンドルだけでは、アプリケーションに最適なリソースの優先順位を決めるのに十分でないことがあります。フェッチ優先度が役立つシナリオをいくつか紹介します。

スクロールせずに見える範囲に画像が複数ありますが、すべての画像の優先度を同じにする必要はありません。たとえば、画像カルーセルでは、最初に表示される画像のみの優先度を高くする必要があります。通常は画面外の他の画像については、優先度を低く設定できます。
通常、ビューポート内の画像は Low の優先度で開始します。レイアウトが完了すると、Chrome はビューポート内にあることを検出し、優先度を上げます。そのため、ヒーロー画像などの重要な画像の読み込みに大幅な遅延が発生します。マークアップで取得優先度を指定すると、画像は High の優先度で開始され、読み込みが大幅に早くなります。これをある程度自動化するために、Chrome では最初の 5 つの大きな画像が Medium 優先度に設定されていますが、明示的な fetchpriority="high" の方がさらに効果的です。

CSS の背景として含まれる LCP 画像を早期に検出するには、引き続きプリロードが必要です。背景画像の優先度を上げるには、プリロードに fetchpriority='high' を含めます。
スクリプトを async または defer として宣言すると、ブラウザはスクリプトを非同期で読み込むよう指示します。ただし、優先度の表に示されているように、これらのスクリプトにも「低」の優先度が割り当てられます。特にユーザーエクスペリエンスに重要なスクリプトでは、非同期ダウンロードを確保しつつ、優先度を上げることをおすすめします。
JavaScript fetch() API を使用してリソースやデータを非同期で取得すると、ブラウザによって優先度 High が割り当てられます。バックグラウンド API 呼び出しとユーザー入力に応答する API 呼び出しを混在させる場合は特に、一部の取得を低い優先度で実行することをおすすめします。バックグラウンド API 呼び出しを Low 優先度として、インタラクティブ API 呼び出しを High 優先度としてマークします。
ブラウザは CSS とフォントには High の優先度を割り当てますが、これらのリソースの中には他よりも重要なリソースもあります。フェッチ優先度を使用すると、重要でないリソースの優先度を下げることができます（初期の CSS はレンダリングブロックであるため、通常は High 優先度になります）。

`fetchpriority` 属性

fetchpriority HTML 属性を使用して、link、img、または script タグでダウンロードする際に、CSS、フォント、スクリプト、画像などのリソースタイプのダウンロード優先度を指定します。次の値が設定されます。

high: リソースの優先度が高く、ブラウザ独自のヒューリスティックにより優先度が上がらない限り、ブラウザが通常よりも優先度を高くする必要があります。
low: リソースの優先度が低く、ブラウザで優先度を下げるように設定します（ヒューリスティクスで許可されている場合）。
auto: デフォルト値。ブラウザが適切な優先度を選択できるようにします。

以下に、マークアップで fetchpriority 属性を使用する例と、スクリプトと同等の priority プロパティを使用する例を示します。

<!-- We don't want a high priority for this above-the-fold image -->
<img src="/https/web.dev/images/in_viewport_but_not_important.svg" fetchpriority="low" alt="I'm an unimportant image!">

<!-- We want to initiate an early fetch for a resource, but also deprioritize it -->
<link rel="preload" href="/https/web.dev/js/script.js" as="script" fetchpriority="low">

<script>
  fetch('https://example.com/', {priority: 'low'})
  .then(data => {
    // Trigger a low priority fetch
  });
</script>

ブラウザの優先度と `fetchpriority` の影響

次の表に示すように、fetchpriority 属性をさまざまなリソースに適用して、計算された優先度を増減できます。各行の fetchpriority="auto"（◉）は、そのタイプのリソースのデフォルトの優先度を示します。（Google ドキュメントとしても利用できます）。

	レイアウトブロッキングフェーズで読み込む		レイアウトブロッキングフェーズで 1 つずつ読み込む
Blink 優先機能	VeryHigh	高	中	低	VeryLow
DevTools の優先度	最高	高	中	低	低
主なリソース	◉
CSS（早期**）	⬆◉	⬇
CSS（遅れ**）		⬆	◉	⬇
CSS（メディアの不一致***）		⬆***			◉⬇
スクリプト（早期**またはプリロードスキャナ以外）		⬆◉		⬇
スクリプト（遅れ**）		⬆	◉	⬇
スクリプト（非同期 / 遅延）		⬆		◉⬇
フォント	◉
フォント（rel=preload）		⬆◉		⬇
インポート		◉
画像（ビューポート内 - レイアウト後）		⬆◉		⬇
画像（最初の 5 枚の画像が 10,000 px2 を超えている場合）		⬆	◉	⬇
画像		⬆		◉⬇
メディア（動画 / 音声）				◉
XHR（同期）- 非推奨	◉
XHR/取得*（非同期）		⬆◉		⬇
プリフェッチ					◉
XSL		◉

注:
* "as" を使用してプリロードするか、特定の "destination" を使用して fetch を使用して、リクエストしているデスティネーションの優先度を使用します。たとえば、プリロード as="style" では最も高い優先度が使用されます。明示的な宛先が指定されていない場合、フェッチは非同期 XHR と同様に優先されます。
** 「早期」とは、プリロードされていない画像がリクエストされる前にリクエストされたことを意味します（「遅延」は後です）。
*** メディアタイプが一致しない CSS は、プリロードスキャナによって取得されず、メインパーサーが到達したときにのみ処理されます。つまり、通常は fetchpriority="high" であっても、非常に遅くフェッチされます。

画像はデフォルトで優先度「低」で開始し、レイアウト時にビューポート内にある場合は優先度が「高」に引き上げられます。Chrome 117 以降では、この処理を高速化するために、最初の 5 つの大きな画像は「中」に設定され、最初の「タイトモード」中に 2 つを並行して取得できます。fetchpriority="high" を使用してマークアップで重要な画像にタグを付けると、すぐに「高」から始めて、はるかに高速に読み込めます。

fetchpriority は、優先度を明示的に High または Low に設定するのではなく、相対的な優先度を設定します。つまり、デフォルトの優先度を適切に増減させます。多くの場合、優先度は High または Low になりますが、常にそうとは限りません。たとえば、重要な CSS の fetchpriority="high" の優先度は「非常に高い」/「最高」であり、これらの要素で fetchpriority="low" を使用すると「高」の優先度が維持されます。どちらのケースでも、優先度を High または Low に明示的に設定する必要はありません。

ユースケース

fetchpriority 属性は、リソースの取得優先度に関するヒントをブラウザに伝える場合に使用します。

LCP 画像の優先度を上げる

fetchpriority="high" を指定すると、LCP などの重要なイメージの優先度を上げることができます。

<img src="lcp-image.jpg" fetchpriority="high">

次の比較では、Google フライトのページで、取得優先度を使用したものと使用していない LCP の背景画像を比較しています。優先度を「高」に設定すると、LCP が 2.6 秒から 1.9 秒に改善されました。

Cloudflare ワーカーを使用し、取得優先度を使用して Google フライトのページを書き換えるテスト。

スクロールせずに見える範囲の画像の優先度を下げる

fetchpriority="low" を使用すると、スクロールせずに見える範囲の画像のうち、すぐに重要ではない画像（画像カルーセルのオフスクリーン画像など）の優先度を下げることができます。

<ul class="carousel">
  <img src="img/carousel-1.jpg" fetchpriority="high">
  <img src="img/carousel-2.jpg" fetchpriority="low">
  <img src="img/carousel-3.jpg" fetchpriority="low">
  <img src="img/carousel-4.jpg" fetchpriority="low">
</ul>

画像 2 ～ 4 はビューポートの外側にありますが、load=lazy 属性が追加されていても、high にブーストされ、読み込みできる程度に「近い」と見なされる場合があります。したがって、fetchpriority="low" が適切な解決策となります。

以前の Oodle アプリのテストの際に、この機能を使用して、読み込み時に表示されない画像の優先度を下げました。ページの読み込み時間を 2 秒短縮しました。

Oodle アプリの画像カルーセルで使用した場合の取得優先度の比較。左側のブラウザではカルーセル画像のデフォルトの優先度が設定されていますが、右側の画像よりもダウンロードとペイントに 2 秒ほど時間がかかっています。この例では、最初のカルーセル画像のみの優先度が高くなっています。 — 最初のカルーセル画像にのみ高い優先度を使用すると、ページの読み込みが速くなります。

プリロードされたリソースの優先度を下げる

プリロードされたリソースが他の重要なリソースと競合しないようにするには、その優先度を下げます。この手法は、画像、スクリプト、CSS で使用します。

<!-- Lower priority only for non-critical preloaded scripts -->
<link rel="preload" as="script" href="critical-script.js">
<link rel="preload" as="script" href="non-critical-script.js" fetchpriority="low">

<!-- Preload CSS without blocking render, or other resources -->
<link rel="preload" as="style" href="theme.css" fetchpriority="low" onload="this.rel='stylesheet'">

スクリプトの優先度を変更する

ページのインタラクティビティに必要なスクリプトは迅速に読み込まれる必要がありますが、レンダリングをブロックする他のクリティカルリソースをブロックしてはなりません。このようなケースには、優先度の高い async のマークを付けることができます。

<script src="async_but_important.js" async fetchpriority="high"></script>

特定の DOM 状態に依存しているスクリプトを async としてマークすることはできません。ただし、ページの後半で実行される場合は、優先度を下げて読み込むことができます。

<script src="blocking_but_unimportant.js" fetchpriority="low"></script>

これにより、このスクリプトに到達したときにパーサーはブロックされますが、このスクリプトより前のコンテンツは優先されます。

完成した DOM が必要な場合は、defer 属性（DOMContentLoaded の後に順番に実行されます）を使用するか、ページの下部に async を配置することもできます。

重要でないデータ取得の優先度を下げる

ブラウザは fetch を優先度高く実行します。複数の取得が同時に実行される可能性がある場合は、重要なデータの取得にデフォルトの優先度を高くし、重要度の低いデータの優先度を低くします。

// Important validation data (high by default)
let authenticate = await fetch('/user');

// Less important content data (suggested low)
let suggestedContent = await fetch('/content/suggested', {priority: 'low'});

優先度の実装メモを取得する

取得優先度を使用すると、特定のユースケースでパフォーマンスが向上する場合があります。ただし、取得優先度を使用する際は、以下の点に注意してください。

fetchpriority 属性はディレクティブではなくヒントです。ブラウザはデベロッパーの設定を尊重しようとしますが、リソースの優先度の設定を適用して競合を解決することもできます。
取得優先度とプリロードを混同しないでください。
- プリロードは必須のフェッチであり、ヒントではありません。
- プリロードを使用すると、ブラウザはリソースを早期に検出できますが、リソースはデフォルトの優先度でフェッチされます。逆に、取得優先度は見つけやすさには役立ちませんが、取得優先度を増減することはできます。
- 多くの場合、優先度の変更による影響よりも、プリロードの影響を観察、測定するほうが簡単です。
フェッチ優先度は、優先度をより細かく設定することで、プリロードを補完できます。LCP イメージの <head> の最初のアイテムの 1 つとしてプリロードをすでに指定している場合、取得優先度 high によって LCP が大幅に改善されない可能性があります。ただし、他のリソースの読み込み後にプリロードが行われる場合は、high フェッチ優先度によって LCP をさらに改善できます。重要な画像が CSS 背景画像の場合は、fetchpriority = "high" を使用してプリロードします。
優先順位付けによる読み込み時間の改善は、利用可能なネットワーク帯域幅を奪い合うリソースが多い環境では、より重要になります。これは、並列ダウンロードが不可能な HTTP/1.x 接続や、低帯域幅の HTTP/2 接続または HTTP/3 接続でよく見られます。そのような場合、優先順位付けによってボトルネックの解決に役立ちます。
CDN では一様に HTTP/2 の優先順位付けが実装されておらず、HTTP/3 の場合も同様です。ブラウザが Fetch Priority の優先度を通知しても、指定した順序でリソースの優先順位が再設定されないことがあります。このため、取得優先度のテストが難しくなります。優先度は、ブラウザ内部と、優先度付けをサポートするプロトコル（HTTP/2 と HTTP/3）の両方で適用されます。優先度の取得は、CDN や送信元のサポートから独立して内部ブラウザの優先順位付けを行うためだけに、やはり有用です。ブラウザがリソースをリクエストすると優先度が変わることが多いからです。たとえば、ブラウザが重要な <head> アイテムを処理している間、画像などの優先度の低いリソースはリクエストされません。
最初の設計では、フェッチ優先度をベストプラクティスとして導入できない場合があります。開発サイクルの後半で、ページ上のさまざまなリソースに割り当てられた優先度を確認できます。期待どおりにない場合は、取得優先度を導入してさらに最適化できます。

デベロッパーは、プリロードを本来の目的（パーサーで検出されないリソース（フォント、インポート、背景の LCP 画像）をプリロードする）に使用する必要があります。preload ヒントの配置は、リソースがプリロードされるタイミングに影響します。

取得優先度とは、リソースがフェッチされるときに、そのリソースをどのようにフェッチするかということです。

プリロードを使用する際のヒント

プリロードを使用する場合は、次の点に注意してください。

HTTP ヘッダーにプリロードを含めると、読み込み順序で他のすべての項目の前に配置されます。
通常、プリロードは、優先度が Medium 以上のものはパーサーが取得した順序で読み込まれます。HTML の先頭にプリロードを含める場合は注意が必要です。
フォントのプリロードは、おそらく頭の最後または本文の最初に使用するのが最適です。
インポートのプリロード（動的 import() または modulepreload）は、インポートを必要とするスクリプトタグの後に実行する必要があります。そのため、依存関係の読み込み中に評価できるように、必ずスクリプトの読み込みまたは解析を行ってください。
画像プリロードのデフォルトの優先度は Low または Medium です。非同期スクリプトや他の優先度の低いタグ、または最も優先度が低いタグと比較して、順序を決めてください。

履歴

フェッチ優先度は、2018 年にオリジントライアルとして Chrome で初めてテストされ、2021 年には importance 属性を使用して再度テストされました。当時は「優先度ヒント」と呼ばれていました。その後、ウェブ標準プロセスの一環として、インターフェースは HTML の場合は fetchpriority、JavaScript の Fetch API の場合は priority に変更されました。混乱を避けるために、この API を Fetch Priority と呼ぶことにしました。

まとめ

デベロッパーはおそらく、プリロードの動作が修正されたフェッチ優先度に興味を持つでしょう。また、最近は Core Web Vitals と LCP に重点が置かれています。好みの読み込み順序を実現するためのノブが追加されました。