<link rel="preload"> を使用してリソースをプリロードすると、リソースがすぐに必要になることをブラウザに通知できます。ただし、プリロードはリソースタイプのデフォルトの優先度を継承します。特に画像の場合、この優先度は低くなります。fetchpriority を使用すると、この相対的な優先度を調整できます。特に、画像のプリロードを高い優先度でプリロードすることで、より早く開始し、より多くの帯域幅リソースを使用できるようになります。
導入方法
- プリロード候補を特定する: ブラウザで早期に検出されないものの、ページの表示に不可欠なリソース（動画のポスター画像や CSS の背景画像など）を見つけます。
- 重要な画像のプリロードを優先する: LCP 画像や、デフォルトで優先されないその他の重要な画像については、
<link rel="preload" fetchpriority="high">を使用して、他のプリロードよりも優先されるようにします。フォントはデフォルトで優先度が高くなっています。 - 重要でないプリロードの優先度を下げる: 初期レンダリングに重要でないリソース（背景動画やセカンダリ フォントなど）には、
<link rel="preload" fetchpriority="low">を使用します。 - リソースタイプと調整する:
asタイプによってデフォルトの優先度が異なります。必要に応じてfetchpriorityを使用して、これらのデフォルトをオーバーライドします。
コード例
<!-- Elevate priority for a video poster image that acts as the LCP candidate -->
<link rel="preload" href="/images/video-poster.jpg" as="image" fetchpriority="high">
<!-- Elevate priority for a critical LCP image that is hidden in CSS -->
<link rel="preload" href="/images/hero-background.jpg" as="image" fetchpriority="high">
<!-- Deprioritize a secondary font to avoid network contention -->
<link rel="preload" href="/fonts/secondary-font.woff2" as="font" type="font/woff2" fetchpriority="low" crossorigin>
ベスト プラクティス
- 必須: ネットワークの競合を回避し、優先度の引き上げ効果が薄れないようにするため、
fetchpriority="high"は最大でも 1 ～ 2 個の重要な画像のプリロードにのみ使用してください。 - 必須: Largest Contentful Paint（LCP）画像に
fetchpriority="high"を使用します。 - 推奨: 帯域幅の競合を防ぐため、ページ上のプリロードの合計数を最大 2 つの画像と 2 ～ 3 つの必須フォントに制限します。
- 推奨: ブラウザで早期に開始したいが、重要なリソース（特に重要でないフォント）を犠牲にしたくないプリロードには、
fetchpriority="low"を使用します。 as属性を正しく指定して、プリロードが使用されるようにしてください。- 推奨: 背景画像のプリロードに依存するのではなく、
<img>タグを使用して、重要なリソース（LCP 画像など）を HTML で静的に検出できるようにします。 - 推奨事項: フォントのプリロードに
crossorigin属性が常に含まれるようにする（同一オリジンの場合でも）。 - 非推奨の
importance属性は使用しないでください。これはfetchpriorityに置き換えられました。
フォールバック戦略
<link rel="preload"> の fetchpriority 属性はプログレッシブ エンハンスメントです。サポートしていないブラウザでも、そのリソースタイプにデフォルトの優先度を使用してリソースがプリロードされます。互換性を確保するため、常に正しい as 属性と type 属性を指定してください。