画像の読み込み優先度設計（fetchpriority / preload / Priority Hints）

画像最適化は圧縮だけでは不十分。いつ・何を先に取るかがLCP改善の鍵です。本稿は fetchpriority / preload / priority の使い分けと、競合を起こさない設計を最短で実装できるよう整理します。

要点（TL;DR）

LCP画像には fetchpriority="high" と preload を併用。
preloadはimagesrcset/imagesizesで実表示幅と一致させる。
非LCPは loading="lazy"＋decoding="async"。閾値は段階的に。
帯域の競合を避けるため、上位1–2枚だけ高優先度に限定。

1. プレロードとfetchpriority

<!-- HTML（LCP想定）-->
<link
  rel="preload"
  as="image"
  href="/img/hero-1200.jpg"
  imagesrcset="/img/hero-800.jpg 800w, /img/hero-1200.jpg 1200w"
  imagesizes="(max-width: 768px) 92vw, 1200px"
/>

<img
  src="/img/hero-1200.jpg"
  srcset="/img/hero-800.jpg 800w, /img/hero-1200.jpg 1200w"
  sizes="(max-width: 768px) 92vw, 1200px"
  alt="ヒーロー"
  width="1200" height="720"
  fetchpriority="high"
/>

Next.js（next/image）

import Image from "next/image";

<Image
  src="/img/hero-1200.jpg"
  alt="ヒーロー"
  width={1200}
  height={720}
  priority  // = preload + 高優先度
  fetchPriority="high"
  sizes="(max-width: 768px) 92vw, 1200px"
/>

2. 遅延の設計（非LCP）

loading="lazy" と decoding="async" を基本に。
Impressionが重要なサムネ群は、グリッド1行目だけ先読みなど段階的に。
広告やアニメGIFはビューポート内の描画コストも勘案。

3. チェックリスト（公開前）

LCP画像が正しくpreloadされ、fetchpriority=highになっている。
preloadの imagesrcset/imagesizes と本体の srcset/sizes が一致。
非LCPはlazy＋段階的先読みで帯域を圧迫しない。
CLSゼロ（寸法明示）。
実測（PSI/RUM）でLCP短縮を確認。

4. まとめ：圧縮＜優先度

画像の圧縮よりも優先度の設計がLCPに効きます。まずLCPを特定し、高優先度化。次に周辺の遅延を丁寧に。細部の最適化は総合チェックリストに沿って進めましょう。