コアウェブバイタル(Core Web Vitals)とは？LCP・INP・CLSの3指標と改善方法

インターネット上には様々なWebサイトやページがありますが、そのすべてをユーザーが快適に利用できるとは限りません。
Googleは、コアウェブバイタル（Core Web Vitals）という指標を作ることで、Webサイトがユーザーにとって有益なものになっているか判断しています。

このページでは、コアウェブバイタルとは何か、またその指標を改善するにはどうすれば良いかを解説します。

自社サイトのコアウェブバイタルを測定する便利な無料ツールもご紹介しています。
アクセスするユーザーが快適に自社サイト内で情報を収集できるよう、コアウェブバイタルを改善し、検索エンジンからの信頼を獲得しましょう。

コアウェブバイタルとは

コアウェブバイタルとは、2021年にGoogleが発表した「Webページ上でのユーザーエクスペリエンス（UX）を向上させるための重要な指標」です。

具体的には以下の3つを指します。

Googleは、ユーザーがストレスなく快適にインターネットを利用してもらえるよう「ウェブバイタル」の改善に取り組み始めました。ウェブバイタルの意味は、ユーザーがウェブ（＝インターネット）をストレスなく利用する際のバイタル（＝重要）なポイントです。

その中でもコア（＝中心となる）が付く「コアウェブバイタル」は、Webサイトの運営やコンテンツ作成を行う上で「最重要な点」と言えます。

コアウェブバイタルの3要素、LCP、INPおよびCLSとは何なのか、次でより詳しく解説します。

コアウェブバイタルの3つの指標、LCP・INP・CLS

Googleが注力するウェブバイタル、その中でも「コア（中核）」となる指標であるコアウェブバイタルの「LCP」、「INP」および「CLS」とはどのような値なのでしょうか。
それぞれ以下、詳しく解説します。

LCP(Largest Contentful Paint)

コアウェブバイタル指標の1つ目、LCP（Largest Contentful Paint）について、Googleは以下の説明をしています。

ユーザーがページで最も有意義なコンテンツをどのくらい早く見ることができるかを表します。感覚的な読み込みスピードを測定し、ページ読み込みタイムラインにおいてページの主要コンテンツが読み込まれたと思われるタイミングを指します。

コンテンツ内の情報が有益で、読んでもらえればユーザーが満足できるWebページであっても、表示速度が遅ければユーザーはストレスを感じ、離脱する可能性が高くなります。

LCPは、2.5秒以内なら「Good」、4.0秒以上かかると「Poor」と判断されます。ページ作成後にLCPが基準を満たせているか必ずチェックし、スコアを満たせていない場合は「Good」を目指して改善しましょう。

INP(Interaction to Next Paint)

2つ目は、操作への応答性を測るINP（Interaction to Next Paint）です。2024年3月12日にFIDに代わってCore Web Vitalsの指標になりました。

FIDが最初の操作の処理開始までの待ち時間を測っていたのに対し、INPはページ滞在中のクリック・タップ・キー入力を対象に、操作から次の画面描画までの応答性を評価します。

実ユーザーのデータの75パーセンタイルで、200ミリ秒以下が「良好」、200ミリ秒超から500ミリ秒以下が「改善が必要」、500ミリ秒超が「不良」です。

メニューを開く、商品をカートに追加するなどの操作で、反応が遅い箇所がないかを確認しましょう。

参考：Google公式ドキュメント

CLS(Cumulative Layout Shift)

3つ目のコアウェブバイタルは、CLS（Cumulative Layout Shift）です。 CLSに関し、Googleは以下のように説明しています。

ページがどのくらい安定しているように感じられるかを表します。視覚的な安定性を測定し、表示されるページ コンテンツにおける予期しないレイアウトのずれの量を定量化します。

CLSは、Webページを読み込みはじめて全体が表示されるまで、レイアウトにズレが生じることを指し、CLSの数値が少ないほど評価が良くなります。 CLSは、0.1以下で「Good」、0.25を超えると「Poor」と判断されます。

CLSの数値が高いWebページでは、ユーザーが表示された内容を読み進めていたところ、挿入されていた画像がズレて表示されてしまうことで、読んでいた部分が見えないなどの問題が出ます。

