Core Web Vitals改善ガイド｜LCP・INP・CLSの対策手順とSEO効果

  • 2026年3月3日

ブログ目次


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の基本知識

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画像を優先読み込み 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）それぞれに対して、原因を特定し優先度の高い施策から着手することが重要です。

本記事のポイントを整理します。

  1. まず計測する：PageSpeed InsightsとSearch Consoleで現状を把握
  2. 画像最適化から始める：最も効果が大きく、実装が容易
  3. 不要なJSを削減する：サードパーティスクリプトの見直し
  4. 継続的に監視する：新規ページや変更時にCWVを確認

HubSpotのCMS Hubは、画像の自動最適化、CDN標準搭載、モバイルレスポンシブ対応など、Core Web Vitalsに対応した機能が充実しています。サイト速度やSEOにお悩みの方は、StartLinkにご相談ください。Core Web Vitalsの診断と改善提案をご提供いたします。

この記事は2026年3月時点の情報に基づいて作成しています。

HubSpot導入のご相談

StartLinkでは、150社以上の支援実績をもとに、HubSpotの導入設計から運用定着まで一貫してサポートしています。CRM・SFA・MAの活用にお悩みの方は、お気軽に無料相談をご利用ください。

株式会社StartLinkは、事業を推進するためのHubSpot導入、また生成AIの社内業務への反映などのHubSpot×AI活用のご相談を受け付けております。 最近では、HubSpotを外部から操作するAIエージェント活用や、HubSpot内で使えるAI機能などのご相談をいただくことも増えてきており、サービスのプランについてご相談/お見積もり依頼があればお気軽にお問い合わせくださいませ。 無料のお問い合わせページより、お気軽にご連絡いただけます。

その他、HubSpot の設計の考え方や構築方法などをご紹介した YouTube チャンネルも運営しておりますので、社内の HubSpot 研修や HubSpot をこれから導入され、導入を検討されている企業様は、ぜひ一度ご確認いただいて、イメージをつかんでいただければなと思います。 すべて無料で公開しておりますので、こちらのYoutubeチャンネルを、ぜひチェックしてみてください！

関連キーワード:

サービス資料を無料DL

著者情報

7-1

今枝 拓海 / Takumi Imaeda

株式会社StartLinkの代表取締役。
HubSpotのトップパートナーである株式会社H&Kにて、HubSpotのCRM戦略/設計/構築を軸として、 国内・外資系エンタープライズ企業へコンサルティング支援を実施。 パーソルホールティングス株式会社にて、大規模CRM/SFA戦略の策定・PERSOLグループ横断のグループAI戦略/企画/開発ディレクションの業務を遂行経験あり。
株式会社StartLinkでは、累計100社以上のHubSpotプロジェクト実績を元にHubSpot×AIを軸にした経営基盤DXのコンサルティング事業を展開。