検索意図キーワード例(このガイドの対象)
- Core Web Vitals 改善
- LCP 改善 方法
- INP 改善 方法
- CLS 改善 方法
- PageSpeed Insights 見方
まず結論: ラボ(Lighthouse)ではなく“フィールド”から当てる
Core Web Vitalsは、ラボ計測(Lighthouse)とフィールドデータ(実ユーザー)が混ざると判断がブレます。最初は「どの指標が、どのページ群で悪いか」をフィールド寄りに把握し、改善の当たり所を絞ります。
全部を一気に良くしようとすると時間が溶けます。LCP/INP/CLSのどれが主犯かを決め、1つずつ潰すのが現実的です。
改善フロー(最短で回す)
- 対象ページ群を決める(流入が多い、重要テンプレ)
- PSIや計測で、LCP/INP/CLSのどれが悪いかを特定
- 原因仮説を1つに絞って修正(画像/フォント/JS/TTFBなど)
- 再計測して、指標が改善したか確認(修正の回帰も見る)
- 効いた型をテンプレに横展開する
LCPの当たり所(よく効く順)
- LCP要素(画像/テキスト)を特定し、そこを最優先で軽くする
- 画像がLCPなら: 圧縮、適切なサイズ、優先読み込み(preload/priority)
- テキストがLCPなら: フォント最適化、CSSのブロック削減
- TTFBが遅いなら: キャッシュ、配信経路、サーバー処理を先に
INPの当たり所(操作が重い)
- Long Task(長いJS処理)を分割し、メインスレッドの詰まりを減らす
- 不要なサードパーティ(計測/チャット/広告)を棚卸しする
- 初期表示に不要なJSを遅延/分割する(コードスプリット)
CLSの当たり所(レイアウトがガタつく)
- 画像/動画に幅高さを指定し、領域を先に確保する
- 後から挿入されるUI(バナー/同意/広告)にスペースを確保する
- フォント切替でズレるなら、フォント戦略(preload/display)を見直す
よくある失敗(改善が進まない)
- LCP要素を特定せずに、全体の細かい最適化から始める
- ラボスコアだけを追い、実ユーザーの改善が見えない
- 指標ごとの原因を混ぜる(LCPを直してもINPは別)
CWVチェックリスト(最低限)
- 対象ページ群が決まっている(重要テンプレから)
- 主犯指標(LCP/INP/CLS)が特定できている
- 原因仮説を1つずつ検証している(施策の因果が追える)
- サードパーティの影響が把握できている
よくある質問(Q&A)
Lighthouseのスコアが良いのに、体感が遅い
ラボと実ユーザーがズレている可能性があります。まずは対象ページ群と主犯指標を決め、実ユーザーに近い条件で原因を当てにいきます。
全部“良好”にしないとダメ?
理想は良好ですが、まずは重要ページの悪化を止め、主犯指標を改善するのが現実的です。小さく直して再計測し、効く型を横展開します。
CWVは順位に影響しますか?
影響は“単体の魔法”ではなく、ユーザー体験と品質を補助する要素と捉えるのが安全です。重要なのは、遅さが原因で読まれない/離脱する状態を潰すことです。