はじめに

Chrome User Experience Report は、Google が提供している UX やパフォーマンスを確認するためのツールです。
各指標を確認するためには、以下のツールを使います。

CrUX Dashboard

様々な関数を使って、データソースを作成し、そのデータを元にレポートを作成することができます。
多くの機能を提供している分、使い方が少し複雑ですが、より詳細に見やすいレポートを作成したいときには、便利に使えます。

使い方

https://datastudio.google.com/u/0/datasources/create から「Chrome UX Report」を検索して、接続します。
レポートを作成します
レポートを見る

ここでは、初期設定のままのレポートを表示するところまでの手順を紹介しましたが、データソースは自分で自由にカスタマイズでき、レポートのレイアウトや表示するデータも自分で編集できるので、見たいデータだけレポートとして表示させると良いと思います。

Google BigQuery

SQL に馴染みのあるエンジニアであれば、手軽に使用することができます。
しかし、1ヶ月1TBまでのクエリデータでないと無料の枠から出るので、ご注意ください。

使い方

GCP のプロジェクトを作成した後、Google BigQuery で編集画面を開きます

SQL を使ってクエリを入力します

例

SELECT *
FROM `chrome-ux-report.all.202006`
WHERE origin LIKE '%://m.yahoo.co.jp'
LIMIT 100

結果を確認

主要なカラム

カラム名	説明
origin	アクセス先のオリジンURL
effective_connection_type.name	slow-2g, 2g, 3g, 4g, offline の接続回線の種類
form_factor.name	phone、tablet desktop デバイスの種類
first_contentful_paint.histogram.bin.start	First Contentful Paint の開始時間
first_contentful_paint.histogram.bin.end	First Contentful Paint の終了時間
first_contentful_paint.histogram.bin.density	開始-終了が同一のデータの全体に対する割合
largest_contentful_paint.histogram.bin.start	Largest Contentful Pain の開始時間
largest_contentful_paint.histogram.bin.end	Largest Contentful Pain の終了時間
largest_contentful_paint.histogram.bin.density	開始-終了が同一のデータの全体に対する割合
first_input.delay.histogram.bin.start	First Input Delay の開始時間
first_input.delay.histogram.bin.end	First Input Delay の終了時間
first_input.delay.histogram.bin.density	開始-終了が同一のデータの全体に対する割合
dom_content_loaded.histogram.bin.start	Dom Content Loaded の開始時間
dom_content_loaded.histogram.bin.end	Dom Content Loaded の終了時間
dom_content_loaded.histogram.bin.density
first_paint.histogram.bin.start	First Paint の開始時間
first_paint.histogram.bin.end	First Paint の終了時間
first_paint.histogram.bin.density	開始-終了が同一のデータの全体に対する割合
onload.histogram.bin.start	OnLoad の開始時間
onload.histogram.bin.end	OnLoad の終了時間
onload.histogram.bin.density	開始-終了が同一のデータの全体に対する割合

Largest Contentful Paint, First Input Delay については、 Core Web Vitals を見て、サイトを最適化しよう！を参照ください。

PageSpeed Insights

URL を入力して分析を押すだけなので、誰でも簡単に使うことができます。
また、分析した内容に対して、どのように対処するとスコアが改善するかも提示してくれるので、インターネット上に公開済みのサービスであれば、手軽に分析、改善していくことができます。

使い方

PageSpeed Insights を開く
URL を入力し、分析を実行

おわりに

Web サービスにおいて、UX は非常に重要な指標になります。ChUX を使って、より良いサイトを作っていきましょう。まず最初に使うものとしては、PageSpeed Insights が手軽でおすすめです。ぜひ、ご自身のページで分析してみて、どれくらいのスコアが出ているかをみてみましょう。また、今後、FID, LCP, CLS なども SEO に効いてくるので、この辺りの指標を改善しておくのも良いかと思います。

参考

https://note.com/makn/n/n640eccbf421f
https://developers.google.com/web/tools/chrome-user-experience-report/bigquery/getting-started?hl=ja

Chrome User Experience Report とは？