Newly available 主要ブラウザで対応済みだが、古いバージョンでは未対応の場合がある。

Fetch priority

fetchpriority 属性は、開発者が特定の画像を読み込みプロセスの早期に取得することで、ユーザー体験への影響を増加または減少させることを、ブラウザーが内部優先度を割り当てる際に行う合理的な推測の範囲を超えて、指定することができます。これによりブラウザーは優先度を上げたり下げたりできるようになり、結果として画像を通常よりも早期に、あるいは遅れて読み込むことができます。

この属性は <img>、<link>、<script> の各要素に適用することができます。これには SVG にも対応するものもあります。

読み取りの優先度は事前読み込みを補完するために使用でき、開発者はデフォルト優先度が高いものの影響力の小さいリソースよりも優先度を高めることができます。例えば、開発者が特定の画像がウェブサイトの Largest Contentful Paint (LCP) に大きく影響してると把握している場合、その画像に <link rel="preload"> を追加し、さらに fetchpriority 属性を使って優先度をさらに高めることができます。

なお、読み取り操作の内部優先度と、fetchpriority が優先度に与える影響は、いずれも完全にブラウザーに依存します。

この属性は列挙型であり、以下のいずれかの値を取ります。

high

この外部リソースを、他の外部リソースに対して高い優先度で取得します。

low

この外部リソースを、他の外部リソースに対して低い優先度で取得します。

auto

フェッチ優先度の設定を行いません。値が設定されていない場合、または無効な値が設定された場合に使用されます。これがデフォルトです。

リソースヒント

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`fetchpriority`	101	101	132	17.2	101	17.2
`fetchpriority` fetchpriority 属性は、開発者が特定の画像を読み込みプロセスの早期に取得することで、ユーザー体験への影響を増加または減少させることを、ブラウザーが内部優先度を割り当てる際に行う合理的な推測の範囲を超えて、指定することができます。これによりブラウザーは優先度を上げたり下げたりできるようになり、結果として画像を通常よりも早期に、あるいは遅れて読み込むことができます。	101	101	132	17.2	101	17.2
`fetchpriority` fetchpriority 属性は、開発者が特定の画像を読み込みプロセスの早期に取得することで、ユーザー体験への影響を増加または減少させることを、ブラウザーが内部優先度を割り当てる際に行う合理的な推測の範囲を超えて、指定することができます。これによりブラウザーは優先度を上げたり下げたりできるようになり、結果として画像を通常よりも早期に、あるいは遅れて読み込むことができます。	101	101	132	17.2	101	17.2
DOM API
`init_priority_parameter` パラメータ `init.priority`	101	101	132	17.2	101	17.2
`fetchPriority` fetchPriority は HTMLImageElement インターフェイスのプロパティで、ブラウザーが他の画像と比較して、画像の取得をどのように優先させるべきかというヒントを表します。これは img 要素の fetchpriority 属性を反映します。	102	102	132	17.2	102	17.2
`fetchPriority` fetchPriority は HTMLLinkElement インターフェイスのプロパティで、ブラウザーが同じ種類の他のリソースに対して、与えられたリソースの先読みをどのように優先させるべきかを示すヒントを表します。	102	102	132	17.2	102	17.2
`fetchPriority` fetchPriority は HTMLScriptElement インターフェイスのプロパティで、ブラウザーが外部スクリプトを取得する際に、他の外部スクリプトと相対的にどのように優先させるべきかのヒントを表します。	102	102	132	17.2	102	17.2
`Request (init priority parameter)` パラメータ `init.priority`	101	101	132	17.2	101	17.2
その他
`fetchpriority`	103	103	132	17.2	103	17.2
`fetchpriority` 実験的非標準 fetchpriority 属性は、外部リソースをフェッチするときに使用する相対的な優先順位に関するヒントをブラウザーに提供します。これは、HTML img 要素および script 要素の fetchpriority 属性と同じように機能します。			140
`fetchpriority` 実験的非標準 fetchpriority 属性は、外部リソースをフェッチするときに使用する相対的な優先順位に関するヒントをブラウザーに提供します。これは、HTML img 要素および script 要素の fetchpriority 属性と同じように機能します。			140
`fetchpriority` 実験的非標準 fetchpriority 属性は、外部リソースをフェッチするときに使用する相対的な優先順位に関するヒントをブラウザーに提供します。これは、HTML img 要素および script 要素の fetchpriority 属性と同じように機能します。			140

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

HTML

<!-- LCP images are given high priority --> <img src="hero.jpg" fetchpriority="high" alt="hero image"> <!-- Low priority outside first view --> <img src="footer.jpg" fetchpriority="low" loading="lazy" alt="footer image"> <script src="analytics.js" fetchpriority="low"></script>

ライブデモ

Priority hints overview

Compare high, auto, and low fetchPriority values for images or scripts.

プレビュー全画面表示

Priority hint guidance

fetchPriority nudges the browser scheduler rather than overriding it.

プレビュー全画面表示

Tuning checklist

Use priority hints sparingly and validate the real loading order in DevTools.

プレビュー全画面表示

実務での使いどころ

Fetch priority の活用

fetchpriority 属性は、開発者が特定の画像を読み込みプロセスの早期に取得することで、ユーザー体験への影響を増加または減少させることを、ブラウザーが内部優先度を割り当てる際に行う合理的な推測の範囲を超えて、指定することができます。

注意点

古いブラウザでは対応していない場合がある。

対応ブラウザ

基本構文

ライブデモ

Priority hints overview

Priority hint guidance

Tuning checklist

実務での使いどころ

Fetch priority の活用

注意点

アクセシビリティ

参考リンク