Chrome User Experience Report とは？

6278 ワード
Web Chrome google performance gcp Chrome テキストリンク

はじめに

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

CrUX Dashboard

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

使い方

  1. https://datastudio.google.com/u/0/datasources/create から「Chrome UX Report」を検索して、接続します。

  2. レポートを作成します

  3. レポートを見る

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

Google BigQuery

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

使い方

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

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

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

  3. 結果を確認

主要なカラム

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

使い方

  1. PageSpeed Insights を開く
  2. 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