コアウェブバイタル評価を上げるためだけでなく、せっかくアクセスしてくれたユーザーがページ内の情報を快適に読み進められるよう改善し、「Good」評価を目指しましょう。
上記の3要素がコアウェブバイタルですが、ウェブバイタルにはその他の要素もあります。次は、その4要素について解説します。

コアウェブバイタル以外でユーザーの快適さを示す4つの指標

ユーザーがインターネットを使いやすくするための最重要な指標がコアウェブバイタルですが、ご紹介したLCPとINP、CLSの3つ以外にもユーザーの快適さを高める「ウェブバイタル」には、以下の4つの要素があります。

以下の4つの要素もコアウェブバイタル同様に重要なものです。それぞれについて詳しく解説します。

モバイルフレンドリー

モバイルフレンドリーは、パソコン以外（スマホやタブレットなど）のモバイル端末を利用しインターネットにアクセスした人が使いやすくする取り組みです。

一昔前のパソコンの画面で見ることを前提に作られたサイトでは、文字が小さく読みにくいため、Googleは、モバイル端末でも快適にWebサイトを閲覧できるよう変更することを推奨しています。

モバイルフレンドリー化を進め、スマホやタブレットからアクセスするユーザーが自社サイトを快適に閲覧できるよう変更しましょう。
モバイルフレンドリーについては『モバイルフレンドリーとは？SEO対策で必要な理由や確認・対応方法』で詳しく解説しているので、ぜひ、ご一読ください。

SSL導入によるHTTPS化

SSL導入は、Webサイトへのアクセス情報を暗号化させるためのもので、SSLを導入するとURLの最初が「http」から「https」に変わります。

SSLを導入していない場合、例えばECサイトで買い物をする場合にクレジットカード情報を入力しても、暗号化されていないため、セキュリティ面の問題が出ます。 ユーザーが安心してサイトを利用できるようGoogleはSSL化を強く推奨しています。

セーフブラウジング

セーフブラウンジングは、ユーザーが訪れるサイトがウィルス感染やフィッシング詐欺の原因になっていないかを判断します。
セーフブラウジングに抵触しているサイトを検索結果に表示させないことで、インターネット上でのユーザーの安全性を守っています。

インタースティシャルの有無

インタースティシャルの有無については、Webページを開いたときにポップアップで画面全体を覆う広告が貼られているかどうかに触れています。
Webページを開いたときに内容を読み進めようとしたら画面上に広告が表示され、広告をクローズしないと内容が表示されなかった経験はありませんか？

Googleは、このインタースティシャルな広告を、ユーザーが快適にコンテンツを読む妨げになると判断しているため、ウェブバイタルの基準としています。

コアウェブバイタル3項目に加え、上記4項目も意識し、ユーザーエクスペリエンスが向上するようなページ作りを心がけましょう。
インタースティシャル広告については『インタースティシャル広告とは？意味やペナルティリスク、SEOへの影響を解説』に情報をまとめています。

コアウェブバイタルを含むウェブバイタルを意識し、Webサイトを運営するとSEOにはどのような影響があるのか、続いて解説します。

SEOに与える影響とは

コアウェブバイタルを重視し、自社サイトを運営することは、Googleの信頼を勝ち取るWebサイトを目指すことにつながります。
SEO（検索エンジン最適化）は文字通り、Googleが求める最適なWebサイトにすること。

コアウェブバイタルは、ユーザーを重視するGoogleが注力している項目であり、その条件を満たしたコンテンツは良い評価を受け、上位表示されやすくなります。

対策キーワードを分析し、検索意図に沿ったユーザーに役立つコンテンツを作成したら、コアウェブバイタルの基準を満たすWebページを目指しましょう。
仮に自社サイトで公開したコンテンツが、競合他社サイトと比べ、「質」が同じだった場合、Googleは以下の説明をしています。

ページエクスペリエンスの構成要素はすべて重要ですが、ランキングでは、ページエクスペリエンスの一部の要素が平均以下であっても、総合的に優れた情報を含むページが優先されます。優れたページエクスペリエンスが関連性の高い優れたコンテンツに勝ることはありません。しかし、同様のコンテンツを含むページが複数ある場合は、ページ エクスペリエンスが検索ランキングで非常に重要になります。

SEO対策を進める上で、高品質なコンテンツを作成することが重要であることに変わりはありません。
しかし、同時にコアウェブバイタルの重要性を理解し、ページ作成時に基準を満たせているか確認しておかなければ、競合となる外部サイトに勝つことは難しいです。

