コアウェブバイタル（Core Web Vitals）とは？誰でもわかる言葉の意味とSEOへの影響

このページでは「コアウェブバイタル（Core Web Vitals）」の本質的な意味と確認方法、さらにはSEO（検索エンジン最適化）対策への影響についてわかりやすく解説しています。
コアウェブバイタルがSEOに効くと聞きかじり、やっきになって改善に取り組んでいる人もいるかもしれません。しかし、コアウェブバイタルはあくまでユーザー体験を数値化した指標です。目的を誤らないことが、Webサイトの改善、ひいては検索順位の上昇に繋がります。

サイト表示速度の現状を競合と比較してプロが診断！

コアウェブバイタル（Core Web Vitals）とは？言葉の意味と定義

「コアウェブバイタル（Core Web Vitals）」とは、Googleが提唱するWebサイトのユーザー体験を数値化した3つの指標の総称です。ページの読み込み性能を測る「LCP（Largest Contentful Paint）」、ユーザー操作への応答性能を測る「INP（Interaction to Next Paint）」、ページの視覚的な安定性を測る「CLS（Cumulative Layout Shift）」で構成されており、いずれもWebページにアクセスしたユーザーの体験と強い関係性を持っています。

コアウェブバイタルへの注目度が急激に高まったのが、2020年6月。検索順位を決定するランキングシグナルのひとつとしてコアウェブバイタルを採用することをGoogleが発表したのです。2021年6月には正式に「ページエクスペリエンスシグナル」の一部としてランキングシグナルに導入され、2024年現在もGoogleの検索順位に影響を与えています。

ただし、ここでしっかりと理解しておきたいのは、コアウェブバイタルが「SEO（検索エンジン最適化）対策のためのものではない」ということ。繰り返しになりますが、コアウェブバイタルはWebページのユーザー体験を測り、その改善によって、Webサイトの本質的な品質を高めるために利用するものです。

コアウェブバイタルを構成する3つの指標「LCP」「INP」「CLS」

続いてコアウェブバイタルを構成する3つの指標である、LCP、INP、CLSがどのようなものなのかを詳しく見ていきましょう。これらの指標がどのようなユーザー体験を数値化したものかがわかるようになり、監視、改善の重要性を理解しやすくなります。

LCP（Largest Contentful Paint）とは

LCP（Largest Contentful Paint）とは、Webページのメインコンテンツとなりうる、視覚的に最も大きな画像や動画、テキスト要素がブラウザのファーストビューに表示されるまでの時間です。

そのページにおいて重要な意味を持つ要素は「大きく表示されるはずである」「ユーザーの目に触れやすい場所にあるはずである」という分析結果の上に成り立つもので、そのページがユーザーに対してどれだけ速く意味のある情報を提供できるかを示しています。

Googleによる評価では、LCPが2.5秒以下で「良好」、4.0秒以下で「改善が必要」、4.0秒を超えると「不良」となります。

LCPの計測の様子をわかりやすく示したのが下の図です。ページが表示され始めると順番に様々な要素が表示されていき、その時点で最も大きな要素も変化しています。最終的に写真が最も大きな要素であると認識され、その表示が完了するまでの時間がLCPです。

■LCPが計測される様子

緑で示した領域がその時点でのLCPの測定対象。Webページの表示状況に合わせて測定対象は変化する。
出典：Largest Contentful Paint（LCP）

LCP（Largest Contentful Paint）とは？

LCPの意味や計測の対象・方法、改善策を、WebマーケターやSEO担当者に向けてわかりやすく解説しています。
⇒ LCPの意味と改善方法を詳しく見る

INP（Interaction to Next Paint）とは

INP（Interaction to Next Paint）とは、Webページ内にある可変要素（タップすると展開されるメニュー、クリックするとチェックマークが表示されるチェックボックスなど）が、ユーザーの操作を受けてから視覚的に変化をするまでの時間のことです。そのページがユーザーの操作に対してどれだけ速く視覚的に応答できるかを測る指標といえます。

Googleによる評価では、INPが200ミリ秒以下で「良好」、500ミリ秒以下で「改善が必要」、500ミリ秒を超えると「不良」となります。

下の動画はINPがどのようなユーザー体験を表現しているかをわかりやすく示しています。左のアコーディオンメニューはINPが長い例、右はINPが短い例です。左の例ではクリック後にスムーズにコンテンツが展開されないため、ユーザーがメニューを2回クリックしてしまっており、結果として「コンテンツを開いて閉じる」というストレスフルな体験になってしまっています。

■INPが長いことによるユーザー体験の悪化

