Googleが発表した「Web Vitals」ウェブバイタルとは？要点と用語を完全解説

Web Vitals（ウェブバイタル）とは、ウェブで優れたユーザー エクスペリエンスを実現するために重要と思われる品質シグナルの統合ガイドを提供する取り組みのことです。

このブログは、Web VitalsについてGoogleから発表された情報を元に、個人の見解をまとめたものです。
※正式な情報については、引用部分やGoogle Developersなどをご覧ください。

【筆者の考察】Web Vitals（ウェブバイタル）とは？

Googleは、「LCP」「FID」「CLS」の3つの重要指標を改善させることによって、WEBページを閲覧しているユーザー体験が向上すると考えているようです。

以前からSEOやWEB制作の現場では、UX改善やSXOが重要だと言われており、ページの読み込み速度もユーザーエクスペリエンスの重要な要素と考えられてきました。

ページスピード改善から更にもう一歩踏み込んで、ユーザーファースト目線で取り組んでいく必要があるでしょう。

Web Vitalsの重要指標である「Core Web Vitals」コアウェブバイタルとは

Core Web Vitals（コアウェブバイタル）とは、Web Vitlesの中で特に重要な3つのサイトの健全性を示す重要指標のことです。

GoogleはCore Web Vitalsを、「ユーザー エクスペリエンスの核となるニーズ」と認識しています。

ユーザー エクスペリエンスの質の測定には、多くの側面があります。

そのほとんどはサイトやコンテキストに固有のものですが、すべてのウェブ エクスペリエンスにとって重要な共通シグナル、つまり「Core Web Vitals」が存在します。

このようなユーザー エクスペリエンスの核となるニーズには、読み込み時間、インタラクティブ性、ページ コンテンツの視覚的な安定性などが含まれ、これらを組み合わせたものが 2020 Core Web Vitals の土台になります。

https://developers-jp.googleblog.com/2020/05/web-vitals.html

それでは、3つの重要指標について詳しく解説します。

1.読み込み時間：「LCP」Largest Contentful Paint

Largest Contentful Paintとは、直訳すると「最大コンテンツの描画」となります。
もっと分かりやすく言うと、そのページ内の最も最も重要なコンテンツが読み込まれるまでにかかる時間のことです。
表示速度に関する指標で、数値が低い（読み込み時間が短い）方が良いです。
※LCPの技術的な詳細はこちらをご覧ください。

ユーザーがページで最も有意義なコンテンツをどのくらい早く見ることができるかを表します。
感覚的な読み込みスピードを測定し、ページ読み込みタイムラインにおいてページの主要コンテンツが読み込まれたと思われるタイミングを指します。

https://developers-jp.googleblog.com/2020/05/web-vitals.html

LCPの3段階評価

LCPを向上させるには

画像、動画など、ページ構成の中でメインコンテンツに当たるものの読み込み速度を高めることが、LCP改善になります。

最初のコンテンツの描画を表す「First Contentful Paint（FCP）」や、最初のバイトを受け取るまでの時間を表す「Time to First Byte（TTFB）」を改善することも、LCPを向上させることに間接的に影響があります。

2.インタラクティブ性：「FID」First Input Delay

First Input Delayは、直訳すると「最初の入力遅延」となります。
ページを読み込んだときに、ユーザーがページ操作をできるようになるまでにかかる時間のことです。
ページ操作とは、リンクやボタンをクリック、タップ、ページスクロールなどのことです。
操作性に関する指標で、数値が低い（時間が短い）方が良いです。
※FIDの技術的な詳細はこちらをご覧ください。

最初の入力までの遅延を表します。
応答性を測定して、ユーザーが最初にページを操作しようとする場合に感じるエクスペリエンスを定量化します。

https://developers-jp.googleblog.com/2020/05/web-vitals.html

FIDの3段階評価

FIDを向上させるには

表示スピードを上げることとと並行して、読み込みを分割させることを検討しましょう。
ページ内のすべてのコンテンツの読み込みが完了してから操作がきくようになるかたちではなく、操作性がきくようになる部分を先行し、段階を分けてページ全体を読み込ませると良いでしょう。

3.ページコンテンツの視覚的な安定性：「CLS」Cumulative Layout Shift

Cumulative Layout Shiftとは、直訳すると「累積レイアウトシフト」になりますが、これだとちょっと意味がよく分からないですよね。
ここで言う「累積」とは、「ページの読み込みが進むにつれ」と言う解釈で良いと思います。
CLSは、「ページの読み込み進度によるレイアウトの入れ替わり」と考えてください。
操作性に関わる指標で、数値が低い（レイアウト移動が少ない）方が良いです。

クリックやタップをしようとした時に、ページの読み込み中が進んで表示ズレてしまったり、突然広告が出現したり、意図した操作ができななかった瞬間はありませんか？
CLSは、ユーザーが誤操作をせず快適にネットサーフィンするために、ページ読み込みによるレイアウト移動を数値化したものです。

デベロッパー向けのweb.devに公開されている、この動画がとても分かりやすかったので参考にしてみてください。

※CLSは2019年に作られた、比較的新しい指標です。技術的な詳細はこちらをご覧ください。

ページがどのくらい安定しているように感じられるかを表します。
視覚的な安定性を測定し、表示されるページ コンテンツにおける予期しないレイアウトのずれの量を定量化します。

https://developers-jp.googleblog.com/2020/05/web-vitals.html

CLSの3段階評価

CLSを向上させるには

どのような通信環境・デバイスのユーザーであってもユーザビリティを損なわないような読み込ませ方にしましょう。

LCPやFIDを改善していく時に、スピード・秒数だけを改善しようとすると、CLSが疎かになってしまいます。

Web Vitals「LCP」「FID」「CLS」を計測する方法

Core Web Vitalsの重要指標「LCP」「FID」「CLS」は、「Web Vitals」というツールをChrome機能拡張を入れることで測定することができます。

ここから「Chromeに追加」でインストールして、機能拡張を有効にしてください。
https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma

計測ツール「Web Vitals」の使い方

Web Vitalsは今度どうなっていくの？

ページスピード改善や数値の計測には、これまでLighthouse、Chrome DevTools、PageSpeed Insights、Search Console のスピード レポートなど、様々なツールや指標がありましたが、これらもいずれ、Core Web Vitalsを軸とした内容に刷新されていくようです。

Web Vitalsへの対策は必要なの？

個人ブロガーや、WordpressなどのCMSを使用している小規模なサイトなどでは、特に何か大きな対策をする必要はないと思います。
技術的な知識が必要になりますので、対策すること自体が難しい場合もあるでしょう。

ページスピードや重要指標を高めるというよりは、サイトに悪い部分があれば潰していく方が大事かと思います。

まとめ

これまでもページスピードが遅いことは検索順位にとってマイナス要因でした。
今まで通り、ページスピードは重要です。
そしてWeb Vitalsによって今までよりも、よりユーザーにとって使いやすい形でのスピード改善が望まれている、ということを理解してください。

Web Vitalsについて詳しく解説されている他のサイト

海外SEOブログ（鈴木謙一氏）
https://www.suzukikenichi.com/blog/google-introduces-web-vitals/