コンテンツの質にこだわり続けてきたものの、競合他社サイトに負けてしまう場合は、上記でご紹介したコアウェブバイタル、LCPやINP、CLSをチェックし、競合他社サイトに負けていないか確認してみましょう。

では、コアウェブバイタルの評価はどのように確認すれば良いのでしょうか。次に、コアウェブバイタルの評価を確認するのに役立つ無料ツールをご紹介します。

コアウェブバイタルの評価を確認できる4つの無料ツール

自社サイト内のページがコアウェブバイタルの基準値をクリアできているか確認するのに役立つ、4つの無料ツールをご紹介します。

Google Search Console

1つ目は、Google Search Consoleです。
Google Search Consoleにログインし、「エクスペリエンス」から「ウェブに関する主な指標」を選択します。

コアウェブバイタルの判断と同じく、「Good」にあたる「良好」と「Needs Improvement」にあたる「改善が必要」、「Poor」に該当する「不良」それぞれが表示されます。 「不良」があれば、最優先で内容を確認し、改善しましょう。

PageSpeedInsights

2つ目は、PageSpeed Insightsです。対象ページのURLを入力して分析します。

PageSpeed Insightsでは、CrUXによる過去28日間の実ユーザーデータと、Lighthouseによるテスト環境の計測結果を分けて確認できます。実ユーザーデータが十分に集まっていないURLでは、オリジン単位のデータが表示されたり、実ユーザーデータが表示されなかったりすることがあります。

実ユーザーデータでは、Core Web VitalsのLCP・INP・CLSを確認します。FCPやTTFBは補助的な指標です。TTFBは、ページへの移動開始からレスポンスの最初のバイトが届くまでの時間で、0.8秒以下が良好の目安です。

Lighthouseの計測では、LCP・CLSのほか、FCP・TBT・Speed Indexなどを使って問題の原因を調べます。TBTはメインスレッドが長いタスクに占有される時間に関する指標で、実ユーザーのINPと同じものではありません。

実ユーザーの体験の評価と、問題を再現して原因を調べる計測を使い分けることが大切です。

参考：Google公式ドキュメント

以前の掲載画面です。現在の画面・指標とは異なる場合があります。

Lighthouse

3つ目は、Lighthouseです。Chrome DevToolsなどから実行でき、ページのパフォーマンス・アクセシビリティ・ベストプラクティス・SEOを監査します。

これらは監査のカテゴリであり、Core Web Vitalsの指標そのものではありません。テスト環境での計測結果と、実ユーザーのCore Web Vitalsの評価を分けて確認しましょう。

参考：Google公式ドキュメント

以前の掲載画面です。現在の画面・指標とは異なる場合があります。

Chrome DevTools（旧Web Vitals拡張機能の移行先）

4つ目は、Chrome DevToolsのPerformanceパネルです。旧Web Vitals拡張機能は2025年1月にサポートを終了し、主要な機能がDevToolsへ統合されました。

対象ページでChrome DevToolsを開き、PerformanceパネルでLCP・INP・CLSなどのローカル計測を確認します。INPを調べるときは、メニューやボタンを実際に操作して応答を確かめます。

この計測は自分の端末・通信環境での結果です。Search ConsoleやPageSpeed Insightsの実ユーザーデータと併せて判断しましょう。

参考：Google公式ドキュメント

旧Web Vitals拡張機能の掲載画面です。現在のChrome DevToolsとは画面が異なります。

コアウェブバイタル（LCP・INP・CLS）の改善方法

ツールを使ってコアウェブバイタルの数値を調べ、評価が「Poor」であれば、急ぎ改善しなければなりません。
コアウェブバイタルであるLCPとINP、CLSの評価を改善する方法を以下、ご紹介します。

LCP改善方法

LCPを改善するには、なぜLCPが低いのか、その原因を知る必要があります。
LCPが低評価を受ける理由には、以下4つが考えられます。

サーバーの反応速度が遅い、または画像などのリソースが重い場合は、コードや画像のデータを圧縮するなどして軽量化します。特に画像については、アップロード前にサイズの規定を定めておかないと、高画質の写真データなどをそのままアップロードしてしまうので注意しなければなりません。

