Webサイトのページ速度や表示安定性が低いことで、せっかくコンテンツに力を入れても検索順位が思うように上がらない——そんな課題を感じているマーケターや事業担当者は少なくありません。Googleが2021年から正式にランキング要素として採用したCore Web Vitalsは、ユーザー体験を数値化した指標であり、改善することでSEO評価と直帰率の双方に好影響をもたらす可能性があります。
本記事では、Core Web Vitalsを構成するLCP・FID（INP）・CLSの3指標を体系的に解説し、それぞれの具体的な改善手順と実装チェックポイントを一気通貫した形でお伝えします。テクニカルSEOの入口として情報収集が欠かせないこの分野で、弊社CreativeDriveが実証してきたアプローチも交えながら解説しますので、ぜひ最後までお読みください。
こんな方にオススメ
- Core Web Vitalsのスコアが低く、改善の優先順位をどうつけるか迷っている方
- LCP・CLS・FIDという言葉は知っているが、具体的な対処法がわからない方
- ページ速度改善をSEO施策と掛け合わせて新しい価値を生みたいマーケ担当者
この記事を読むと···
- Core Web Vitalsの3指標（LCP・FID/INP・CLS）の意味と目標値が理解できる
- 各指標の改善手順をステップ形式で実践できるようになる
- 改善後の効果測定方法と、継続的なモニタリング体制の作り方がわかる
目次
Core Web Vitalsとは？3つの指標を正しく理解する
Core Web Vitalsは、Googleがページ体験（Page Experience）の評価に用いる3つの速度・安定性指標の総称です。単なる読み込み速度だけでなく、ユーザーが「速く・スムーズに・ストレスなく」操作できるかを多角的に測定している点が特徴です。この3指標を正確に把握することが、改善施策の生命線となります。
LCP（Largest Contentful Paint）とは
LCPは「最大コンテンツの描画」を意味し、ページが読み込まれてから最も大きな視覚要素（画像・動画・大テキストブロックなど）が画面に表示されるまでの時間を計測する指標です。Googleの基準では、2.5秒以内が「良好（Good）」、4.0秒超が「改善が必要（Poor）」と分類されます。
LCPに影響する要素として最も代表的なのは、ファーストビューに配置されたヒーロー画像や大型バナーです。これらが最適化されていない場合、ページ全体の表示完了を待つユーザーの離脱率が高まる傾向があります。WordPressサイトであれば、テーマのトップ画像やアイキャッチ画像が主なLCPの対象要素になるケースが多く見られます。
また、LCPが遅くなる原因は画像の重さだけではありません。サーバーの応答速度（TTFB：Time to First Byte）、レンダリングを阻害するCSS・JavaScript、Webフォントの遅延読み込みなど、複合的な要因が絡み合っています。改善にあたっては、まずGoogle Search ConsoleやPageSpeed Insightsで「LCPの要素は何か」を特定することが出発点になります。
FID / INP（インタラクションの応答性）とは
FID（First Input Delay）は、ユーザーが初めてページを操作した時（ボタンクリック・リンクタップなど）から、ブラウザがその操作に応答し始めるまでの遅延時間を計測する指標でした。2024年3月をもってFIDは正式にINP（Interaction to Next Paint）へと移行しており、現在のCore Web Vitalsの評価ではINPが使用されています。
INPはFIDよりも包括的な指標で、ページ訪問中のすべてのインタラクションの応答性を評価します。目標値は200ms以内（良好）、500ms超が「改善が必要」とされています。
JavaScriptの実行が重い場合、メインスレッドがブロックされてINPが悪化しやすくなります。サードパーティスクリプト（チャットツール、広告タグ、アナリティクスなど）が多いサイトは特に注意が必要です。
改善の基本的なアプローチは、JavaScriptの実行コストを下げることです。不要なスクリプトの削除、コード分割（Code Splitting）、Web Workerの活用、長いタスクの分割（Long Task の分割）などが有効な手段として挙げられます。特に、Webサイトにフォームや動的なUIコンポーネントが多い場合はINPの最適化が直接的なユーザー体験改善につながります。
CLS（Cumulative Layout Shift）とは
CLSは「累積レイアウトシフト」の略で、ページが読み込まれる過程で要素が突然ずれ動く現象の累積量を数値化した指標です。目標値は0.1以下（良好）、0.25超が「改善が必要」とされています。CLSが高いと、ユーザーがテキストを読んでいる最中に広告が挿入されてレイアウトが崩れたり、クリックしようとしたボタンが動いてしまったりという体験が発生します。
CLSの主な原因としては、サイズが指定されていない画像や動画、動的に挿入される広告・バナー、遅延読み込みされるフォントによるテキストの再レンダリングなどがあります。特にレスポンシブデザインのサイトで画像の幅・高さ属性（`width`/`height`）を省略しているケースは、CLS悪化の典型的なパターンです。
改善策は比較的シンプルで、画像・動画要素に必ず縦横サイズを明示すること、広告エリアに固定の高さを確保すること、フォントの`font-display: optional`または`swap`設定を適切に行うことが基本対応となります。CLSは他の2指標と比べてコーディング上の修正で対処しやすい指標であるため、優先的に着手する価値があります。
Creative Drive
SEOで集めた読者を、商談まで引き上げられていますか？
PVが増えても問い合わせにならない——それはコンテンツが"集客止まり"だからです。Creative Driveはグロースハック視点でSEOコンテンツを設計し、潜在層を育成・商談化まで引き上げます。
あなたに関連しそうなCreative Driveの機能・サポート一覧
機能・サポート一覧を見る →
Core Web Vitalsの計測ツールと現状把握の方法
改善施策に入る前に、現在のスコアを正確に把握することが重要です。Googleが提供する複数の計測ツールを組み合わせることで、ラボデータ（シミュレーション）とフィールドデータ（実際のユーザーデータ）の両面から課題を特定できます。情報収集が欠かせないこのフェーズを丁寧に行うことが、的外れな施策を避ける鍵になります。
PageSpeed Insightsで即時診断する
PageSpeed Insights（PSI）は、URLを入力するだけでCore Web Vitalsのスコアと改善提案を表示してくれるGoogleの無料ツールです。モバイルとデスクトップの両方のスコアを確認でき、「フィールドデータ（Chrome User Experience Report）」と「ラボデータ（Lighthouse）」の両方が表示されます。
フィールドデータは実際のユーザーの閲覧環境における過去28日間の集計値であり、SEO評価に直接影響するデータです。一方、ラボデータはシミュレーション環境でのスコアで、原因特定に役立ちます。まずはフィールドデータの各指標が「良好（緑）」「改善が必要（オレンジ）」「低速（赤）」のどのゾーンにあるかを確認しましょう。
PSIの「診断」セクションには、改善の優先度が高い項目が具体的に表示されます。「レンダリングを妨げるリソースの除外」「画像のサイズ適正化」「未使用のJavaScriptの削減」などの提案が出てきた場合、それぞれが後述する改善手順の対象項目に対応しています。
Google Search Consoleで全ページを俯瞰する
Google Search Consoleの「ウェブに関する主な指標」レポートでは、サイト全体のCore Web Vitalsの状況をページグループ単位で把握できます。PSIが1URLずつの診断であるのに対し、Search Consoleでは「どのページ群でLCPが悪化しているか」「モバイルとPCでどちらが問題か」を一覧で確認できる点が大きな強みです。
特定のURL群だけスコアが低い場合、テンプレートやプラグインの影響が疑われます。例えばカテゴリーページだけLCPが悪い場合はサムネイル画像の最適化が未実施の可能性があり、特定の投稿タイプだけCLSが高い場合は特定のウィジェットやショートコードが原因かもしれません。このように、ページ属性ごとに問題を分類することで施策の優先順位付けが容易になります。
Chrome DevToolsとLighthouseで詳細分析する
Chrome DevToolsのPerformanceタブとLighthouseは、エンジニアや技術担当者が詳細な原因分析を行う際に欠かせないツールです。Lighthouseは開発者ツール（F12）から直接実行でき、Core Web VitalsのスコアだけでなくLCPの対象要素の特定、CLSを引き起こしている要素の可視化、長いJavaScriptタスクの検出などが可能です。
また、Chrome DevToolsの「Rendering」パネルにある「Layout Shift Regions」を有効にすると、レイアウトシフトが発生している箇所が赤くハイライトされるため、CLSの原因箇所を視覚的に特定できます。技術的な修正作業を行うエンジニアと連携する際に、このスクリーンショットを共有するだけで認識のずれが少なくなります。
LCP改善の具体的な手順
LCPは3指標の中で改善効果がSEOに最も直接的に反映されやすく、多くのサイトで優先対応が推奨される指標です。改善手順を体系的に進めることで、スコアの大幅な向上が期待できます。ここでは実装レベルで取り組める施策を順に解説します。
画像の最適化：WebP変換・サイズ圧縮・遅延読み込み
LCPの対象要素が画像の場合、最初に取り組むべきは画像フォーマットの最適化です。JPEGやPNGからWebPに変換するだけで、同等の視覚品質を保ちながらファイルサイズを30〜50%程度削減できるケースが多く見られます（実際の削減率はコンテンツによって異なります）。WordPressを使用している場合は「ShortPixel」「Imagify」「WebP Express」などのプラグインで自動変換が可能です。
次に重要なのが画像サイズの最適化です。実際の表示サイズよりも大きな画像ファイルを読み込んでいるケースは非常に多く、例えば表示幅が800pxなのに2400pxの画像を配信しているだけで無駄な読み込みが発生します。`srcset`属性を使ったレスポンシブ画像の実装により、デバイスの解像度・画面幅に合わせた最適サイズの画像を配信できます。
ただし、LCPの対象要素（ファーストビューの最大コンテンツ）には遅延読み込み（`loading=”lazy”`）を適用してはいけません。LCPの対象要素には`loading=”eager”`または属性なし（デフォルト）を指定し、スクロール外の画像にだけ`loading=”lazy”`を適用するのが正しい使い方です。この点は見落とされやすく、誤設定がLCPを悪化させる原因になります。
サーバー応答速度（TTFB）の改善
LCPの遅延の原因がサーバー応答にある場合、TTFBの改善が優先課題になります。TTFBはブラウザがリクエストを送信してからサーバーの最初の応答バイトを受け取るまでの時間で、800ms以内が目標値とされています。
最も効果的な改善策はキャッシュの活用です。WordPressであれば「W3 Total Cache」「WP Super Cache」「LiteSpeed Cache」などのキャッシュプラグインを導入することで、動的なPHPの処理を静的HTMLとして保存・配信できます。
また、CDN（Content Delivery Network）の導入により、ユーザーに地理的に近いサーバーからコンテンツを配信することでTTFBを大幅に短縮できます。国内向けサイトであれば、CloudflareやAWSのCloudFrontなどが広く活用されています。
共有レンタルサーバーを使用している場合は、サーバーリソースの上限によるレスポンス遅延が発生しやすい環境です。トラフィックが増加してきた段階では、専用サーバーやVPS、クラウドホスティングへの移行を検討することも、長期的なLCP改善につながる選択肢の一つです。
レンダリング阻害リソースの排除
ブラウザはHTMLを上から順に解析し、`
`内のCSS・JavaScriptファイルを読み込み終わるまでページのレンダリングを開始できません。この「レンダリング阻害リソース」を削減することがLCP改善の重要な施策です。CSSについては、ファーストビューに必要な最低限のスタイルだけを`
`内にインライン記述する「クリティカルCSS」の実装が有効です。残りのCSSは非同期で読み込むことで初期表示を高速化できます。JavaScriptについては、`
