LQIPと支配色プレースホルダ最短ガイド（blur + color の判断基準）
ユーザーが最初に受け取る印象は “知覚速度” です。ネットワーク的に速くても、ビューポートが数百 ms 真っ白なら体感は遅くなります。逆にコンテンツの輪郭や色調が先に現れれば「読み込みが始まった」と安心し、離脱を抑制できます。LQIP(低解像度ぼかし) と支配色背景はこの “白い空白” を埋める最小コストの戦術 です。
ただし“装飾を足すほど良い” わけではありません。Skeleton/過度なアニメーション/複雑なSVG プレースホルダは CPU・レイアウト計算を増やし、INP を悪化させる逆効果を生みます。本稿は「どこまでやれば十分か」を線引きすることに焦点を当てます。
1. 適用する画像
- LCP候補（ヒーロー/メインビジュアル）
- 折りたたみ直下で表示領域にすぐ入るカルーセル/グリッド
- 背景が単調で白浮きが目立つ写真
これらは初期レンダリングの視覚完成度(ユーザー主観) に寄与する割合が高く、わずかな“先行視認” が直帰率に効く層です。
2. 除外（オーバーヘッド回避）
- ビューポート外（初期スクロール必要）
- 16:9 以内で即読み込み完了する 20KB 未満の小画像
- UIアイコン/ロゴ（ぼかし不要）
“すべての画像にLQIP” は過剰最適化です。Lazyロード対象はプレースホルダが見える時間が短く、効果が体感されにくいので除外します。
3. 生成フロー（バッチ）
- 支配色抽出: Sharpの
stats()or カスタム実装で1色。 - 24px JPEG生成: Q=30–40 / 24px 縮小 → base64。
- JSON出力:
{ src, blurDataURL, dominant }を集約。 - next/image propsに適用: placeholder="blur" + 背景支配色。
CIで src のハッシュリストを監視し、新規/変更画像のみ再生成する差分バッチにすると時間短縮できます。
4. INP/CLSへの配慮
プレースホルダは “目標状態へ早く収束する” ことが目的であり、インタラクション前の余計な描画コストを増やすべきではありません。blur + 単色 を静的DOMで挿入し、画像 decode 完了イベント( next/image は内部で最適化 ) に合わせ opacity 200ms 程度で置き換えるのが最も安全です。
5. チェックリスト（6項目）
- 対象はLCP候補/直下foldのみ
- 24px JPEG base64長 ≤ 800 chars
- 支配色は背景/枠線とコントラスト過不足なし
- Skeletonや過剰アニメなし
- CLS=0（width/height指定済み）
- INP計測で遅延増なし
base64長が閾値を越える場合はサイズを 20px, Q を 25–30 に落として再生成してください。
6. まとめ
最小プレースホルダは blurDataURL + 支配色。計測上の改善が鈍化した地点で“これ以上は投資対効果が低い” と判断し、他のボトルネック（解像度過多/優先度/コード分割）へ切り替えます。複雑なSkeletonは計測結果が明確に優位でない限り追加しません。
付録: FAQ
- Q. BlurHash/SVGモザイクは併用すべき?
- 視覚的一貫性は高まりますが生成/デコードコストが増し計測改善幅が小さい場合が多いです。まずは JPEG 24px で十分かを検証。
- Q. JavaScriptなしで実現したい
- CSS背景に支配色、低解像度画像を
<img decoding="async" loading="eager"で重ねるだけでも近い体感が得られます。