要点：実表示幅とsizesがズレる失敗。 本ページでは、現場での判断軸/実装/検証までをまとめます。
定義
srcset/sizes不一致は初期描画やスクロール時の帯域配分と応答性に関わる技術です。CLS悪化を避け、LCP要素の優先度を確保します。
なぜ重要か
初期の帯域競合を避け、見えるものから軽くを徹底します。遅延読込は予約サイズが前提です。
実務での活用（判断基準付き）
- LCP対象を特定し、preload/fetchpriorityと予約サイズを付与。
- ビューポート外はIntersection Observerで遅延。
- 重い処理はWorker/OffscreenCanvas、描画はrAFに寄せる。
実装例
<!-- LCP画像の事前ヒント -->
<link rel="preload" as="image" href="/hero@1200.webp" imagesrcset="/hero@800.webp 800w, /hero@1200.webp 1200w" imagesizes="(min-width: 960px) 1200px, 92vw" fetchpriority="high" />
<!-- Intersection Observerで遅延読込 -->
<img data-src="/gallery/1.webp" width="800" height="533" loading="lazy" class="lazy" />
検証と失敗例
- 計測軸: 実表示幅とsizesの整合、ネットワーク条件別の選択候補をログで検証。
- 失敗例: sizes過大で過剰DL / 密度記述子の乱用でボケ / アートディレクション漏れ。
- 判断軸: LCP画像で最小ビット/画素、かつCLS=0。ビューポート変更でも選択が安定。
チェックリスト
- 予約サイズでCLSをゼロに近づけたか
- LCP対象に過不足ないpreload/fetchpriorityを設定したか
- 遅延読込の閾値（rootMargin/threshold）を端末別に最適化
- アイドル/描画タイミング（rAF/rIC）との整合を確認したか