Core Web Vitals（コアウェブバイタル）とは？SEOへの影響と対策、改善について解説

皆さん、「Core Web Vitals（コアウェブバイタル）」というキーワードを耳にしたことはありますか。Core Web Vitals（コアウェブバイタル）は2020年5月にGoogleの公式の発表の際に使われはじめたキーワードで、ページエクスペリエンスという指標の１つです。ユーザーがWebページ閲覧の体験を快適だと感じる要素はいくつかあり、それらの要素を評価するための指標をページエクスペリエンスと呼びます。

Googleは以前からGoogleの社内調査や業界調査を経て、Core web vitals やその他のページエクスペリエンスの指標であるモバイルフレンドリーやHTTPSセキュリティ、インタースティシャル広告の非表示はユーザーが気持ちよくWebページを閲覧できるようにするための要素であることを認識していました。その結果、Googleは2021年9月、2022年2月の計2回でページエクスペリエンスアップデートを行い、Core web vitalsを検索結果のランキング決定要因として導入しました。つまり、それほど「Core Web Vitals」はSEOにおいて重要なものということです。

本記事は、「Core Web Vitals」を知らない方、SEO初心者から中級者の方、運営しているサイトと類似しているサイトが多くある中で、検索結果の上位表示を目指している方向けに解説していきたいと思います。

また、Core Web Vitals、LCP、FID、CLSの概要、数値の改善についてわかりやすく解説している資料を下記バナーからダウンロードできます。
～Core Web Vitals 入門書を配布中～

Core Web Vitals（コアウェブバイタル）について

Core Web Vitals（コアウェブバイタル）とは、Web上のユーザー体験（UX）をより優れたものにするためにGoogleが提唱しているWeb Vitalsという指標群の中で、特に重要と考えている指標群のことを指します。2022年1月時点では、LCP（読み込み時間）、FID（インタラクティブ性）、CLS（ページ コンテンツの視覚的な安定性）の3つの測定可能な指標を土台としています。
また、Core Web Vitalsを構成する指標は時間とともに進化していくため、新たな指標等は今後定期的にアップデートしていくことが予定されています。

LCP（Largest Contentful Paint）：読み込み時間

LCP（Largest Contentful Paint）とは「Webブラウザの『主要な部分』の読み込み時間」を示す指標のことです。ただし全てのコンテンツが表示されるまでの時間を計測するものではなく、一番大きなコンテンツ（画像や文章）を表示する時間を計測します。ページ上どの要素が一番大きいと見なされるかはPageSpeed Insightsで確認できます。

あるページにアクセスする際、読み込み速度が速い方がストレスがないですよね。
逆に、読み込み速度が遅いとページ離脱率が上がってしまう可能性もあるます。

そのため、Webブラウザに表示する速度が求められているわけです。
基準として、2.5秒未満を「良好」としています。

LCPについて詳しく知りたい方ははこちら：LCPの改善方法をわかりやすく解説

FID（First Input Delay）：インタラクティブ性

FID（First Input Delay）とはユーザーが最初に入力をした際に、ブラウザが入力の処理を開始するまでの遅延時間」を示す指標のことです。入力とはここではリンクをクリックしたり、ボタンをタップしたりすることを指しています。

例えば、トップページを開いたときに、すぐにボタンを押して次のページを開こうとします。しかし、トップページを開いたばかりでブラウザは読み込みのタスクを実行中のため、ボタンを押してもすぐにページを開く処理を開始できません。このように、ユーザーが最初に入力をしてから、ブラウザがその処理を開始するまでの遅延時間をFID（First Input Delay）と呼びます。

皆様も目的のページを開くために急いで操作を使用とした際、Webページ読み込みのため、何の反応もされずにイライラした経験があるかと思います。ページのリアクションが速くスラスラ反応してくれるサイトの方が気持ちいいですよね。

そのため、FID（First Input Delay）が求められているわけです。基準として0.1秒未満を「良好」としています。

FIDについて詳しく知りたい方ははこちら：FIDとは？低下要因と改善方法をわかりやすく解説

CLS（Cumulative Layout Shift）：ページコンテンツの視覚的な安定性

CLS（Cumulative Layout Shift）とはページコンテンツの視覚的な安定性を示す指標です。ページコンテンツの視覚的な安定性とはページ読み込み時の予期しないレイアウト変動が発生しないことを意味しています。つまり、CLSはページ読み込み中にレイアウトが予期せずどの程度移動したか、および影響を受けた要素の移動量を示す指標です。

例えば、あるページにアクセスした際に、読み込み中に画像やボタンの表示位置が予期せず変わることがあります。この時、ボタンをクリックしようとすると違うボタンをクリックしてしまった経験はありませんか。このようなことがあるとユーザーからすれば、煩わしいと思います。

