Core Web Vitals（GoogleのUX指標）の全貌と改善方法【前編】

LCP・FID・CLSを計測する主なツール

2021年9月現在、Core Web Vitalsの3つの指標であるLCP・FID・CLSを計測する主なツールとしては以下が存在します。

Core Web Vitals を測定するためのツール　出典：web.dev(https://web.dev/vitals-tools/)

これらのうち、最も簡単に対象のページのCore Web Vitalsのスコアを測定できるツールとして、ページスピードインサイトを紹介します。

このページスピードインサイトは、Core Web Vitalsのスコアを知りたいページのURLを入力するだけで、Core Web Vitalsのスコアや阻害している要素を機械的に判定してレポートしてくれます。

もちろん、阻害要因をこのページスピードインサイトだけですべて把握することは現実的には難しいですが、改善のあたりをつける上でも役立つのでおすすめです。

ページスピードインサイトでの判定結果画面

フィールドデータとラボデータの違い

上記で紹介したページスピードインサイトでも確認することができますが、Core Web Vitalsに関する指標には「フィールドデータ」と「ラボデータ」という2つのデータが存在します(厳密には、FIDのみラボデータに存在しない)。この違いについても、簡単に紹介します。

フィールドデータとは、実際にユーザーが対象のWebページにアクセスしたときの各指標の数値を統計化したデータになります。また、このフィールドデータに基づいたCore Web Vitalsのスコアが、検索のシグナルであるページエクスぺリエンスに適用されています。

Googleは、実際のユーザーのアクセス情報をChromeユーザーエクスペリエンスレポート(CrUX)に格納しており、このデータはAPIやBigQueryからも取得が可能です。また、より簡易に確認する方法としては、先述のページスピードインサイトのフィールドデータという項目からも確認ができます。

一方のラボデータは、対象のWebページにアクセスしたときのLCPとCLSのシミュレーション数値を確認することができます。

「固定化された環境下でのシミュレーション数値のため、実際のユーザーの利用データとは異なる」という点がデメリットですが、一方で以下のようなメリットがあります。

公開前の開発用ページなどでも数値を算出することができる
すべてのページで数値を算出できる　※フィールドデータは、対象のページが、Chromeユーザーエクスペリエンスレポート(CrUX)に存在していないとCore Web Vitalsのスコアを確認することができない

残念ながら、ラボデータはシミュレート値なので、ユーザーの入力操作に依存したFIDの値を取得することができません。ただし、ラボデータではコンテンツの初回描画から操作可能になるまでの各タスクの処理時間において、50ミリ秒を超えてあふれたものの合計時間を確認するTBT (Total Blocking Time)を取得することができ、それを改善することがFIDの改善につながります。FIDのデータ取得ができないページについては、TBTを計測指標として改善を進めましょう。

ここまでCore Web Vitalsはどういう指標で、その中にはどういった項目が含まれており、その項目は具体的にどのようなものかについて紹介してきました。次回のCore Web Vitals（GoogleのUX指標）の全貌と改善方法【中編】では、実際に企業のCore Web Vitals改善、さらに広義の意味で捉えると表示速度改善を基点にUX改善を通じて培った代表的な改善のナレッジを紹介します。