コアウェブバイタルについて分かりやすく解説！各指標や対策方法について

Googleは、Webページのユーザー体験（UX）の向上を目指して、Web Vitalsという概念を導入しています。Web Vitalsとは様々なユーザー体験の指標を包含する概念です。

そして、その中でも特に重要なCore Web Vitalsは2024年3月から新たな指標に変更されており、SEO対策に関わる方は必ず理解しておきたいところです。

また、UXと合わせてコンテンツの品質もチェックしておきたいという方はこちらのチェックシートもご活用ください！

Core Web Vitalsとは

Core Web Vitalsは、Web Vitalsの中で特にユーザー体験に直結する重要な指標として位置づけられており、以下の3つで構成されています。

• LCP（Largest Contentful Paint)
• INP（Interaction to Next Paint）
• CLS（Cumulative Layout Shift)

それぞれの具体的な説明や、改善するための方法について詳しく解説します。

LCP（Largest Contentful Paint)

LCPとは、ページ内のメインコンテンツ(最も大きなコンテンツ)が読み込まれるまでの時間を意味します。そのため値が小さければ小さいほど良い評価を受けます。数値は秒で計測され、2.5秒以内に読み込まれることが理想とされています。

何をメインコンテンツとするかは、ユーザーと運営者に依存するところがあるので、はっきりこのコンテンツがメインコンテンツだと定義することは難しいというのが実際のところです。いくつか例を挙げると、ページ内でメインとなる画像または動画、記事コンテンツであれば、見出しがLCPの対象コンテンツになると考えられています。

出典：web dev

INP（Interaction to Next Paint）

INPは、2024年3月にFIDに代わって新設された指標で、ユーザーがページでインタラクション（例えば、クリックやタップなど）を行った際、その操作に対するブラウザの応答速度を測定する指標です。そのため値が小さい（応答時間が短い）ほど、ユーザーにとっての体験が良好であることを示します。

• 良好なINP：200ミリ秒以下
• 改善が必要なINP：200～500ミリ秒
• 不良なINP：500ミリ秒以上

具体的には、ページが読み込まれた後、ユーザーが行うすべてのインタラクションを追跡し、各インタラクションに対する応答時間を測定します。そしてページ全体で最も遅かったインタラクションの応答時間がINPの数値となります。これによって、全体のパフォーマンスが一定レベル以上であるか否かを判定しています。

出典：web dev

CLS（Cumulative Layout Shift)

CLSは意図せぬレイアウトの“ズレ”がどれぐらい発生したかを表す指標です。 表示されたページ内で、ユーザーが意図せず発生したズレに対して、その影響範囲の大きさと最大移動距離から独自のレイアウトスコアを算出しています。 そのため値は小さければ小さいほうが高い評価を受けます。数値はスコアで表され、0.1未満が理想的とされています。

サイズ指定されていない画像の下にテキストがレイアウトされているような場合などは問題になる場合があります。ブラウザはテキストの方が軽いためテキストから読み込みを始め、レイアウトにズレが起きることもあるようです。これにより、ページが表示されたら、画像や広告が少し遅れて表示され、本文が下にずれるなどが起こります。

このような事例をGoogleのAddy OsmaniさんがTwitterで動画にして紹介してくれています。

出典：web dev

2024年3月からの新指標INP（旧 FID）

以前まで使用されていたFID（First Input Delay）は、2020年5月にGoogleがCore Web Vitalsの一部として導入しました。ユーザーが最初に操作した際の応答速度を評価するもので、初期のユーザー体験を重視していました。

しかし、FIDは最初のインタラクションのみに限定されており、ページ全体のユーザー操作体験を十分に評価できないという制約がありました。

これに対し、INP（Interaction to Next Paint）は、ページ全体のインタラクションの応答速度を測定し、ユーザーがページを利用している間の全体的なスムーズさを評価しています。

INPは最も遅い操作の応答時間を重視しているため、より包括的なユーザー体験の評価を可能にします。これにより、Googleはユーザー体験をより正確に評価し、向上させることを目指しています。

SEOへの影響はどれくらい？

結論、Core Web VitalsはSEOにおいてランキング要因ではあるものの、検索順位に対する影響力はそれほど大きくありません。したがって、Core Web Vitalsの改善だけに固執するよりも、コンテンツの質やキーワードの最適化など、他の重要なSEO要因にもバランスよく取り組むことが重要です。

ただし、場合によっては優先度高く取り組む必要性があります。いくつか例を挙げますので、以下のような場合は改善を検討してください。

• 実際にPCやスマホで操作したときの体感速度が遅い
• 新しいデザインや機能を導入した

最も分かりやすいのが、実際にPCやスマホで操作したときに体感速度が遅い場合です。おそらくあなたも、見たいページがなかなか開けず離脱した経験があると思いますが、ユーザーが遅延を感じることでサイトから離脱する可能性が高まります。その他、新しいデザインや機能を導入した際も、パフォーマンスが悪化する恐れがあるので注意が必要です。

Core Web Vitalsの改善は、ユーザー体験の向上という観点で意識しつつ、総合的なSEO対策を進めていきましょう。

Core Web Vitals最適化ツールとその使い方

Core Web Vitalsに対する理解が深まったところで、まずはサイトの現状を確認しましょう。 Googleはすでに、Core Web Vitalsを分析するためのツールをいくつか発表しています。下記がそれらに該当します。

ここからは、上記ツールの使い方をご紹介します。

Google Search Console

GoogleがCore Web Vitalsの最適化支援ツールと謳っているのがGoogle Search Consoleです。

サイト全体の中で、改善のあるページが分かり、その詳細も見ることができます。

Google Search Consoleにログインし、メニューの「webに関する指標」からCore Web Vitalsの状況を確認することができます。

LCP／INP／CLSの3指標に対し、「良好」「改善が必要」「不良」の3段階で判定結果が表示されます。PC版とモバイル版、それぞれ個別に確認しておきましょう。

PageSpeed Insights

PageSpeed Insightは、入力したURLのWebページのページ表示速度が速いのか？遅いのか？を判定し、「0～100」で表示できるようになっています。

Google Search Consoleと比較して、サイト全体ではなく1ページに対して深く調査をするときに向いています。

PageSpeed Inight：PageSpeed Insights (google.com)

対象ページのURLを入れると、下記のようにスコアが表示されます。

表示スコアは
スコア：90～100（緑）→速い
スコア：50～89（オレンジ）→平均
スコア：0～49（赤）→遅い

と色で分かりやすく表示されています。

合計スコアの点数が低いと心配になるかと思いますが、100点を出せることは全くと言っていいほどないため、合計スコアよりも各改善項目を重視しましょう。

そして上記のように出てくる「改善できる項目」を参考に修正をしましょう。

新PageSpeed Insightの使い方詳細もぜひご覧ください。

Lighthouse

LighthouseはWebアプリを監査するためのツールです。もともとGoogleが公式で運営していたツールであり、GoogleChromeの拡張機能を使って使用します。

Google Search ConsoleやPageSpeed Insightに比べると、調査したいページをその場で簡単に見ることができるのが強みです。

下記URLからGoogle Chromeの拡張機能をインストールすることで使用が可能となります。

Lighthouseのダウンロード：Lighthouse – Chrome ウェブストア (google.com)

Lighthouse内でParfomaceとして表示されるのが、ページの読み込みや、ユーザーの操作によって生じるレスポンスの速さなど、サイト内のスピードに関する評価です。

こちらも改善項目についての解説が表示されるため、それを基に修正を行いましょう。

Lighthouseの使い方詳細もぜひご覧ください。

Core Web Vitals Chrome拡張機能

今見ているページの Core Web Vitals を測定する Chrome 拡張機能となっております。

Lighthouseと同じように、調査したいページをその場で簡単に見ることができるのが強みです。

注意点としては、各自が使用している場所での指標を表示するため、フィールドデータとは異なる可能性があります。

Web vitals拡張機能：Web Vitals – Chrome ウェブストア (google.com)

上記から拡張機能をインストールし、お使いいただけます。

CoreWeb Vitals改善方法

基本的には上記のツールで示される改善方法に従うのがおすすめです。

今回は中でもCoreWeb Vitals向上に効果的な方法をいくつかご紹介します。

画像フォーマットの変更

画像を最適化することでファイルの容量が抑えられ、表示速度を改善することができます。これは上記で紹介したCLSの向上につながります。

