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

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

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

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

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

high

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

low

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

auto

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

使用上のメモ

この属性は控えめに使用すべきです。過度に、または誤って優先順位をつけると、パフォーマンスを低下させる可能性があります。

仕様書

ブラウザーの互換性

html.elements.img.fetchpriority

html.elements.link.fetchpriority

html.elements.script.fetchpriority

関連情報

• SVG のfetchpriority 属性