【動画付】「Core Web Vitals(コアウェブバイタル)」とは?LCP・CLS・FIDのSEOへの影響や対策・改善・計測方法を解説

【動画付】「Core Web Vitals(コアウェブバイタル)」とは?LCP・CLS・FIDのSEOへの影響や対策・改善・計測方法を解説

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

「Web Vitals(ウェブバイタルズ)」とは、Googleが定めたUX(ユーザーエクスペリエンス)改善につながる共通指標です。

Googleは検索結果のUX向上を目標にしていますが、その方向性が定まっていなければそれぞれのサイトによってUX改善の仕方は変わってしまうでしょう。こうした状況を受け、多くのサイトが抱える問題の中から共通する課題をGoogleが位置付け「Web Vitals」として提唱しているのです。

「Core Web Vitals」 3つの指標

概要
LCP(Largest Contentful Paint) メインコンテンツの読み込み時間に関する指標
FID(First Input Delay) 最初の入力を実行できるようになるまでの時間に関する指標
CLS(Cumulative Layout Shift) コンテンツの視覚的な安定性に関する指標

LCP(Largest Contentful Paint)について

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

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

FID(First Input Delay)について

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

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

CLS(Cumulative Layout Shift)とは

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

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

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

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

ページ エクスペリエンスの構成要素はすべて重要ですが、ランキングでは、ページ エクスペリエンスの一部の要素が平均以下であっても、総合的に優れた情報を含むページが優先されます。

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

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

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

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

モバイルフレンドリーへの対応 あるコンテンツをスマホ用に最適化した状態を「モバイルフレンドリー」と言います。モバイル端末から快適にブラウジングできるようにすることで指標を改善できます。
セーフブラウジングであること 悪質なコンテンツやユーザーに損害を与える動作が含まれないようにすることでこの項目をクリアできます。
HTTPSへの対応 転送されっるWebデータがSSLやTLSで暗号化された状態を指すHTTPsへ対応することで指標をクリアできます。
悪質なインタースティシャルがない インタースティシャルとは、あるコンテンツ画面の切り替わりで表示される全面広告のことです。コンテンツの閲覧を妨害するような悪質な広告を規制することでこの指標は改善できます。

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

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

1.Google Search Console (Core Web Vitals report)
2.PageSpeed Insights(ページスピードインサイト)
3.Light House(ライトハウス)

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では画像の読み込みが原因でスコアが悪化している場合が多く見られるため、画像の最適化を検討してみるのもおすすめです。

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

・サーバー応答時間の改善
・JavaScriptやCSSのレンダリングブロック軽減
・クライアントサイドのレンダリングを改善
・サードパーティーのコードによる影響を削減
など

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」の改善施策の中でも特筆すべき実際の事例をご紹介します。
また詳細は公開中のホワイトペーパーに記載されているのでそちらも併せてご覧いただけるとより理解が深まるかと思います。

使用していないJavascriptの削除

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

画像の圧縮

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

画像サイズ指定

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

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

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

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

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

「Core web vitals」資料公開中!

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

[contact-form-7 404 "Not Found"]

この記事の著者

監修者 土田悠真

早稲田大学卒業後、東京地方検察庁に入庁。その後、株式会社ipeに入社。9か月でコンサルティングチームのリーダーに就任。年商150億円超えの中古品マーケットプレイス、商品数500万品超えのファッションECサイトをはじめとし、様々なジャンルのサイトをコンサルティング、分析を行う。ツイッターはこちら。
@seotsuchida

DOWNLOAD
サービス資料ダウンロード(無料)
大手実績多数の弊社サービスの概要や料金、フォロー体制など、この資料にまとめております。
資料ダウンロードはこちら
CONTACT
お問い合わせ
SEOなどサービスについてご相談がある方、人事・採用へのご不明点・ご質問など、気軽にお問い合わせください。
お問い合わせはこちら
お電話でのお問い合わせ 
03-6455-5871 9:00~18:00(平日)