左の例でユーザーは、「一度目のクリックが認識されていない」と考えており、再度、メニューをクリックしている。実際には一度目のクリックに対する反応が悪かっただけなので、結果的に2回クリックしたことになり、「コンテンツを開いて閉じる」形となった。
出典：Interaction to Next Paint（INP）

INP（Interaction to Next Paint）とは？

INPの意味や計測の対象・方法、改善策を、WebマーケターやSEO担当者に向けてわかりやすく解説しています。
⇒ INPの意味と改善方法を詳しく見る

CLS（Cumulative Layout Shift）とは

「CLS」とは、Webページの読み込み時や操作時に、ユーザーが予期していないタイミングで発生するレイアウト変化（レイアウトシフト）の量をスコア化したものです。Webページの視覚的な安定性を測る指標と言い換えることができ、スコアが低ければ低いほど視覚的に安定しており、ユーザー体験が良いといえます。

Googleによる評価では、CLSが0.1以下で「良好」、0.25以下で「改善が必要」、0.25を超えると「不良」となります。

下の動画はCLSがどのようなユーザー体験を反映したものなのかをわかりやすく表現したものです。商品注文の確定画面のサンプルで、「Yes place my order（注文する）」「No, go back（注文せずに戻る）」ボタンが表示されています。ユーザーは「No, go back」をタップしようとしていました。しかし、広告コンテンツが遅れて読み込まれ、レイアウトが変化したことにより、誤って「Yes place my order」をタップしてしまっています。

ユーザーが予期していないレイアウトの変化は、ユーザー体験を大きく損なう可能性があるのです。

■レイアウトシフトによって発生したユーザーの誤タップ

ユーザーは「No, go back」をタップしようとしていたが、広告が遅れて読み込まれたことによってレイアウトが変化したため、「Yes place my order」をタップしてしまった。
出典：CLS（Cumulative Layout Shift）

CLS（Cumulative Layout Shift）とは？

CLSの意味や計測の対象・方法、改善策を、WebマーケターやSEO担当者に向けてわかりやすく解説しています。
⇒ CLSの意味と改善方法を詳しく見る

コアウェブバイタルを計測するためのツールと使い方

ユーザー体験に大きくかかわるコアウェブバイタル。Webサイト運営に携わっているなら、常にチェックしておきたいところです。そこで、手軽にコアウェブバイタルを計測する方法を3つ紹介します。「PageSpeed Insights」「Google Search Console」「Lighthouse」というもので、いずれもGoogleが提供しており、無料で利用できます。

PageSpeed Insightsの使い方

PageSpeed InsightsはWeb上で提供されているWebページのパフォーマンス診断ツールです。診断・分析したいWebページのURLを入力するだけで、診断結果や改善箇所、さらには改善方法の指針までを提供してくれます。

PageSpeed InsightsにアクセスしてURLを入力する

PageSpeed Insightsにアクセスしたら、ページ上部にあるURLの入力ボックスに診断したいページのURLを入力し、「分析」ボタンをクリックします。

ページ上部にあるURLの入力ボックスにコアウェブバイタルをチェックしたいWebページのURLを入力し、「分析」ボタンをクリックする。
出典：PageSpeed Insights

診断結果が表示される

「分析しています」と表示されたあとに診断結果が表示されます。診断結果は、「実際のユーザーの環境で評価する」「パフォーマンスの問題を診断する」のふたつのブロックに分かれています。それぞれの意味を理解したうえで数値を確認していきましょう。

「実際のユーザーの環境で評価する」を確認する

過去28日間に実際にアクセスしたユーザーに対して、どのようなユーザー体験を提供できたかを確認できます。「Chrome ユーザー エクスペリエンス レポート（CrUX）」という、Google Chromeを用いてアクセスしたユーザーのデータを活用したもので、「フィールドデータ」と呼ばれることもあります。

コアウェブバイタルはユーザー体験を測るもの。PageSpeed Insightsでコアウェブバイタルの数値を確認するときは、「実際のユーザーの環境で評価する」のデータを優先して確認しましょう。

なお、「実際のユーザーの環境で評価する」は複数のユーザーのデータを集約したものであるため、診断結果に表示される数値は75パーセンタイルのものです。この数値を前述したGoogleの評価基準と照らし合わせることで、「良好」「改善が必要」「不良」の評価が行われます。

コアウェブバイタルの各指標の75パーセンタイルの数値が表示される。指標名の前についているアイコンや数値の文字の色が、緑なら「良好」、黄色なら「改善が必要」、赤なら「不良」を示している。グレーは計測データがないか不十分。
出典：PageSpeed Insights

「パフォーマンスの問題を診断する」を確認する