画像フォーマットには有名なものでいえば、PNG、JPEG、GIFなどがあります。しかし、これらのファイルはファイルサイズが重くなってしまうことから、多くの画像を使用しているサイトでは表示スピードが落ちてしまうこともあります。

そこでおすすめなのが、「WebP」という画像フォーマットです。「WebP」とは2010年にGoogleが発表した画像フォーマットで、特徴は以下の二つです。

現在ではほとんどのブラウザで対応しており、Googleも推奨しているフォーマットです。

画像をWebpに変換する場合

画像をWebPに変換する方法としては、ツールを利用した変換があります。

中でもSquooshは、Google Chrome Labsが開発している画像圧縮サービスです。

ここに画像をアップ、もしくはドロップすることで変換が開始されます。その後は変換後の画質が悪くなっていないかを確認しながら、圧縮率を調整すれば完成です。

アップ済みの画像を一括でWebpに変換する場合

既にサイトにある画像を一括でWebPに変換することも可能です。

こちらはWordPressのプラグインである「WebP Converter for Media」を利用しましょう。

下記の手順で変換が完了します。

①「設定」>「WebP Converter」を選択し、設定画面を開きます。

②各種設定をします。下記項目にチェックを入れたら「Save Changes」を押して、設定を保存します。

　・Image loading mode：画像を読み込む方法を設定。

　　→推奨の「via .htaccess (recommended)」を選択。

　・List of supported files extensions：変換する画像のフォーマットを選択。

　・List of supported directories：変換対象のディレクトリを選択。

　　→「/uploads」に加え、「/themes」にもチェックを入れておくと良い。

③「Regenerate All」を押して、100%になったら完了です。

参考：WordPressサイトの画像をWebPに変換・対応できるプラグイン

上記の方法を使ってWebPなどをはじめとした画像フォーマットを最適化し、ページスピードを改善しましょう。

リソースを圧縮する

リソースとは具体的には、「HTML・JavaScript・CSS」などのソースを指します。

HTML、JavaScriptやCSSのコードに含まれる、余分な改行やコメントアウトなどを削除することでファイルサイズが軽くなり、表示速度を改善することができます。
リソースの圧縮により、LCPの改善につながります。

以下のような自動圧縮ツールを活用すると、より効率的に圧縮ができます。

html-minifierCSS Minifier

すべてを手動で書き換えるとなると膨大な時間がかかってしまうため、ツールの利用をおすすめします。

改善方法の詳細は、ページスピードの改善方法とその結果をご覧ください。

ランキングに影響する！さらに4つのWeb Vitalsについて

Googleは検索ランキングの要因は、さきほどのCore Web Vitalsに加えて、既存の指標との組み合わせで決まるとされています。

この機会に、既存の4つの指標について振り返りましょう。

モバイルフレンドリー

ページがモバイルフレンドリーかどうかが指標の一つです。ページがモバイルフレンドリーかどうかはモバイルフレンドリーテストで確かめることができます。

モバイルフレンドリーについての詳しい情報はこちらの記事まで

セーフブラウジング

悪意のあるコンテンツなどが存在しないこと、安全にページを閲覧できるかどうかが指標の一つです。ページが安全な状態かどうかは[セキュリティの問題] レポートから確認することができます。

HTTPS

HTTPSでページが保護されているかどうかが一つの指標となります。こちらが実施できていない場合、「HTTPSでサイトを保護する」から設定頂けます。

邪魔なインタースティシャルがない

ページ内のコンテンツがユーザーにとってアクセスしやすいものになっているかどうかが指標の一つとなっています。より詳細に知りたい場合はこちらのページをご覧ください。

Core Web Vitals（LCP・INP・CLS）と上記4つの指標、それぞれに対して対策を行いましょう。

まとめ

今回のCore Web Vitalsが検索順位に影響する指標になるというニュースを聞き、どういったものかを調べ、対策を行うことはもちろん重要なことです。

しかし、上位表示を目指す上で最も重要なのは、あくまでもユーザーにとって優れたコンテンツであること、ユーザーにとって役に立つコンテンツであることです。

技術的な面にとらわれてしまい、コンテンツの中身自体がおろそかにならないように気を付けましょう。