画像の優先度を最適化する

ブラウザはヒューリスティックを使用して画像に読み込みの優先度を割り当てますが、これらのデフォルトはページの Largest Contentful Paint（LCP）と一致しない場合があります。

<img> 要素で fetchpriority を使用すると、画像の重要性をブラウザに明示的に伝えることができます。これにより、重要な画像がより速く読み込まれ、重要でない画像が帯域幅を競合することがなくなります。

loading=lazy 属性を使用すると、画面外の画像がダウンロードされなくなるため、画像の優先度をさらに高めることができます。

導入方法

1. LCP 画像を特定する: Largest Contentful Paint の候補となる可能性が最も高い画像（通常はページ上部のヒーロー画像）を特定します。
2. LCP の優先度を上げる: LCP 候補の <img> 要素に fetchpriority="high" を追加します。
3. 重要でない画像の優先度を下げる: セカンダリ UI の一部である画像や、ユーザー操作後にのみ表示される画像（メガメニュー、モーダル、画面外のカルーセル スライドなど）には、fetchpriority="low" を追加します。
4. 遅延読み込みを最適化する: LCP 画像に loading="lazy" を使用しないでください。標準的なスクロールしなければ見えない範囲の画像の場合、loading="lazy" を使用すれば、ユーザーが画像の近くまでスクロールするまでリクエストを遅らせることができます。これらの画像に fetchpriority="low" を追加しないでください。ユーザーがスクロールしたときに、通常の優先度で読み込まれるようにする必要があります。fetchpriority="low" は、技術的には「スクロールせずに見える範囲」にあるものの、最初は表示されない画像（非表示のカルーセル スライドやメガメニューなど）に使用します。これらの非表示の画像には、loading="lazy" を使用することもできます。ブラウザは、低い優先度を尊重しながらリクエストのタイミングを処理します。
5. デフォルトの優先度を優先する: 画像の読み込み優先度を通常にする場合は、fetchpriority 属性を auto に設定するのではなく、完全に省略します。これは、ブラウザのネイティブなヒューリスティックに依存しながら、HTML をよりクリーンに保つためのスタイル規則です。

コード例

<!-- Elevate priority for the LCP image -->
<img src="/images/hero-lcp.jpg"
     alt="Main Banner"
     fetchpriority="high"
     width="800" height="400">

<!-- Deprioritize initially hidden images above the fold -->
<!-- Additionally use `loading="lazy"` if there are likely to be many images-->
 <div class="carousel">
     <img src="/images/gallery-alt.jpg"
          alt="Gallery Image 1"
          width="400" height="300">
     <img src="/images/gallery-alt.jpg"
          alt="Gallery Image 2"
          fetchpriority="low"
          loading="lazy"
          width="400" height="300">
<div>

<!-- Deprioritize images revealed only after user interaction -->
<img src="/images/mega-menu-promo.jpg"
     alt="Special Offer"
     fetchpriority="low"
     width="300" height="150">

<!-- Use lazy loading ALONE for standard below-the-fold images -->
<img src="/images/footer-logo.png"
     alt="Footer Logo"
     loading="lazy"
     width="120" height="60">

<!-- Omit fetchpriority for images with standard priority -->
<img src="/images/standard-image.jpg"
     alt="Standard Image"
     width="400" height="300">

ベスト プラクティス

• 必須: LCP 画像には必ず fetchpriority="high" を適用します。
• 必須: ネットワークの競合を回避し、優先度の向上を希薄化しないように、fetchpriority="high" は最大 1 ～ 2 個の重要な画像にのみ使用してください。
• 必須: 技術的には「スクロールせずに見える範囲」にあるものの、最初は非表示になっている画像（非表示のカルーセル スライド、メガメニューの画像など）には fetchpriority="low" を使用します。
• 必須: loading="lazy" をすでに使用している標準のスクロールしなければ見えない位置の画像には、fetchpriority="low" を使用しないでください。これらの画像は、ビューポートに入ると通常の優先度で読み込まれます。
• 推奨: fetchpriority="auto" の使用は避けてください。デフォルトの優先度を使用する場合は、属性を完全に省略して HTML を簡潔に保ちます。
• fetchpriority="high" と loading="lazy" を組み合わせないでください。
• 非推奨の importance 属性は使用しないでください。fetchpriority に置き換えられ、どのブラウザでもサポートされていません。
• 非推奨の loading="auto" 値は使用しないでください。当初は Chrome でサポートされていましたが、削除され、現在はどのブラウザでもサポートされていません。

フォールバック戦略

fetchpriority 属性は、<img> 要素のプログレッシブ エンハンスメントです。ブラウザがサポートしていない場合、この属性は無視され、ブラウザはデフォルトの優先度ヒューリスティックを使用します。