特定環境下でのWebページのパフォーマンスを診断した結果です。「ラボデータ」と表現することもあります。ユーザーが実際に接するWebページのパフォーマンスとは異なるのですが、計測環境にユーザーごと、Webページごとのブレがないため、課題を抽出したり、競合と比較したりする目的で使用します。

なお、「パフォーマンスの問題を診断する」にはユーザーの操作が重要な意味を持つINPの数値は表示されません。

LCPとCLSは右の列に表示されている。「パフォーマンスの問題を診断する」は通信環境が実際よりも悪い状況を想定しており、「実際のユーザーの環境で評価する」の数値よりも悪くなることが多い。
出典：PageSpeed Insights

各指標の数値データの下には「診断」の一覧が表示され、Webページが抱えている課題、改善余地が表示されます。コアウェブバイタルの改善を図る際には、ここに表示された内容を確認し、優先順位をつけて対策を実施することをおすすめします。

実数値やスコアの下には、ファーストビュー表示の流れや検出された課題が表示される。それぞれの課題をクリックするとより詳しい状況や改善の指針を確認することができる。
出典：PageSpeed Insights

Google Search Consoleの使い方

Google Search Consolは、WebサイトがGoogle検索においてどのようなパフォーマンスを示しているかを確認するためのツールです。Webサイト内の各ページが、「どのようなキーワードで何位にランクインしているのか」「検索結果からの流入がどの程度発生しているのか」などがわかります。

Google Search Consoleには「ウェブに関する主な指標」というメニューが用意されており、サイト全体のコアウェブバイタルの状況をチェックすることができます。サイト全体を俯瞰してユーザー体験の課題を把握する目的で使うのがよいでしょう。

Webサイトは、コンテンツのカテゴリごとに異なるテンプレートを使用して構築されているのが一般的です。そしてコアウェブバイタルは多くの場合、テンプレートの仕組みや構造に依存しています。Google Search Consoleを利用すると、サイト全体の状況をひと目で把握できるので、課題を抱えているテンプレートを特定しやすくなるのです。

なお、Google Search Consoleで表示されるコアウェブバイタルの数値は、実際のユーザー環境を基にしたものになっています。

Google Search Consoleの「ウェブに関する主な指標」を開く

Google Search Consoleを開いたら、メニューにある「ウェブに関する主な指標」をクリックします。モバイル、PCそれぞれに、Webサイトのユーザー体験の状況を示すグラフが表示されるので、「レポートを開く」をクリックしましょう

「ウェブに関する主な指標」を開くと、モバイル、PCのデバイス別でユーザー体験の状況をグラフ化したものが表示される。

デバイスごとの詳細なレポートを確認する

「レポートを開く」をクリックすると、Webサイト内で「どのような問題が発生しているのか」「その問題が発生しているURLの数」を確認できます。画面下部にある「良好なURLと判断されなかった理由」の各項目をクリックすると、該当するURLのグループが表示されるので、どのテンプレートを改修すればよいのかがわかります。

ユーザー体験が「良好」なページ、「改善が必要」「不良」なページの量や割合をグラフで確認できる。どのページに改善が必要かを確認したいときは、画面下部の「良好なURLと判断されなかった理由」の各項目をクリックすればよい。

Lighthouseの使い方

LighthouseはGoogle Chromeの拡張機能です。開いているページを起点にコアウェブバイタルの数値を確認できるので非常に便利。診断方法と結果の表示方法を、PageSpeed InsightsとLighthouseの2種類から選べるのですが、実際のユーザー環境での診断結果も確認できるPageSpeed Insightsを選ぶのがおすすめです。

LighthouseをGoogle Chromeに追加する

Lighthouseのページにアクセスして、「Chromeに追加」ボタンをクリック。拡張機能を追加します。

Lighthouseのページにアクセスして拡張機能を追加する。ページへのアクセスは「Chrome ウェブストア」で「Lighthouse」と検索するのが簡単。
出典：Lighthouse

診断結果の表示方法を選んでレポートを確認する

コアウェブバイタルを計測したいページにアクセスして拡張機能Lighthouseを開き、診断結果の表示方法や対象デバイスなどを設定。「Generate report」ボタンを押すと診断結果が表示されます。

「PSI Frontend」を選択するとPageSpeed Insightsで診断結果が表示される。「Lighthouse Viewer」を選ぶとLighthouseで表示。

コアウェブバイタルの数値を改善する方法

PageSpeed InsightsやGoogle Search Consoleなどでコアウェブバイタルの数値を確認して、「良好」な数値でなかった場合、そのWebページはユーザーに理想的な体験を提供できていない可能性があります。ユーザーに快適にWebサイトを利用してもらうための対策を練りましょう。続いてはコアウェブバイタルの数値が悪化する主な要因と代表的な改善策を紹介します。

