ページを開いたとき、ファーストビューのメインビジュアルよりも先に、画面の下のほうにある画像やあまり急がないスクリプトが読み込まれてしまう——ブラウザーの読み込み順が思いどおりにならないことがあります。fetchpriority 属性を使うと、「このリソースは優先的に取得してほしい」「これは後回しでいい」というヒントをブラウザーに伝えられます。この記事では、指定できる値と対応要素、LCP 画像を速く表示するための実践的な使い方、loading="lazy" との違いまでを解説します。
目次
fetchpriority はブラウザーが決める優先度への「ヒント」
ブラウザーは HTML を解析しながら、CSS・画像・スクリプトといったリソースの一つひとつに優先度を割り当ててダウンロードしています。たとえば描画をブロックする CSS は高く、画像は低めから始まる、というように、リソースの種類や記述位置からブラウザーが推測して決めています。
ただ、この推測は必ずしもページの実情と一致しません。ファーストビューの中央に置くメインビジュアルと、ページ下部の装飾画像は、HTML を解析している段階のブラウザーから見ればどちらも「ただの画像」であり、区別がつかないからです。fetchpriority 属性は、この優先度を「既定より上げてほしい／下げてほしい」と作者側から伝えるための仕組みで、仕様上は Priority Hints（優先度のヒント）と呼ばれています。
<!-- LCP になるメインビジュアルを優先的に取得してもらう -->
<img src="hero.webp" width="1200" height="600" alt="メインビジュアル" fetchpriority="high">指定できる値は high・low・auto の3つ
fetchpriority に指定できる値は次の3つです。属性を省略した場合は auto と同じ扱いになります。
| 値 | 意味 |
|---|---|
high | 同じ種類のリソースの既定よりも高い優先度で取得する |
low | 同じ種類のリソースの既定よりも低い優先度で取得する |
auto | 既定値。優先度の判断をブラウザーに任せる |
ポイントは、high / low が同じ種類のリソースの中での相対的な指定だという点です。画像に high を付けたからといって、描画をブロックする CSS より先に取得されるようになるわけではありません。あくまで「画像どうしの中で優先してほしい」というヒントです。
この属性を指定できるのは <img>・<script>・<link>・<iframe> の4つの要素です。また、JavaScript の fetch() にも同じ働きをする priority オプションが用意されており、リクエスト単位で優先度のヒントを渡せます。
// 関連商品の情報は急がないので、低い優先度で取得する
const res = await fetch('/api/related-items', { priority: 'low' });
const items = await res.json();実践的な使いどころ
LCP になるファーストビューの画像に high を付ける
もっとも効果が分かりやすいのが、LCP（Largest Contentful Paint。ビューポート内で最大の要素が描画されるまでの時間を測る指標）の対象になる画像です。ブラウザーは解析を始めた時点ではどの画像が画面内に表示されるか分からないため、画像のダウンロードを低めの優先度から始めることがあります。メインビジュアルに fetchpriority="high" を付けておけば、最初から高い優先度で取得され、表示の改善が期待できます。
カルーセルの2枚目以降に low を付ける
逆に、最初は見えていない画像には low が向いています。たとえばカルーセルの2枚目以降のスライドは、初期表示には不要ですが、切り替わった瞬間には表示されていてほしいものです。後述する遅延読み込み（loading="lazy"）にしてしまうと切り替え時に読み込みが間に合わないことがあるため、「すぐに読み込み始めるが、優先度は下げておく」low がちょうどよい選択になります。
<div class="carousel">
<!-- 最初に表示されるスライドは既定のまま -->
<img src="slide-1.webp" width="800" height="450" alt="スライド1">
<!-- 2枚目以降は読み込みは始めつつ、優先度だけ下げる -->
<img src="slide-2.webp" width="800" height="450" alt="スライド2" fetchpriority="low">
<img src="slide-3.webp" width="800" height="450" alt="スライド3" fetchpriority="low">
</div>link rel=”preload” と組み合わせる
CSS の background-image で表示するメインビジュアルのように、HTML の解析だけでは発見が遅れるリソースは、<link rel="preload"> で先読みさせるのが定番です。ここに fetchpriority="high" を組み合わせると、「早く発見させる」preload と「高い優先度で取得させる」ヒントの両方が効きます。preload した画像が思ったより早く取得されないときに試してみてください。
<head>
<!-- CSS から参照される LCP 画像を、高い優先度で先読みする -->
<link rel="preload" href="hero.webp" as="image" fetchpriority="high">
<link rel="stylesheet" href="style.css">
</head>loading=”lazy” との違い
画像の読み込みを制御する属性としては loading="lazy" がよく知られています。似た場面で登場するため混同されがちですが、両者は制御しているものが違います。
| 属性 | 制御するもの |
|---|---|
loading="lazy" | 読み込むかどうか・いつ読み込むか。ビューポートに近づくまでリクエスト自体を遅らせる |
fetchpriority | 読み込みの優先度。リクエストはすぐ始まり、ほかのリソースとの順番や帯域の使い方が変わる |
fetchpriority="low" を付けた画像は、優先度こそ低いものの読み込み自体はすぐに始まります。一方 loading="lazy" の画像は、画面に近づくまでそもそもリクエストされません。「最終的に必ず使うが急がないもの」には low、「スクロールしなければ使わないかもしれないもの」には lazy、と整理すると使い分けやすくなります。
なお、LCP になるファーストビューの画像に loading="lazy" を付けるのは避けてください。読み込みの開始そのものが遅れるため、fetchpriority="high" とは正反対の、表示を遅くする方向に働いてしまいます。
すべてに high を付けても速くはならない
fetchpriority は名前のとおり「ヒント」であって、指定した順序で取得されることを保証するものではありません。最終的な優先度は、ネットワークの状況やほかのリソースとの兼ね合いを踏まえてブラウザーが決めます。指定が無視されることもある、と理解しておいてください。
また、優先度は相対的なものです。ページ内のあらゆる画像やスクリプトに high を付けてしまうと、結局どれも特別扱いされなくなり、何も指定していない状態とほとんど変わらなくなります。本当に重要な少数のリソース（多くの場合は LCP 画像1枚）に high を、明らかに後回しでよいものに low を付け、残りはブラウザーに任せるのが基本です。
ブラウザーの対応状況と効果の確認方法
fetchpriority は Chrome / Edge 102（2022年）、Safari 17.2（2023年）、Firefox 132（2024年）で対応済みで、現在の主要ブラウザーでひととおり利用できます。未対応の古いブラウザーでは属性が単に無視されるだけで、表示が壊れたりエラーになったりすることはありません。付けておいて損のない、安全に導入できる属性です。
効果を確かめるには、Chrome の DevTools で Network パネルを開きます。Priority 列が表示されていない場合は、列のヘッダーを右クリックして「Priority」にチェックを入れてください。fetchpriority="high" を付けた画像の優先度が High に上がっていることや、リクエストの並び順が変わったことを確認できます。属性の有無で LCP の数値がどう変わるかは、Lighthouse や PageSpeed Insights で計測して比較するのが確実です。
まとめ
fetchpriority は、リソースの取得優先度に対するヒントをブラウザーに伝える属性です。値は high / low / auto の3つで、<img>・<script>・<link>・<iframe> に指定でき、fetch() の priority オプションでも同じことができます。
使い方の基本は、LCP になるファーストビューの画像に high、カルーセルの後続スライドなど急がない画像に low を付けること。loading="lazy" が「いつ読み込むか」を変えるのに対し、fetchpriority は「どの順で取得するか」を変える、という違いも押さえておきましょう。あくまでヒントなので乱用せず、本当に重要なリソースだけに絞って指定するのが効果を出すコツです。