performance 読了 5 分 更新 2026-08-03
ギャラリー画像のWebP最適化
一覧用サイズと原寸を分け、LCP対象だけ優先読み込みする。
問題
一覧に原寸 JPEG を載せると LCP が悪化し、下層の遅延読み込み設定がヒーローまで遅らせる。
目標
一覧は表示サイズの WebP、詳細は必要解像度。LCP 候補だけ eager + fetchpriority=high。
プロセス
- ギャラリーカード用に幅を抑えた WebP を用意する。
- ファーストビューの主画像だけ loading=eager と fetchpriority=high にする。
- 折りたたみ以下は loading=lazy。width / height で CLS を抑える。
- srcset / sizes で端末幅に合った候補を渡す。
変更前後
- 変更前：全画像に lazy を付け、ヒーローまで後回しになる。
- 変更後：ヒーローだけ優先読み込みし、一覧は小さな WebP を遅延読み込みする。
再利用可能な知見
- LCP 画像に lazy を付けない。
- フォーマット変換だけでは不十分。表示ピクセル数を先に決める。
- 公開前チェックに「一覧サイズ／LCP優先」を1項目入れる。
次の一歩
画像まわりの抜け漏れは、無料の公開前チェックリストにまとめてあります。まずそちらで一覧と詳細の差を確認してください。