HTML 属性: fetchpriority

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

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

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

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

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

high

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

low

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

auto

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