ケーススタディ：画像最適化でLCPを短縮しCLSをゼロに — 実サイトの改善プロセス2025
ページが重いのはスクリプトだけが原因ではありません。多くのサイトでは、画像の解像度・形式・実装を正すだけで初回表示の体感が大きく改善します。本稿は実在の一般的レイアウトをモデル化し、画像最適化だけでLCPを短縮し、CLSをゼロに安定させた手順をまとめます。
先に全体像
最短ルートは 解像度 → 形式 → 品質 → 実装（優先度・寸法・遅延）。 設計の基礎は CWV×画像 最適化ガイド と レスポンシブ画像ガイド に詳しく整理しています。
要点（TL;DR）
- LCPはヒーロー画像を最適化（適正解像度・WebP/AVIF・優先ロード）。
- CLSは全imgのwidth/heightと広告プレースホルダでゼロに安定。
- 帯域はsrcset/sizesで最小化。品質はWebP 80–85 / AVIF 25–35起点。
背景と対象ページ（モデル）
- 構成：ヒーロー画像＋本文（H2/H3）＋関連記事＋広告2枠
- 端末：モバイル 4G／CPU中程度、ビューポート 390×844
- 初期の課題：ヒーローが過大解像度・上部広告が高さ未確保・imgに寸法なし
現状診断（Before）
主なボトルネック
- ヒーロー画像が横2400px / PNG 2.3MBでLCPを圧迫。
- fold上のimgがlazy扱いで描画が遅延。
- imgにwidth/heightなし、上部広告に固定高なしでCLS増加。
施策（Plan）— 解像度 → 形式 → 品質 → 実装
実装の要点（Next.jsで最短に）
- ヒーローのみ優先（先読み/priority）。
- カードや本文画像は遅延、ただしファーストビュー直下は遅延しない。
- すべてのimgにwidth/height（またはCSSのaspect-ratio）。CLSゼロ運用。
- 広告は
<AdSlot />のラッパで固定高を先に確保。
<img src="/img/hero-1600.webp" srcset="/img/hero-800.webp 800w, /img/hero-1200.webp 1200w, /img/hero-1600.webp 1600w" sizes="(max-width: 800px) 100vw, 800px" width="1600" height="900" /* ← CLS対策 */ loading="eager" decoding="async" alt="..." />
設計の詳細は レスポンシブ画像ガイド を参照。
検証（After）— ビフォー/アフターの観測
| 指標 | Before | After（モデル） | 施策の要点 |
|---|---|---|---|
| LCP | ヒーロー2.3MB/PNG → 遅延表示 | 1600px WebP ~320KB / eager | 解像度・形式・優先ロード |
| CLS | img無寸法・広告高なし | 全img寸法・広告プレースホルダ | 寸法指定・固定高 |
| 帯域 | 単一サイズ配信 | srcset/sizesで最小化 | レスポンシブ提供 |
※ 数値はモデルケース。実端末/回線/内容で変動します。視覚比較は 画像比較スライダー も参考に。
実務TIPS（安定運用のために）
- OGP/サムネは1200×630・広い安全域・高コントラストでテンプレ化（OGPテンプレ）。
- 画像ファイルはハッシュ名（指紋化）でキャッシュ更新を確実に。
- 比較用のテスト画像は固定し、品質や解像度のABを1変数ずつ検証。
よくある落とし穴（回避策）
- 巨大画像のまま品質だけ上げる → 根本は解像度から。
- すべてlazyにする → fold上/直下は遅延しない。
- 広告の高さ未確保 → プレースホルダで先に確保。
- 4:2:0で文字混在 → 4:4:4か可逆に分離（文字にじみ対策）。
公開前チェックリスト（10項目）
- 本文1200–1600px／一覧600–800pxに統一。
- 写真=WebP/互換=JPEG/ロゴ=PNGと使い分けた。
- 品質はWebP 80–85 / AVIF 25–35を起点に調整。
- ヒーローは優先ロード、fold下は遅延に。
- 全imgにwidth/height（or aspect-ratio）。
- 広告枠は固定高でCLS対策。
- OGPは1200×630・安全域広め・高コントラスト。
- srcset/sizes を設計済み。
- 実機で体感・スクロール時のデコード負荷に問題なし。
- Before/Afterを /compare で1:1確認。
まとめ：画像だけで“速さ”は作れる
画像最適化は、解像度→形式→品質→実装の順を守るだけで少ない工数でも体感速度とCWVの安定に直結します。まずはヒーローとfold上から着手し、 テンプレ化で再発を防ぎましょう。