そのため、ページの視覚的な安定性が求められるわけです。基準として0.1未満を「良好」としています。

CLSについて詳しく知りたい方ははこちら：CLSとは？低下要因と改善方法をわかりやすく解説

Core Web Vitals 以外の重要な指標

Core Web Vitals 以外にもGoogleが提唱しているWeb上のユーザー体験を高める指標は3つあります。以前は4つの指標が挙げられていましたが、2021年8月以前はセーフブラウジングもページエクスペリエンスの要素に含まれていましたが、ページエクスペリエンスアップデートにより、セーフブラウジングは検索結果のランキング要因にも含まれなくなりました。

モバイルフレンドリー

モバイルフレンドリーとは「Webサイトがスマートフォン対応である」とのことで、ページエクスペリエンスの要素の中のモバイルフレンドリーは「Webサイトがスマートフォン対応であるかどうか」を示す指標です。

モバイルフレンドリーについて詳しく知りたい方はこちら

HTTPSセキュリティ

HTTPSセキュリティは「サイトの通信が安全かどうか」を示す指標です。
URLの始まりをみると「https://」または「http://」と記載があります。これはどの通信手段を用いるのかを表しております。「https://」だと通信内容が暗号化されており、「http://」だとと暗号化しないで通信しています。「http://」から「https://」にする移行することをSSL化と言います。

煩わしいインタースティシャルの非表示

「煩わしいインタースティシャルの非表示」とは、このインタースティシャル広告の表示があるかないかという指標です。そもそもインタースティシャルとはWebサイトを表示した直後などに、コンテンツの一部を隠したり覆ったりするようにして表示される広告のことを指します。インタースティシャル広告はメインコンテンツよりも手前に位置するように表示されるため、ユーザーの視認性は高いですが、過度な表示をしてしまうとかえってユーザビリティを妨げる可能性があります。

Core Web Vitalsが検索順位に与える影響

2021年6月中旬～9月にかけて「Core Web Vitals」はページエクスペリエンスのシグナルとして検索結果のランキング決定要因に加わりました。（ページエクスペリエンスアップデートと呼ばれている。）そのため、現状「Core Web Vitals」は検索結果の順位に影響を及ぼすシグナルの一つとなっています。

その影響の大きさについてGoogleは、Googleウェブマスター向け公式ブログで以下のように記載しています。

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

つまり、現段階では「Core Web Vitals」よりも「総合的に優れた情報を含むページ」の方がランキング決定への影響度は大きいということになります。しかし、高品質なコンテンツが複数ある場合は「Core Web Vitals」がランキング決定に作用してくる可能性もありますので、事前に理解した上で、「Core Web Vitals」と「コンテンツ」の両方を改善していくのが良いでしょう。

Core Web Vitalsの測定方法

「Core Web Vitals」の重要性やSEOとの関連性はご理解頂いたかと思います。
そうなると次に、自分たちが運営しているサイトの「Core Web Vitals」の評価が気になってくると思います。

ここからは自身のサイトの「Core Web Vitals」の評価を知る方法について解説していきます。方法としては次のような種類があり、ツールやChromeの拡張機能を利用することで確認ができます。

• Google サーチコンソール
• PageSpeed Insights
• Chrome Devtools
• Web　Vitals
• Lighthouse

どれも無料で使え、測定方法は難しくないですが、上記の中のGoogle サーチコンソールとPageSpeed Insightsで「Core Web Vitals」を確認する方法を解説します。

Google サーチコンソールで Core Web Vitals の数値が良くないページを特定する方法

ではGoogle サーチコンソールで「Core Web Vitals」の数値が良くないWebページを特定する方法について解説します。そもそもGoogle サーチコンソールの使い方がわからない方は、下記の記事で解説しています。

まず、サーチコンソールを開くと左側のメニューに「ウェブに関する主な指標」という項目をクリックします。そうするとモバイルとPCの両デバイスのデータが表示されます。それぞれ「不良のURL」　「改善が必要なURL」 「良好URL」 が何件あるか確認することができます。

「LCP」「FID」「CLS」がどれも「GOOD」の基準を超えていれば、「良好」と表示されます。一方、「LCP」「FID」「CLS」どれか一つでも「GOOD」の基準を超えていなかったら、「改善が必要」や「不良」がされます。

確認する場合は、右上の赤枠部分にある「レポートを開く」をクリックします。

クリックすると下のような画面が表示されます。

そうすると画面下の詳細で「LCP」「FID」「CLS」のどれが基準を満たしていないが確認することができます。詳細の中の項目をクリックすると、問題のあるページを確認することもできます。

PageSpeed Insightsで測定する方法

では次に、PageSpeed Insightsで「Core Web Vitals」を測定する方法について解説します。