自社サイトの運営ルールを設け、画像の圧縮方法や、コードの書き方について無駄のないコンパクトなデータを作成するよう心がけましょう。

また、自社サイト内に画像が多い場合は、CDN設定をすることでWebサイトを置いてあるサーバーの負担を軽減し、画像の表示速度を改善できます。
画像の多いページで読み込みに問題が生じる場合は、Lazy Load設定をすれば解消できることもあるので試してみてください。

JavascriptやCSSのレンダリングブロックは、コードの間違いや不要なものの削除、インライン化を進めるなどして対応しましょう。

INP改善方法

INPを改善するには、どの操作で応答が遅くなるかを特定します。クリック・タップ・キー入力について、入力待ち、イベント処理、次の画面描画までのどこに時間がかかっているかを調べます。

原因に応じて、不要なJavaScriptの削減、長い処理の分割、イベント処理の軽量化、レイアウトや描画の負荷の削減を行います。

初回の操作だけでなく、ページを読み進めた後の操作も確認しましょう。

参考：Google公式ドキュメント

CLS改善方法

CLSがPoor表示される原因には、画像や動画のサイズ指定や埋め込み設定のミスが挙げられます。
自社サイトを運営していてページ内に画像を挿入する際のルールが決まっていないと、それぞれサイズやデータの大きさに違いが生まれます。画像や動画の挿入する際のルールを規定し、サイズを指定することでCLSが改善されます。

動画の挿入にはYoutubeも含まれ、またその他にGoogleマップやSNSからもページ内にインラインフレーム（iframe）を使ってデータを挿入することがあります。
このiframe挿入も、各サイトで自動生成されるものではなく、自社サイト指定のサイズを決め、CLSが低評価されるのを防ぎましょう。

当社EXIDEAが考えるCore Web Vitals改善の本質

よくある質問

Core Web Vitalsで「Good」評価を取れば必ず順位は上がりますか？

直接的に上がるとは限りません。Core Web Vitalsはランキング要因の1つですが、コンテンツ品質や検索意図とのマッチ度のほうが影響度が高いケースが多くなります。Good評価は「最低限のユーザー体験の担保」と捉え、コンテンツ改善と並行して進めるのが現実的です。

FIDがINPに変更されたと聞きましたが、対応すべきですか？

2024年3月にFIDからINP(Interaction to Next Paint)に正式に置き換わりました。INPはページ全体のインタラクション応答性を測る指標で、より実態に近いユーザー体験を反映します。既存のFID対策(JavaScriptの軽量化、Long Task削減)はINPでも有効です。

LCPを改善する一番効果的な方法は何ですか？

ファーストビューに表示される最大要素(多くは画像かヒーロー文字)の表示速度を最適化することです。具体的には、画像のWebP化・適切なサイズ指定・lazy-loadの解除(LCP対象画像)・Critical CSS適用・サーバー応答速度改善が効果的です。

CLSはどのように測定すべきですか？

PageSpeed InsightsとSearch Consoleの両方で確認します。Insightsでは「レイアウトシフト」セクションで原因要素が特定できます。よくある原因は、サイズ未指定の画像・iframe、動的に挿入される広告・SNS埋め込み、Webフォントの遅延読み込みなどです。

Core Web Vitalsの改善は誰がやるべきですか？

理想は「Webデザイナー・コーダー・エンジニア・編集者」の連携です。指標の理解と改善方針はSEO担当者、実装はエンジニア、画像最適化はデザイナーや編集者、というように役割分担を明確にすると進みやすくなります。

まとめ

2021年6月から、検索順位に影響を与えるものとして導入されたコアウェブバイタルは、それまでコンテンツ作成や内部施策、外部サイトからのリンク獲得といった既存のSEOとは異なる新しい対策が必要です。

このページでご紹介させていただいたLCPとINP、CLSの「コアウェブバイタル」だけでなく、モバイルフレンドリー化やSSL化などのウェブバイタル項目にも注力し、ユーザーがより快適にインターネットを利用できるWebサイト作りを心がけましょう。

これまでのSEOに加え、コアウェブバイタル対策を進めることでGoogleからの信頼を得られるWebサイトになれば、検索順位が上がり、より多くのアクセス数を得ることができます。
コアウェブバイタル対策も内部対策の1つです。以下のページで紹介している他の内部対策も並行して進め、上位表示を目指しましょう。