Core Web Vitals（コアウェブバイタル）は、Googleが定めるWebページのユーザー体験を測定する3つの指標です。2021年からGoogle検索のランキング要因に組み込まれており、SEO対策において避けて通れない重要指標となっています。しかし、多くのBtoBサイトではCore Web Vitalsの改善が後回しにされ、検索順位やユーザー体験に悪影響を及ぼしています。
——「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）の定義と目標値、計測方法、そして具体的な改善手順を解説します。技術的な知識がなくても理解できるよう、各施策の効果と実装難易度も明記しています。
本記事は「CVR（コンバージョン率）改善の基本と実践施策15選｜BtoB企業向け完全ガイド」シリーズの一部です。
本記事はStartLinkの「BtoBマーケティング完全ガイド」関連記事です。
ツール選定は、導入後の成果を大きく左右する重要な意思決定です。本記事では、選定基準から活用のコツまでを網羅的に解説していますので、比較検討中の方はぜひ最後までお読みください。
| 指標 | 正式名称 | 測定内容 | ユーザー体験 |
|---|---|---|---|
| LCP | Largest Contentful Paint | 最大のコンテンツ要素の表示時間 | 読み込み速度 |
| INP | Interaction to Next Paint | ユーザー操作から画面反映までの時間 | インタラクティブ性 |
| CLS | Cumulative Layout Shift | ページ読み込み中のレイアウトのずれ | 視覚的安定性 |
| 指標 | 良好（緑） | 改善が必要（黄） | 不良（赤） |
|---|---|---|---|
| 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は、Googleの「ページエクスペリエンスシグナル」の一部として検索ランキングに影響します。
| ページエクスペリエンスの要素 | 内容 |
|---|---|
| Core Web Vitals（LCP/INP/CLS） | ページの読み込み・操作性・安定性 |
| HTTPS | SSL/TLS暗号化通信 |
| モバイルフレンドリー | スマートフォンでの表示最適化 |
| インタースティシャル非使用 | 邪魔な全画面広告がないこと |
| ツール | 種類 | 特徴 | 利用場面 |
|---|---|---|---|
| PageSpeed Insights | ラボ＋フィールド | Googleの公式ツール、最も基本 | 個別ページの分析 |
| Google Search Console | フィールド | サイト全体の傾向、ページグループ別 | サイト全体の監視 |
| Chrome DevTools (Lighthouse) | ラボ | 詳細な技術分析、改善提案 | 開発時の検証 |
| Web Vitals Extension | ラボ | ブラウジング中のリアルタイム計測 | 日常的なチェック |
| GTmetrix | ラボ | ウォーターフォール分析が詳細 | 原因の深掘り |
| CrUX Dashboard | フィールド | 過去のデータ推移を可視化 | トレンド分析 |
| データ種類 | 説明 | メリット | デメリット |
|---|---|---|---|
| ラボデータ | 固定環境でのシミュレーション | 即座に計測可能、再現性が高い | 実際のユーザー体験と異なる場合あり |
| フィールドデータ | 実際のユーザーから収集 | 実態を正確に反映 | 十分なデータ量が必要、反映に時間 |
Googleの検索ランキングに使用されるのはフィールドデータです。 ラボデータはあくまで開発時の参考値として活用しましょう。
| 原因 | 発生頻度 | 改善の効果 | 実装難易度 |
|---|---|---|---|
| 画像の最適化不足 | 非常に高い | ★★★★★ | 低 |
| サーバー応答時間が遅い | 高い | ★★★★☆ | 中 |
| レンダリングブロックリソース | 高い | ★★★★☆ | 中 |
| クライアントサイドレンダリング | 中 | ★★★☆☆ | 高 |
| 施策 | 具体的な方法 | 期待改善幅 |
|---|---|---|
| 画像フォーマット変換 | JPEG/PNGをWebPに変換 | 25〜50%のサイズ削減 |
| 画像の遅延読み込み | ファーストビュー外の画像にloading="lazy"を設定 | LCP直接改善 |
| 適切なサイズ指定 | 表示サイズに合わせた画像サイズを提供 | 20〜40%のサイズ削減 |
| srcset属性の活用 | デバイスに応じた画像サイズの出し分け | デバイス別最適化 |
| LCP画像のプリロード | |
LCP 0.5〜1秒改善 |
| 施策 | 具体的な方法 |
|---|---|
| CDNの導入 | CloudflareやFastlyなどのCDNでコンテンツを配信 |
| サーバーキャッシュ | 静的コンテンツのキャッシュ設定 |
| データベース最適化 | クエリの最適化、インデックス追加 |
| HTTPSの最適化 | HTTP/2の有効化、OCSP Staplingの設定 |
| 施策 | 具体的な方法 |
|---|---|
| CSS の最適化 | 不要なCSSの削除、Critical CSSのインライン化 |
| JavaScript の遅延読み込み | async/defer属性の追加 |
| フォントの最適化 | font-display: swapの設定、サブセット化 |
| 原因 | 説明 | 発生場面 |
|---|---|---|
| 重い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改善 |
| 原因 | 説明 | 発生場面 |
|---|---|---|
| サイズ未指定の画像/動画 | 読み込み後にレイアウトがずれる | 画像表示時 |
| 動的に挿入されるコンテンツ | 広告やバナーが後から表示 | ページ読み込み中 |
| 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の確認方法 |
|---|---|
| PageSpeed Insights | CLS値と原因要素の特定 |
| Chrome DevTools | Performanceタブで「Layout Shift」を可視化 |
| Web Vitals Extension | ページ操作中のCLSをリアルタイム表示 |
| Search Console | ページグループ別のCLS状況 |
| フェーズ | 期間 | 施策 | 目標 |
|---|---|---|---|
| Phase 1 | 1〜2週間 | 画像最適化、サイズ指定 | LCP/CLS即改善 |
| Phase 2 | 2〜4週間 | JS最適化、不要スクリプト削除 | INP改善 |
| Phase 3 | 1〜2ヶ月 | CDN導入、サーバー最適化 | LCP大幅改善 |
| 継続 | 毎月 | 新規ページの監視、退行防止 | 全指標の維持 |
| CMS | 主な課題 | 改善アプローチ |
|---|---|---|
| WordPress | プラグイン過多、テーマの重さ | 不要プラグイン削除、キャッシュプラグイン導入 |
| HubSpot CMS | モジュールの読み込み最適化 | カスタムモジュールの最適化、画像圧縮 |
| Wix/Squarespace | カスタマイズの制限 | 画像最適化、不要セクションの削除 |
| カスタムCMS | 個別の技術課題 | コードレベルでの最適化 |
| 効果 | 具体的な変化 |
|---|---|
| 検索順位の向上 | 同等のコンテンツ品質の場合、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改善ガイドを実務に落とし込むには、CRMツールの活用が不可欠です。詳しくは「HubSpot CTAボタンの作成・設置方法｜クリック率を高めるデザインと配置の最適化ガイド」で解説しています。
Core Web Vitals改善ガイドとは、企業の業務効率化や成果向上を目的とした取り組み・手法のことです。本記事で解説している通り、適切な設計と運用が成功の鍵となります。導入前に自社の課題を明確にし、段階的に取り組むことが推奨されます。
最も重要なのは、明確な目標設定とKPIの定義です。ゴールが曖昧なまま施策を進めると、効果測定ができず改善サイクルが回りません。まず「何を達成したいか」を具体的な数値で定義し、そこから逆算して施策を設計することが成功への近道です。
最初のステップは現状分析です。自社の課題を洗い出し、優先順位をつけたうえで、最もインパクトの大きい領域から着手します。いきなり全体を変えようとせず、小さく始めて成功体験を積み重ねるアプローチが効果的です。HubSpotなどのツールを活用すれば、データに基づいた意思決定が可能になります。
Core Web Vitalsの改善は、SEO対策とユーザー体験改善の両方に効果がある施策です。3つの指標（LCP・INP・CLS）それぞれに対して、原因を特定し優先度の高い施策から着手することが重要です。
本記事のポイントを整理します。
HubSpotのCMS Hubは、画像の自動最適化、CDN標準搭載、モバイルレスポンシブ対応など、Core Web Vitalsに対応した機能が充実しています。サイト速度やSEOにお悩みの方は、StartLinkにご相談ください。Core Web Vitalsの診断と改善提案をご提供いたします。
この記事は2026年3月時点の情報に基づいて作成しています。
カテゴリナビゲーション: