Core Web Vitals（コアウェブバイタル）とは？各指標・対策方法について

※編集部注：2024年4月5日に最新情報に更新しました

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

そして、Core Web Vitalsは2024年現在、検索ランキングの要因に加わることになっています。SEO対策に関わる方は必ず理解し対策を打っておきましょう。

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

Core Web Vitalsとは

Core Web Vitalsとは、Web Vitalsを数値化するための、特に重要な３つをまとめたものです。 今後これら指標が検索結果を左右する指標になっていくことになっています。

それではそれぞれの具体的な指標について紹介します。

LCP（Largest Contentful Paint)

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

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

出典：web dev

FID（First Input Delay)

FIDとは、ユーザーがページ内で最初に行ったアクションに対して、ブラウザが反応するまでに要した時間を意味します。 そのため値は小さければ小さいほど高い評価を受けます。数値はミリ秒で計測され、100ミリ秒未満で反応することが理想的とされています。

具体的には、ユーザーがページで行う最初の動作としては、クリックやタップ、キーを押す動作などがあります。スクロールやズームはアニメーションとしてカウントされるので、FIDの評価には含まれません。

出典：web dev

CLS（Cumulative Layout Shift)

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

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

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

出典：web dev

ランキング要因としてのCore Web Vitalsとは

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

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

モバイルフレンドリー

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

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

セーフブラウジング

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

HTTPS

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

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

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

これらの指標にCore Web Vitalsが組み合わされるのは、2021年5月との発表がされています。

出典：Google dev

これに向けて上記4つの指標＋Core Web Vitals（LCP・FID・CLS）、それぞれに対して対策が必要です。

では実際にどのように対策を行えばよいのでしょうか？

ここからは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／FID／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（赤）→遅い

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

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

新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

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

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

AMPに与える影響

Core Web Vitalsが導入されると、トップニュース掲載要件からAMPページが外れるといわれています。代わって、トップニュースのランキング要因にCore Web Vitalsを満たしているか、が基準に入ってきます。 AMPとは、GoogleとTwitterが共同で開発した、『ページを高速で表示するためのシステム』 です。

トップニュース掲載要件からAMPページが外れるため、AMP対応のページは意味をなさなくなってしまうのではないかと不安になってしまうかもしれないですが、決してそんなことはありません。

AMPに対応しているページは基本的にWeb Vitalsの指標を満たしています。むしろ、AMPに対応することによって、web vitalsに対応していくこともありえます。

まとめ

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

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

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