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

今回は、Googleからコアウェブバイタルが2021年6月に導入されて早一年になるということで、自己の振り返りもかねてコアウェブバイタルとはどういうものなのか、またLCP・FID・CLSの略語それぞれの正式名称の読み方や意味などの解説から改善方法、ツールについてもご紹介したいと思います。

1.コアウェブバイタルとは

コアウェブバイタルとは、一言でいうと ウェブ上で優れたユーザー体験（UX）を提供するために特に重要とされている評価基準です。元々はウェブバイタル（Web Vitals）という名称でGoogleがユーザーの使いやすさを高めるための取り組みをしていたのですが、その中でもユーザーからの必要性が高くウェブバイタルの中核となるもの、つまり「コア」だと判断されたものがコアウェブバイタルとして設定されました。

内容としてはLCP・FID・CLSの3つの指標で構成されており、これらがより良い結果のページであることがすなわちユーザーにとってわかりやすいということで検索順位（SEO）にも影響を与えています。

2.コアウェブバイタルの重要な３つの指標

では、その３つの指標はどういうものなのか具体的に見ていきましょう。

LCP【Largest Contentful Paint（ラージェスト コンテントフル ペイント)】

LCPは読み込み時間を表しており、「最大コンテンツの描画」という直訳の通りページ内における最も大きなコンテンツ（画像や動画など）が表示されるまでの時間を評価する指標となっています。なお、この時のページの測定範囲はスクロールせずに見えるファーストビューの範囲に限られており、ユーザーがページを開いたときに一番印象に残るものをどれだけ早く表示できるかで評価が行われます。

そのため、全てのコンテンツが表示されるまでの時間を短くする必要は必ずしもありません。主にメイン画像やアイキャッチ画像が最大コンテンツになることが多いので、その最大コンテンツの画像のサイズ（バイト数）を減らすことで簡単に評価を上げることが可能です。

下記が評価の基準となります。

2.5秒未満 :「GOOD」(良好)
2.5秒以上 ～4.0秒未満 :「NEEDS IMPROVEMENT」(改善が必要)
4.0秒以上 :「POOR」(不良)

FID【First Input Delay（ファースト インプット ディレイ)】

FIDはユーザーがページを操作した際の反応速度を表しており、「初回入力遅延」という直訳の通りユーザーがそのページで初めに実行したクリックやタップ、キー操作（スクロールは対象外）に対してブラウザが入力の処理を開始するまでの遅延時間を意味しています。

例として、トップページを開いた時にすぐ別のページを開こうとしても、トップページのコンテンツが表示されるのに時間がかかってしまって何も反応してくれないということはほとんどの方に経験があると思います。そうなるとユーザーとしては最初に開いた時に待たされるわけですから、サイトの印象自体が悪くなってしまいます。そうならないためにもトップページは可能な限りブラウザがその処理を開始するまでの遅延時間を短くしなければなりません。

下記が評価の基準となります。

100ミリ秒未満 :「GOOD」(良好)
100ミリ秒以上～300ミリ秒未満 :「NEEDS IMPROVEMENT」(改善が必要)
300ミリ秒以上 :「POOR」(不良)

CLS【Cumulative Layout Shift（キュムレイティブ レイアウト シフト)】

CLSはページコンテンツの視覚的な安定性を表しており、「累積レイアウト変更」という直訳だと少し分かりにくいですが、ページを読み込んでから表示されるまでに起こるレイアウトのずれをスコア化したものを意味しています。このスコアはファーストビューにおける「レイアウトのずれの影響を受けた面積」×「実際にずれて動いた距離」で算出でき、スコアが低い(ずれが少ない)ほどユーザー体験が良いことを示します。

具体例で言うと、ページの文章を読んでいたら上部にある画像が遅れて表示されたために文章が下にずれてしまったことや急に広告のバナーが出現してきたために意図せずクリックしてしまったことなどはないでしょうか？ページ内容が安定せず使いにくいページだと離脱率の上昇につながってしまいます。ユーザーの離脱を回避するためにも予期せぬ動きをしないようなサイト設計が必要です。

下記が評価の基準となります。

0.1未満 :「GOOD」(良好)
0.1以上～0.25未満　　 :「NEEDS IMPROVEMENT」(改善が必要)
0.25以上 :「POOR」(不良)

3.測定ツールと改善方法

では次は、その指標をどうやって確認すればいいのか、また、どのように改善していけば良いのかについて説明していきます。

・測定ツールについて

ツール自体は提供される形式を含め複数存在しますので、状況に合わせて使い分けを行うなど複数のツールを併用して計測するのがおすすめです。

ここではGoogleから提供されている代表的なツールを紹介します。

サーチコンソール（Search Console）

https://search.google.com/search-console/about
→ドメイン単位で確認ができ情報量も多く、またGoogleアナリティクスとの連携が可能な測定ツール

ページスピードインサイト（PageSpeed Insights）

https://pagespeed.web.dev/
→初期設定等が不要ですぐに使うことができる、必要十分な情報を備えたWebアプリ

ウェブバイタル（Web Vitals）

https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma?hl=ja

→必要最低限の情報を即時に確認可能なクロームブラウザの拡張機能

見方として、ページスピードインサイトであれば3つの指標を以下のように確認することができます。

・改善方法について

基本的には測定ツールでの結果を元に改善を行っていきます。

ページスピードインサイトでは以下のように改善方法が明示されるので、内容を確認のうえ具体的な修正方法を検討していくのが良いでしょう。

なかには難解な改善を求められるケースもありますが、評価を大きく下げる主な要因は画像の最適化やJS/CSSの整理、といったサイトを構築する上での基本的な部分になるかと思いますので、手を付けられるものから取り掛かかり徐々に数値を改善していくのが良いでしょう。

4.最後に

今回はコアウェブバイタルの重要な３つの指標としてLCP、FID、CLSを紹介させていただきました。これらは2021年6月から導入されたものではありますが、2022年7月現在FIDに置き換わるものとして新しいINP【Interaction to Next Paint（インタラクション トゥ ネクスト　ペイント)】という指標も注目され始めています。

※INPについては下記サイトに詳細が掲載されていますのでよろしければご確認ください
https://web.dev/inp/

私個人の感覚ではまだ一年しか経っていないと感じますが、ウェブの世界は常にユーザー体験を考えて最適化されていきます。そのため、コアウェブバイタルもすぐに移りかわっていくことが予想されるでしょう。ですが、その時その時でユーザーに使いやすいサイトを制作できるよう、できることを今後も追い求めていきたいと改めて思う振り返りとなりました。

参考：Web Vitals の概要: サイトの健全性を示す重要指標
https://developers-jp.googleblog.com/2020/05/web-vitals.html