Core Web Vitalsとは？SEOへの影響と対策、改善について解説

皆さん、「Core Web Vitals（コアウェブバイタル）」というキーワードを耳にしたことはありますか。2020年ごろから言及されはじめたキーワードで、2021年9月には検索結果のランキング決定要因として導入が完了しました。つまり、SEOにおいて「Core Web Vitals」は非常に重要なものになります。

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

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

Core Web Vitals（コアウェブバイタル）を説明する前に、まずWeb Vitals（ウェブバイタル）について説明します。

Web Vitals（ウェブバイタル）とは

Web Vitalsとは、Googleが手掛けるWeb上での優れたユーザーエクスペリエンス（UX）の提供に欠かすことができないと思われる重要な指標の統合ガイドを提供することを目的とした取り組みです。

詳しくはこちら：Web Vitals

Core Web Vitals（コアウェブバイタル）とは

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

LCP

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

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

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

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

FID

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

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

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

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

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

CLS

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

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

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

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 サーチコンソールで測定する方法

ではGoogle サーチコンソールで「Core Web Vitals」を測定する方法について解説します。そもそも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の改善が見込める方法から解説していきたいと思います。LCPの改善するには、ページの読み込みを速くする必要があります。対策方法は沢山ありますが、その中でも代表的な対策が以下になります。

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

参照：Largest Contentful Paint を最適化する

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

FIDの最適化

次にFIDの改善が見込める方法を解説していきたいと思います。FIDの改善するには、ページの応答性を上げる必要があります。対策方法は沢山ありますが、その中でも代表的な対策が以下になります。

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

参照：First Input Delay を最適化する

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

CLSの最適化

最後にCLSの改善が見込める方法を解説していきたいと思います。CLSの改善するには、ページレイアウト変動の対策をする必要があります。対策方法は沢山ありますが、その中でも代表的な対策が以下になります。

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

参照：Cumulative Layout Shift を最適化する

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

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

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