2020年5月、検索エンジンのランキング指標に組み込まれると発表された「Core Web Vitals(コアウェブバイタル)」ですが、一体どのようなものなのでしょうか？このページでは「Core Web Vitals」の概要だけでなくCLS・LCP・FIDの計測方法や改善策についてもご紹介します。気になるポイントをここで一挙に確認してしまいましょう。

【動画アーカイブ】30分で簡単理解！「Core Web Vitals(コアウェブバイタル)」の概要

動画を詳しく見るならこちら

「Core Web Vitals(コアウェブバイタル)」とは

「Core Web Vitals」とはユーザーエクスペリエンスを向上させるために必要な要素(「Web Vitals」)の中でも特に重要とされるものを指します。2020年5月にGoogleは「LCP」、「FID」、「CLS」を「Core Web Vitals」に位置付けると発表しており、全てのWebサイトで改善していく必要性を提唱しています。

また「Core Web Vitalsは毎年アップデートしていく予定」と明言されており、「Core Web Vitals」の内訳は常に変化する可能性があります(※)。

※「Core Web Vitals」のアップデートについてはこちらで明言されています
https://developers-jp.googleblog.com/2020/05/web-vitals.html

「Core Web Vitals」 3つの指標

LCP(Largest Contentful Paint)について

LCP(Largest Contentful Paint)とは、あるメインコンテンツの読み込み時間に関する指標です。ページ内のメインコンテンツがダウンロードされてから、ユーザーが操作できるまでにどの程度の時間がかかるのかを表しています。
LCPが良好と判断されるためには、コンテンツが読み込みを始めてから2.5秒以内に表示される必要があります。

画像引用元：Google Developers Japan: Web Vitals の概要: サイトの健全性を示す重要指標

LCPについてさらに詳しくはこちら

FID(First Input Delay)について

FID(First Input Delay)とはユーザーが最初に行ったアクション(URLやボタンクリック)の応答性を測る指標です。
アクションに対する応答性が悪いとユーザーがストレスを感じやすく、UXの低下につながります。
FIDが良好と判断されるためには、ユーザーがクリックやタップをしてから、反応するまでの時間を100ミリ秒以下にしなければいけません。

画像引用元：Google Developers Japan: Web Vitals の概要: サイトの健全性を示す重要指標

FIDについてさらに詳しくはこちら

CLS(Cumulative Layout Shift)とは

CLS(Cumulative Layout Shift)とは表示されるコンテンツの予期せぬレイアウトの“ズレ”を測る指標です。
あるコンテンツを閲覧している際、急に広告や画像など別のコンテンツが表示されるとレイアウトがズレていってしまいます。こうした状況では誤クリックも置きやすく、ユーザーがストレスを感じてしまいかねません。

CLSを良好にするためにはCLSが0.1未満(単位なし)を維持する必要があります。

画像引用元：Google Developers Japan: Web Vitals の概要: サイトの健全性を示す重要指標

CLSについてさらに詳しくはこちら

「Core Web Vitals」が検索ランキングにもたらす影響

引用:Google ウェブマスター向け公式ブログ [JA] :「より快適なウェブの実現に向けたページ エクスペリエンスの評価」

「Core Web Vitals」のランキングへの影響についてはGoogleウェブマスター向け公式ブログで公開されています。UX指標は重要ではあるものの、平均スコアをクリアできないからと言ってすぐに悪影響が出るわけではないようです。
また関連性の高いページ、良質なコンテンツであれば、「Core Web Vitals」の指標における多少のマイナスは影響しません。ただしコンテンツの質が同程度の場合は、UX指標が優れている方がより上位表示される可能性が高くなります。

ちなみに「Core Web Vitals」のランキング要因については、既存の4つのシグナルも含めて判断されます。「Core Web Vitals」の3つの指標とあわせてこちらも意識してみてください。
既存の4つのシグナルについては下記にまとめましたのでご確認ください。

既存の4つのシグナルとは

「Core Web Vitals」の3指標を測定する方法

「Core Web Vitals」の3指標を改善するには、現状分析が欠かせません。計測にはGoogleから提供されているツールを使用するのが一般的です。それぞれのツールについて詳しくみていきましょう。

Google Search Console (Core Web Vitals report)

参考：「Google Search Console」

Google Search Console (Core Web Vitals report)は、Googleが提供する無料解析ツールです。
Google Search Consoleは検索KWの順位やアクセス数など、コンテンツの検索順位を下げる可能性のある問題点を確認できるツールですが、この中で「Core Web Vitals」の指標も確認できます。

URLごとに、「良好」「改善が必要」「不良」の3段階で評価をしてくれます。

PageSpeed Insights(ページスピードインサイト)

参考：「PageSpeed Insights」

「Page Speed Insights」は、あるコンテンツの表示速度の最適化に重点を置いた監査ツールです。調べたいサイトのURLを入力すれば、速度スコアとともに「Core Web Vitals」の数値が表示されます。またモバイル端末やデスクトップの両方のページパフォーマンスに関するレポートを確認できるため非常に便利です。

3.Light House(ライトハウス)

参考：「Light House」

「Light House」とは、Googleから提供されているWebページの品質改善をアシストするツールの一つです。ここでも「Core Web Vitals」の指標をチェックできます。

Google Chromeに搭載されている開発者向けのデバッグツールに位置付けられており、拡張機能だけでなくブラウザのデベロッパーツールからも使用可能です。特別なツールやプログラムを使わずブラウザのみで簡単に確認でき、Webサービスの開発やテスト、デザインチェックの際にも重宝するツールです。

「Core Web Vitals」の3指標を改善する方法

ここでは、「Core Web Vitals」の3指標を改善する方法について解説します。最終的な目標は、「Core Web Vitals」を改善した先にあるUX改善やSEO対策です。

制作したコンテンツがGoogle検索ランキングで上位になるように、先ほど紹介した「Core Web Vitals」を最適化させるための支援ツールを駆使しながら、改善点を模索していきましょう。

LCP(Largest Contentful Paint)の改善方法の一例

LCPを改善する際には、まず「メインコンテンツは何か？」を確認しましょう。これについては「Page Speed Insight(ページスピードインサイト)」を利用することで確認できます。

またLCPでは画像の読み込みが原因でスコアが悪化している場合が多く見られるため、画像の最適化を検討してみるのもおすすめです。

LCPの改善方法についてさらに詳しくはこちら

FID(First Input Delay)の改善方法の一例

FID(First Input Delay)の改善方法は例えば上記4つです。FIDで特に注意が必要なのは「Javascript」の扱いです。Javascriptを実行している間はユーザーの操作を受け付けなくなるため、大量に実行する場合はそれだけ応答時間が長くなってしまう傾向にあります。

CLS(Cumulative Layout Shift)の改善方法の一例

CLS(Cumulative Layout Shift)を改善するための一例として上記4点が挙げられます。
改善にはまずCLSを発生させている主な原因を特定する必要があります。こちらも「Page Speed Insight」で項目を洗い出すことができます。

CLSのスコアを悪化させている主な原因としては、「サイズ指定がない画像や広告」「Java Scriptの動的コンテンツ」などが挙げられます。原因をしっかりと把握し改善策を立てていきましょう。

「Core Web Vitals」の実際の改善事例について

株式会社ipe(アイプ)で行った「Core Web Vitals」の改善施策の中でも特筆すべき実際の事例をご紹介します。
また詳細は公開中のホワイトペーパーに記載されているのでそちらも併せてご覧いただけるとより理解が深まるかと思います。

「Core Web Vitals」のホワイトペーパーダウンロードはこちら

使用していないJavascriptの削除

使用していないJavascriptを削除する前と後では確かな改善効果が現れました。
「Core Web Vitals」改善施策の中でもJavascriptを見直す優先順位はかなり高いと言えるでしょう。

画像の圧縮

画像の圧縮もコアウェブバイタルのスコア改善に大きく貢献しました。今回の事例では次世代型画像フォーマット「webp(ウェッピー)」を使用。画像改善もコアウェブバイタル改善には欠かせない施策と言えそうです。

「Webp(ウェッピー)」について詳しくはこちら

画像サイズ指定

CLS対策の一環として、画像サイズの指定を行いました。CLSスコア改善ではよく登場する施策ではありますが、改修工数を考えるとスコアへの影響は軽微でした。ただ画像サイズの指定はコアウェブバイタル以外への影響も考えられるため、全く意味のない施策というわけではありません。
ケースバイケースで取り入れるかどうか判断するべき施策と言えそうです。

「Core Web Vitals」のホワイトペーパーダウンロードはこちら

「Core Web Vitals」は今後も更新されていく可能性があります

このページでは、「Core Web Vitals」の概要や効果、指標の測定方法、改善方法などについて解説しました。
「Core Web Vitals」は検索順位にも影響を与える重要な指標です。支援ツールを通じて現在のスコアが把握できるので、まずは自社サイトの現状を知るところから始めましょう。

またGoogleから「Core Web Vitalsは毎年アップデートしていく予定」と明言されています(※)。そのため今後も「Core Web Vitals」の改善に取り組んでいくには、最新情報を追っていくことが欠かせません。

もし「Core Web Vitals」を改善するための施策に不安がある場合は、お気軽に株式会社ipe(アイプ)へご相談ください。最新情報を基に、SEOを考慮した最適解をご提示いたします。

資料をご希望の方は、下記フォームよりお申し込みください。
ご登録いただいたメールアドレス宛に、PDF閲覧用のURLが送信されます。
迷惑メールフォルダ等に入っていないかご確認くださいませ。