なお、LCP、INP、CLSそれぞれのより詳しい改善方法は以下のページで紹介しているので、具体的な施策を知りたい人は各ページをチェックしてみてください。

【要因1】Webページに使用されているファイル（リソース）が届くまでが遅い

Webページにアクセスする際には、サーバーからWebページを構成するリソースをダウンロードする必要があります。このときにかかる時間が長いとWebページの表示に時間がかかり、ユーザー体験は悪化します。LCPの数値に強く影響する要因です。サーバーのスペックやサーバーまでの物理的距離、さらにはリソースそのものの容量の大きさに起因するものなので個別に対処しましょう。

【代表的な改善策】

• サーバーのスペックアック、アプリケーション改善
• CDN（Contents Delivery Network）導入
• 次世代画像フォーマットの採用
• HTMLの先読み
• 不要なJavaScript・CSSの削除

【要因2】Webページに使用されているファイル（リソース）の処理が遅い・不適切

Webページに使用されているJavaScriptやCSSの量が多く、複雑になると、その分、ページを表示したり、ユーザーへの応答を返したりするのが遅くなります。LCP、INP、CLSのすべてに影響し、しかも多くのWebサイトが抱えている課題です。不要な処理をできるだけ排除できるよう、不要なJavaScript、CSSは徹底的に削除し、よりシンプルな構成にできないかを検討しましょう。

また、画像や動画の表示サイズがHTMLに記述されていないとCSLが悪化するリスクがあります。基本的なHTMLの記述を見直すことも重要です。

【代表的な改善策】

• 不要なJavaScript、CSSの削除
• JavaScript、CSSの圧縮
• Webフォントを採用しない
• DOMサイズの圧縮
• 画像や動画の表示サイズを設定する

【要因3】Webページに使用されているファイル（リソース）の処理がブロックされている

Webページの表示するための処理の順番が適切でなかったり、ひとつの処理がブラウザを占有してしまったりすると、必要なときに必要な処理が実行されず、ユーザー体験を悪化させます。【要因2】と同様にJavaScriptの存在が起因になっている可能性が高いので、ひとつひとつ見直していきましょう。

【代表的な改善策】

• 不要なJavaScript、CSSの削除
• JavaScript、CSSの圧縮
• JavaScriptの処理優先度の設定

コアウェブバイタルとSEOの関係・影響度

最後にこのページを読んでいる多くの人が気にしている、コアウェブバイタルとSEOの関係についても触れておきましょう。

結論からいうと、2024年10月現在、「コアウェブバイタルは検索順位に影響するものの、その影響度は大きくない」のが事実です。Googleも公式に以下のように言及しています。

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

どんなにコアウェブバイタルを改善してユーザー体験を良くしたとしても、検索意図と関連性が高く、信頼性やわかりやすさの面で品質の高いコンテンツには敵わないのです。さらにいえば、外部からのリンク、サイト内部のリンク設計、フロントエンドのコーディングがGoogleのクローラーに認識されやすいかといった非常の多くのシグナルが、コアウェブバイタルよりも検索順位に大きな影響を与えると考えられています。

SEOという観点だけで考えるのであれば、コアウェブバイタル以上に改善をしなければならない要素が無数にあるのです。

ただし、「同様のコンテンツを含むページが複数ある場合は、ページ エクスペリエンスが検索ランキングで非常に重要になります」とも述べられています。競合するサイトが多く、コンテンツの品質を磨き続けても一向に検索順位が上がらない場合には、コアウェブバイタルの影響を疑ってみるのもいいでしょう。

また、以下のような記述もあります。

優れたページ体験には、コアウェブバイタルのスコアだけでは不十分な点があります。 これらのスコアは、ユーザーのためにサイトを全体的に改善するためのものであり、SEOのためだけに満点を取ろうとするのは、時間を有効に活用できない可能性があります。（訳：Repro）
引用元：Understanding page experience in Google Search results

SEOのためだけにコアウェブバイタルの改善に取り組もうとするのは、あまり有効ではないといっているのです。

コアウェブバイタルはあくまでもユーザー体験を改善するための基礎となる数値です。コアウェブバイタルの数値だけで競合に勝てたとしても、検索順位が上がるわけではありません。もし、ユーザー体験を起点に検索順位の上昇を目指すのであれば、より広い視野でWebサイトを分析すべきです。「検索意図に沿った情報を目立つ場所に配置できているか」「ユーザーに必要なコンテンツへの導線は確保されているか」「ユーザーが求めている商品を販売できているか」といった基本的な要素から見直してみることをおすすめします。

サイト表示速度の現状を競合と比較してプロが診断！