まず結論
Core Web Vitalsは、Webページの体感品質を見るための代表的な指標です。
主に次の3つを見ます。
| 指標 | 見ていること |
|---|---|
| LCP | 大きな要素が表示されるまで |
| CLS | 画面がどれだけズレるか |
| INP | 操作にどれだけ反応できるか |
難しい点数としてではなく、ユーザーが「遅い」「ガタつく」「反応しない」と感じる原因を分ける指標として理解します。
LCP
LCPは、Largest Contentful Paintの略です。ページ内の大きな要素が表示されるまでの時間を見ます。
LCP対象になりやすいもの:
- ヒーロー画像
- 大きな見出し
- メインビジュアル
- ファーストビューの大きな画像
LCPが悪くなる原因:
- 画像が重い
- サーバの応答が遅い
- CSSやJavaScriptが表示を邪魔している
- 重要画像が遅延読み込みになっている
トップ画像が数MBあると、LCPが悪くなりやすいです。
CLS
CLSは、Cumulative Layout Shiftの略です。ページ表示中にレイアウトがどれだけズレたかを見ます。
よくある原因:
- 画像にwidth/heightがない
- 広告枠が後から挿入される
- Webフォントで文字幅が変わる
- 上部に後からバナーが出る
ユーザーがボタンを押そうとした瞬間に位置がズレると、誤クリックにつながります。
画像には width と height を指定し、後から出る要素にはあらかじめ場所を確保します。
INP
INPは、Interaction to Next Paintの略です。クリックや入力などの操作に対して、ページがどれくらい速く反応するかを見ます。
悪くなる原因:
- JavaScriptの処理が重い
- メインスレッドが詰まっている
- 大量のイベント処理が走る
- クリック時に重い計算をしている
見た目の読み込みが速くても、ボタンを押して反応が遅いページは使いにくく感じます。
改善の方向
| 指標 | 改善例 |
|---|---|
| LCP | 画像圧縮、重要画像の優先読み込み、サーバ応答改善 |
| CLS | 画像サイズ指定、広告枠確保、後出しUIの整理 |
| INP | JS削減、重い処理の分割、不要なイベント削除 |
すべてを一度に直そうとせず、実際に悪い指標から見ます。
Lighthouseとの関係
LighthouseでもCore Web Vitalsに近い情報を確認できます。ただし、Lighthouseはその場で測るラボデータです。
実際のユーザー環境では、端末、通信速度、地域、キャッシュ状態によって変わります。
見る時は次を分けます。
- Lighthouseの計測結果
- 実ユーザーの計測
- DevToolsでの手元確認
実践メモ: 画像が遅いならLCP、画面がズレるならCLS、操作が重いならINPというように、症状から指標へ戻ると考えやすいです。
まとめ
Core Web Vitalsは、体感速度と使いやすさを測る代表指標です。LCPは表示、CLSはズレ、INPは反応を見ます。
点数を眺めるだけでなく、どの要素が原因なのかをDevToolsやLighthouseで確認することが大切です。
