Core Web Vitals（コアウェブバイタル）は、Googleが定めるWebページのユーザー体験を測定する3つの指標です。2021年からGoogle検索のランキング要因に組み込まれており、SEO対策において避けて通れない重要指標となっています。しかし、多くのBtoBサイトではCore Web Vitalsの改善が後回しにされ、検索順位やユーザー体験に悪影響を及ぼしています。
Core Web Vitalsが低いサイトは、ユーザーの離脱率が高く、コンバージョン率も低い傾向にあります。Googleの調査によると、LCP（表示速度）が2.5秒から3.5秒に悪化するだけで、直帰率が32%増加するとされています。つまり、Core Web Vitalsの改善はSEO対策とCVR改善の両方に効果がある施策です。
本記事では、Core Web Vitalsの3つの指標（LCP・INP・CLS）の定義と目標値、計測方法、そして具体的な改善手順を解説します。技術的な知識がなくても理解できるよう、各施策の効果と実装難易度も明記しています。
この記事でわかること
- Core Web Vitalsの3指標（LCP・INP・CLS）の定義と目標値
- 各指標の計測方法と使用ツール
- LCPを改善する具体的な手順と優先施策
- INPを改善する具体的な手順と優先施策
- CLSを改善する具体的な手順と優先施策
- Core Web Vitals改善のSEO効果と実例
Core Web Vitalsの基本知識
3つの指標の定義
| 指標 |
正式名称 |
測定内容 |
ユーザー体験 |
| LCP |
Largest Contentful Paint |
最大のコンテンツ要素の表示時間 |
読み込み速度 |
| INP |
Interaction to Next Paint |
ユーザー操作から画面反映までの時間 |
インタラクティブ性 |
| CLS |
Cumulative Layout Shift |
ページ読み込み中のレイアウトのずれ |
視覚的安定性 |
目標値（Google推奨基準）
| 指標 |
良好（緑） |
改善が必要（黄） |
不良（赤） |
| LCP |
2.5秒以下 |
2.5〜4.0秒 |
4.0秒超 |
| INP |
200ms以下 |
200〜500ms |
500ms超 |
| CLS |
0.1以下 |
0.1〜0.25 |
0.25超 |
Core Web VitalsとSEOの関係
Core Web Vitalsは、Googleの「ページエクスペリエンスシグナル」の一部として検索ランキングに影響します。
| ページエクスペリエンスの要素 |
内容 |
| Core Web Vitals（LCP/INP/CLS） |
ページの読み込み・操作性・安定性 |
| HTTPS |
SSL/TLS暗号化通信 |
| モバイルフレンドリー |
スマートフォンでの表示最適化 |
| インタースティシャル非使用 |
邪魔な全画面広告がないこと |
Core Web Vitalsの計測方法
計測ツール一覧
| ツール |
種類 |
特徴 |
利用場面 |
| PageSpeed Insights |
ラボ＋フィールド |
Googleの公式ツール、最も基本 |
個別ページの分析 |
| Google Search Console |
フィールド |
サイト全体の傾向、ページグループ別 |
サイト全体の監視 |
| Chrome DevTools (Lighthouse) |
ラボ |
詳細な技術分析、改善提案 |
開発時の検証 |
| Web Vitals Extension |
ラボ |
ブラウジング中のリアルタイム計測 |
日常的なチェック |
| GTmetrix |
ラボ |
ウォーターフォール分析が詳細 |
原因の深掘り |
| CrUX Dashboard |
フィールド |
過去のデータ推移を可視化 |
トレンド分析 |
ラボデータとフィールドデータの違い
| データ種類 |
説明 |
メリット |
デメリット |
| ラボデータ |
固定環境でのシミュレーション |
即座に計測可能、再現性が高い |
実際のユーザー体験と異なる場合あり |
| フィールドデータ |
実際のユーザーから収集 |
実態を正確に反映 |
十分なデータ量が必要、反映に時間 |
Googleの検索ランキングに使用されるのはフィールドデータです。 ラボデータはあくまで開発時の参考値として活用しましょう。
LCP（Largest Contentful Paint）の改善手順
LCPが遅くなる主な原因
| 原因 |
発生頻度 |
改善の効果 |
実装難易度 |
| 画像の最適化不足 |
非常に高い |
★★★★★ |
低 |
| サーバー応答時間が遅い |
高い |
★★★★☆ |
中 |
| レンダリングブロックリソース |
高い |
★★★★☆ |
中 |
| クライアントサイドレンダリング |
中 |
★★★☆☆ |
高 |
改善施策の優先順位
優先度1：画像の最適化
| 施策 |
具体的な方法 |
期待改善幅 |
| 画像フォーマット変換 |
JPEG/PNGをWebPに変換 |
25〜50%のサイズ削減 |
| 画像の遅延読み込み |
ファーストビュー外の画像にloading="lazy"を設定 |
LCP直接改善 |
| 適切なサイズ指定 |
表示サイズに合わせた画像サイズを提供 |
20〜40%のサイズ削減 |
| srcset属性の活用 |
デバイスに応じた画像サイズの出し分け |
デバイス別最適化 |
| LCP画像のプリロード |
|
LCP 0.5〜1秒改善 |
優先度2：サーバー応答時間の改善
| 施策 |
具体的な方法 |
| CDNの導入 |
CloudflareやFastlyなどのCDNでコンテンツを配信 |
| サーバーキャッシュ |
静的コンテンツのキャッシュ設定 |
| データベース最適化 |
クエリの最適化、インデックス追加 |
| HTTPSの最適化 |
HTTP/2の有効化、OCSP Staplingの設定 |
優先度3：レンダリングブロックリソースの排除
| 施策 |
具体的な方法 |
| CSS の最適化 |
不要なCSSの削除、Critical CSSのインライン化 |
| JavaScript の遅延読み込み |
async/defer属性の追加 |
| フォントの最適化 |
font-display: swapの設定、サブセット化 |
INP（Interaction to Next Paint）の改善手順
INPが悪化する主な原因
| 原因 |
説明 |
発生場面 |
| 重いJavaScript処理 |
メインスレッドをブロックする長時間タスク |
ボタンクリック時 |
| サードパーティスクリプト |
広告/分析タグの過剰読み込み |
ページ全般 |
| 大量のDOM要素 |
DOM操作に時間がかかる |
複雑なページ |
| レイアウトの強制再計算 |
JavaScriptによるスタイル変更 |
動的コンテンツ |
改善施策
| 施策 |
具体的な方法 |
期待改善幅 |
| Long Taskの分割 |
50ms以上のタスクを小さく分割 |
INP 100〜300ms改善 |
| 不要なJSの削除 |
未使用のJavaScriptを特定して削除 |
INP 50〜200ms改善 |
| サードパーティの見直し |
不要なタグの削除、遅延読み込み |
INP 50〜150ms改善 |
| Web Workerの活用 |
重い処理をバックグラウンドに移行 |
INP 100〜500ms改善 |
| イベントハンドラの最適化 |
デバウンス/スロットルの適用 |
INP 50〜100ms改善 |
CLS（Cumulative Layout Shift）の改善手順
CLSが発生する主な原因
| 原因 |
説明 |
発生場面 |
| サイズ未指定の画像/動画 |
読み込み後にレイアウトがずれる |
画像表示時 |
| 動的に挿入されるコンテンツ |
広告やバナーが後から表示 |
ページ読み込み中 |
| Webフォントの読み込み |
フォント切り替え時にテキストがずれる |
テキスト表示時 |
| レスポンシブ画像の設定不備 |
デバイスによって画像サイズが変わる |
リサイズ時 |
改善施策
| 施策 |
具体的な方法 |
期待改善幅 |
| 画像のサイズ指定 |
width/height属性を明示的に設定 |
CLS 0.05〜0.15改善 |
| aspect-ratio CSSの活用 |
アスペクト比を維持するCSS設定 |
CLS 0.05〜0.10改善 |
| 動的コンテンツの予約領域 |
min-heightで表示領域を事前確保 |
CLS 0.05〜0.20改善 |
| フォント表示の最適化 |
font-display: optional or swap |
CLS 0.01〜0.05改善 |
| 広告枠のサイズ固定 |
広告表示領域を事前に確保 |
CLS 0.10〜0.30改善 |
CLSの計測と問題箇所の特定
| ツール |
CLSの確認方法 |
| PageSpeed Insights |
CLS値と原因要素の特定 |
| Chrome DevTools |
Performanceタブで「Layout Shift」を可視化 |
| Web Vitals Extension |
ページ操作中のCLSをリアルタイム表示 |
| Search Console |
ページグループ別のCLS状況 |
Core Web Vitals改善のロードマップ
3ヶ月改善プラン
| フェーズ |
期間 |
施策 |
目標 |
| Phase 1 |
1〜2週間 |
画像最適化、サイズ指定 |
LCP/CLS即改善 |
| Phase 2 |
2〜4週間 |
JS最適化、不要スクリプト削除 |
INP改善 |
| Phase 3 |
1〜2ヶ月 |
CDN導入、サーバー最適化 |
LCP大幅改善 |
| 継続 |
毎月 |
新規ページの監視、退行防止 |
全指標の維持 |
CMSごとの改善アプローチ
| CMS |
主な課題 |
改善アプローチ |
| WordPress |
プラグイン過多、テーマの重さ |
不要プラグイン削除、キャッシュプラグイン導入 |
| HubSpot CMS |
モジュールの読み込み最適化 |
カスタムモジュールの最適化、画像圧縮 |
| Wix/Squarespace |
カスタマイズの制限 |
画像最適化、不要セクションの削除 |
| カスタムCMS |
個別の技術課題 |
コードレベルでの最適化 |
Core Web Vitals改善のSEO効果
改善によって期待できる効果
| 効果 |
具体的な変化 |
| 検索順位の向上 |
同等のコンテンツ品質の場合、CWV良好サイトが優位 |
| クリック率の向上 |
検索結果でのCWVバッジ表示（将来的） |
| 直帰率の低下 |
ページ読み込み改善で離脱が減少 |
| CVRの向上 |
ユーザー体験改善でコンバージョン率が向上 |
| クロール効率の向上 |
ページの読み込みが速いとクロール効率が上がる |
改善事例
| 項目 |
改善前 |
改善後 |
| LCP |
4.2秒（赤） |
1.8秒（緑） |
| INP |
380ms（黄） |
150ms（緑） |
| CLS |
0.32（赤） |
0.05（緑） |
| オーガニック流入 |
月5,000セッション |
月7,200セッション（+44%） |
| 直帰率 |
65% |
48%（-17pt） |
| CVR |
1.2% |
1.8%（+50%） |
まとめ
Core Web Vitalsの改善は、SEO対策とユーザー体験改善の両方に効果がある施策です。3つの指標（LCP・INP・CLS）それぞれに対して、原因を特定し優先度の高い施策から着手することが重要です。
本記事のポイントを整理します。
- まず計測する：PageSpeed InsightsとSearch Consoleで現状を把握
- 画像最適化から始める：最も効果が大きく、実装が容易
- 不要なJSを削減する：サードパーティスクリプトの見直し
- 継続的に監視する：新規ページや変更時にCWVを確認
HubSpotのCMS Hubは、画像の自動最適化、CDN標準搭載、モバイルレスポンシブ対応など、Core Web Vitalsに対応した機能が充実しています。サイト速度やSEOにお悩みの方は、StartLinkにご相談ください。Core Web Vitalsの診断と改善提案をご提供いたします。
この記事は2026年3月時点の情報に基づいて作成しています。
HubSpot導入のご相談
StartLinkでは、150社以上の支援実績をもとに、HubSpotの導入設計から運用定着まで一貫してサポートしています。CRM・SFA・MAの活用にお悩みの方は、お気軽に無料相談をご利用ください。