まず、PageSpeed Insightsを開きます。

測定したいページのURLを入力すると、下のように結果が表示されます。

「LCP」「FID」「CLS」の結果だけでなく、「改善できる項目」が表示されるので、課題を確認して改善方法を検討しましょう。

Core Web Vitalsの改善・対策

まず、大前提として先ほど解説した通り「Core Web Vitals」を改善したからといって必ず順位が良くなるわけではありません。基本的に「Core Web Vitals」を構成する各指標はすべて重要ですが、例え一部の要素が平均以下であったとしても、総合的に高品質なコンテンツを含むページが優先されます。

その上で自身が運営しているサイトのコンテンツの質が競合と似ている場合などは、ページエクスペリエンスの要素が非常に重要となってきますので、ぜひ対策していきましょう。

それでは「 LCP」「FID」「CLS」の改善が見込める方法をそれぞれ解説していきたいと思います。

LCPを改善するには

LCPを改善するには、ページの読み込みを速くする必要があります。対策は沢山ありますが、その中でも代表的な対策が以下になります。

原因	対策
サーバーの応答速度の低下	サーバーサイドのコードを効率化する
	ユーザーを近くの CDN にルーティングする
	キャッシュを設定する
JavaScriptおよびCSSのレンダリングブロック	JavaScriptおよびCSSの不要部分を削除
	JavaScriptおよびCSSのファイルやコードの圧縮
リソースの読み込み時間の遅延	画像を圧縮して最適化する
	画像をより新しい形式 (JPEG 2000、JPEG XR、WebP) に変換する
	レスポンシブ画像を使用する
クライアント側のレンダリング	可能な限りサーバー側での処理に切り替える
	JavaScriptファイルの圧縮、遅延読み込み

しかし、LCPの改善は専門的な内容が多く、実装が難しい施策がほとんどです。
そのため、比較的行いやすいLCP改善方法を下記ページでご紹介します。
わかりやすいLCP改善方法はこちら：LCPの改善方法をわかりやすく解説

FIDを改善するには

FIDを改善するには、ページの応答性を上げる必要があります。対策は沢山ありますが、その中でも代表的な対策が以下になります。

原因	対策
JavaScriptの実行量が重い	時間がかかるコードを非同期タスクへと分割する
	JavaScriptファイルの遅延読み込み
	JavaScriptの代わりにWeb Worker を使用し、実行時間を削減

FIDの主な低下要因は「JavaScriptの実行量が重い」だけのため、LCPと比べ改善がしやすいと思う方が多いかもしれません。しかし、実際はJavaScriptの実行量を減らす方法はいくつもあるものの、場合によっては実装が難しい施策もあり、どの施策をすればいいのかわからなくなる方も多いです。
そんな方のために、下記ページではオススメのFID改善方法をいくつかご紹介しています。
わかりやすいFID改善方法はこちら：FIDとは？低下要因と改善方法をわかりやすく解説

CLSを改善するには

CLSを改善するには、ページレイアウト変動の対策をする必要があります。対策は沢山ありますが、その中でも代表的な対策が以下になります。

原因	対策
画像サイズが指定されていない	画像サイズの指定　（width、heightで指定する）
サイズが指定されていない広告、埋め込み要素、iframe	広告スロットのスペースを静的に確保する
動的に挿入されたコンテンツ	コンテンツのスペースを静的に確保する

そもそも、なぜレイアウトが予期せず移動する現象が起きてしまうかというと、リソース（CSSやJavaScriptファイル、画像など）が非同期的に読み込まれたり、動的に追加されたりすると起きます。そのリソースがCLSの低下要因になっています。
そのため、上記の表の改善方法を試してみると良いでしょう。
また、難しい改善方法もあり、どの施策をすればいいのかわからなくなる方も多いです。
そんな方のために、下記ページではオススメのCLS改善方法をいくつかご紹介しています。
わかりやすいFID改善方法はこちら：CLSとは？低下要因と改善方法をわかりやすく解説

焦らずに、ユーザーファーストでコンテンツを制作しよう

何度も言いますが、「Core Web Vitals」を改善したからといって必ず順位が良くなるわけではありません。改善手法も、一般的なSEOの施策と比べて専門的な知識を要します。

そのため、サイトを運営・改善をする施策としてコンテンツと比べると優先順位は低いです。しかし、ユーザー視点で見れば、読み込み速度や応答速度は速い方がいいですし、レイアウトの変動は少ないに越したことはありません。サイトの運営者は、これまでと同様に「コンテンツの質」を重視しつつも「Core Web Vitals」の要素をしっかり理解して、ユーザーにとって見やすく使いやすいサイト作りをしていきましょう。

～Core Web Vitals 入門書を配布中～