Googleが提唱する「Core Web Vitals」とは？SEOで重要な3つの指標を分かりやすく解説！

WebサイトにおけるUX改善を目的に導入された評価指標「Core Web Vitals（コアウェブバイタル）」について紹介します！
Googleは、WebサイトのUX向上を目的に「Web Vitals」という様々なユーザー体験の指標を包含する概念を導入しており、その中でも重要な指標の一つ「Core Web Vitals」が2021年6月から運用開始されています。Googleが提唱しているだけに、少なからず検索順位にも影響があると思われます。この記事では、「Core Web Vitals」の概要や計測方法について解説していきます！

# Core Web Vitals（コアウェブバイタル）とは？
Core Web Vitals（コアウェブバイタル）とは、Googleが提唱するWebサイトのユーザー体験を数値化した指標の総称で、UXの改善を目的としています。ユーザー視点で使いやすいかどうかを示す指標のため、高いスコアを維持できれば、ユーザーに最適化されたサイトとして検索順位にも影響する可能性があります。Core Web Vitalsは、Googleが2020年に発表し、2021年6月からスマホ版の検索結果から段階的に導入され、2022年2月からはPC版にも導入されています。

UXについては、以下の記事をご覧ください。
[いまさら聞けないUXのキホン](https://iret.media/69067)


# Core Web Vitalsの3つの指標
Core Web Vitalsには、WebサイトにおけるUXを数値化した以下の3つの指標で構成されています。
INPは、2024年3月からFIDに置き換わり新たに採用されている指標です。
・LCP（Largest Contentful Paint）
・INP（Interaction to Next Paint）
・CLS（Cumulative Layout Shift）

## LCP（Largest Contentful Paint ）
**Webページの読み込み速度に関する指標**

![good-lcp-values.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702453/5b4e8d0a-bbd7-eaa0-ff4a-849e0d441ebf.png)
出典：[web.dev](https://web.dev/articles/lcp?hl=ja)

LCPは、ページ内のメインコンテンツ（画像や動画など）が表示されるまでの時間を評価する指標です。Webページの読み込みが遅いと、ユーザーがストレスを感じてやすくなってしまうため、コンテンツが素早く表示されるようにして訪問ユーザーにストレスを与えないことが大切です。Googleによる評価では、LCPが2.5秒以下を「良好」、4.0秒以下を「改善が必要」、4.0秒を超えると「不良」としています。

## INP（Interaction to Next Paint）
**Webページの応答速度に関する指標**

![inp-desktop-v2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702453/29f96d68-56f6-ff08-5f98-4153b502c641.png)
出典：[web.dev](https://web.dev/articles/inp?hl=ja)

INPは、アクション（クリックやタップなど）を行った際の応答速度を評価する指標で、2024年3月からFID（First Input Delay）に代わって新たに採用されています。Webページにおいてユーザーがクリックやタップなどの操作をしてから、視覚的に変化するまでの時間がどれだけ早いかを評価します。クリックやタップをしても反応がなかったり、応答までに時間がかかってしまうと、ユーザーはストレスを感じてしまうため、値が小さいほどUXが良いとされます。Googleによる評価では、INPが200ミリ秒以下を「良好」、500ミリ秒以下を「改善が必要」、500ミリ秒を超えると「不良」となります。

### INPとFIDの違い
INPとFIDは、いずれもWebページの応答速度を評価する指標ですが、測定方法に大きな違いがあります。FIDは初回のインタラクションしか測定しないのに対し、INPはページ滞在中のすべてのインタラクションに対する反応速度を測ります。

## CLS（Cumulative Layout Shift）
**Webページ読み込み中のレイアウトのズレに関する指標**

![good-cls-values.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702453/df4397f4-8ebc-a22c-9a53-6a42027f6341.png)
出典：[web.dev](https://web.dev/articles/cls?hl=ja)

CLSは、Webページ読み込み中に発生するレイアウトのズレや崩れを評価する指標です。Webページ閲覧時に広告が遅れて表示され誤ってクリックしてしまったなど、ページ内での操作時に予期しない動きにより誤操作が起こることでUXの低下につながり、SEO観点でもマイナスにしかなりません。スコアが低ければ低いほど視覚的に安定していてUXが良いとされています。Googleによる評価では、CLSが0.1以下を「良好」、0.25以下を「改善が必要」、0.25を超えると「不良」となります。

# Core Web Vitalsの計測方法
Core Web Vitalsの各指標は、ツールを利用することで簡単に確認することができます。以下の3つのツールは、Googleが提供する代表的なもので、無料で利用することができます。
・Google Search Console
・PageSpeed Insights
・Lighthouse

## Google Search Console
[Google Search Console](https://search.google.com/search-console/about?hl=ja)
Google Search Consoleは、Googleが無料で提供しているGoogle検索における検索順位を監視・管理するためのツールです。「ウェブに関する主な指標」から、モバイル／PCそれぞれのCore Web Vitalsの基準を満たしていないページの傾向やエラーのあるURLをチェックすることができます。

## PageSpeed Insights
[PageSpeed Insights](https://pagespeed.web.dev/)
PageSpeed Insightsは、Google社が提供するWebサイトの表示速度を計測できるツールで、モバイル、PCそれぞれのパフォーマンスを確認することができます。計測したいWebページのURLを入力するだけで、ページ全体のスコアとLCP・FID・CLSの3つのスコアが表示されます。さらには、改善箇所、改善方針までも提供してくれます。Google Search Consoleと比較して、サイト全体だけでなく、1ページごとの調査に向いています。

## Lighthouse
[Lighthouse](https://chromewebstore.google.com/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=ja)
Lighthouseは、閲覧しているWebページのCore Web Vitalsをかんたんに確認できるGoogle Chromeの拡張機能です。診断方法をPageSpeed InsightsとLighthouse Viewerの2つから選ぶことができ、診断結果のレポートを作成してくれます。サイトのパフォーマンスやアクセシビリティなどを基準にユーザー利用時の状況を評価するだけでなく、改善点についての解説も提供されます。"

# まとめ
Core Web Vitalsは、UX改善やSEO対策において重要な指標ですが、Core Web Vitalsだけを改善するのではなく、よりよいUXのWebサイトとするために内容やユーザビリティなども考慮してサイト構築、改善することが大切です。