Core Web Vitalsとは
Core Web Vitals(コアウェブバイタル)は、Googleが2020年に発表した、Webページのユーザー体験(UX)を数値で測定するための3つの重要指標です。2021年6月からGoogleのランキング要因として正式に導入されています。
3つの指標
LCP(Largest Contentful Paint)
ページの主要コンテンツ(最も大きな画像やテキストブロック)が表示されるまでの時間を測定します。
- 良好: 2.5秒以下
- 改善が必要: 2.5秒〜4秒
- 不良: 4秒超
INP(Interaction to Next Paint)
ユーザーの操作(クリック、タップ、キー入力)に対して、ページが視覚的に応答するまでの時間を測定します。2024年3月にFID(First Input Delay)から置き換えられました。
- 良好: 200ミリ秒以下
- 改善が必要: 200ミリ秒〜500ミリ秒
- 不良: 500ミリ秒超
CLS(Cumulative Layout Shift)
ページ読み込み中に発生するレイアウトのずれ(意図しない要素の位置変動)の累積量を測定します。広告や画像の遅延読み込みで文章が突然ずれる現象などが該当します。
- 良好: 0.1以下
- 改善が必要: 0.1〜0.25
- 不良: 0.25超
Core Web Vitalsの改善方法
LCPの改善
- 画像の最適化(WebP/AVIF形式の採用、適切なサイズ設定)
- サーバーの応答時間の短縮(CDNの活用、キャッシュの設定)
- レンダリングをブロックするCSS/JavaScriptの削減
- LCP要素のプリロード(
<link rel="preload">)
INPの改善
- JavaScriptの実行時間の短縮(コード分割、遅延読み込み)
- メインスレッドをブロックする長いタスクの分割
- 不要なサードパーティスクリプトの削減
- Web Workerの活用
CLSの改善
- 画像や動画に明示的なサイズ(width/height属性)を指定
- 広告スペースの事前確保
- Webフォントの最適化(
font-display: swapの使用) - 動的コンテンツの挿入位置に注意
測定ツール
| ツール | データの種類 | 特徴 |
|---|---|---|
| Search Console | フィールドデータ | 実ユーザーの28日間データ |
| PageSpeed Insights | 両方 | 個別URL分析 |
| Lighthouse | ラボデータ | 開発者向け詳細分析 |
| Chrome DevTools | ラボデータ | リアルタイムデバッグ |
フィールドデータ(実ユーザーデータ)とラボデータ(テスト環境データ)の両方を参照し、総合的に判断することが重要です。