Looker Studio で CrUX ダッシュボードを構築する

Looker Studio(旧データポータル)は、Chrome UX レポート(CrUX)などのビッグデータ ソース上にダッシュボードを構築できる、強力なデータ可視化ツールです。このガイドでは、独自のカスタム CrUX ダッシュボードを作成して、オリジンのユーザー エクスペリエンスの傾向を追跡する方法について説明します。

CrUX ダッシュボード

CrUX ダッシュボードは、コミュニティ コネクタという Looker Studio の機能を備えています。このコネクタは、BigQuery 上の未加工の CrUX データと Looker Studio のビジュアリゼーションの間に事前に確立されたリンクです。これにより、ダッシュボードのユーザーがクエリを作成したり、グラフを生成したりする必要がなくなります。すべてが構築されています。必要なのは、オリジンを指定することだけです。カスタム ダッシュボードが生成されます。

デフォルトの CrUX ダッシュボードの使用

CrUX にはデフォルトのダッシュボードがあり、CrUX チームによって管理されています。新しい指標(INP など)がチームによって追加され、次回ダッシュボードが読み込まれるときに利用可能になります。

サイトの CrUX データをメンテナンスなしで迅速に可視化するには、デフォルトのダッシュボードを使用することをおすすめします。ただし、ユーザーによってはダッシュボードのカスタマイズが必要になることがあります。

カスタム ダッシュボードの作成

g.co/chromeuxdash にアクセスしてください。CrUX コミュニティ コネクタのページに移動し、ダッシュボードの生成元を指定します。なお、初めて使用する場合は、権限またはマーケティング設定のプロンプトへの入力が必要になる場合があります。

CrUX ダッシュボード コネクタ

テキスト入力フィールドで指定できるのはオリジンのみです。完全な URL は入力できません。次に例を示します。

送信元(サポート対象)
https://web.dev
URL(サポート対象外)
https://developer.chrome.com/chrome-ux-report-looker-studio-dashboard/

プロトコルを省略すると、HTTPS であると見なされます。サブドメインは重要です。たとえば、https://developers.google.comhttps://www.google.com は異なるオリジンとみなされます。

オリジンに関する一般的な問題としては、誤ったプロトコルを指定している、https:// ではなく http:// を使用している、必要に応じてサブドメインが省略されていることなどが挙げられます。一部のウェブサイトにはリダイレクトが含まれているため、http://example.comhttps://www.example.com にリダイレクトする場合は、送信元の正規バージョンである後者を使用する必要があります。目安として、URL バーに表示されるオリジンを使用してください。

オリジンが CrUX データセットに含まれていない場合は、次のようなエラー メッセージが表示されることがあります。データセットには 400 万を超えるオリジンがありますが、必要なオリジンには含めるのに十分なデータがない場合があります。

CrUX ダッシュボードのエラー メッセージ

オリジンが存在する場合、ダッシュボードのスキーマページが表示されます。ここには、含まれるすべてのフィールド(各有効な接続タイプ、各フォーム ファクタ、データセットがリリースされた月、各指標のパフォーマンスの分布、そしてもちろん送信元の名前)が表示されます。このページで必要な操作や変更はありません。[レポートを作成] をクリックして続行してください。

CrUX ダッシュボード スキーマ

ダッシュボードの使用

各ダッシュボードには、次の 3 種類のページがあります。

  1. Core Web Vitals の概要
  2. 指標のパフォーマンス
  3. ユーザー層

各ページには、利用可能な月次リリースの経時的な分布を示すグラフが表示されます。新しいデータセットがリリースされたら、ダッシュボードを更新するだけで最新のデータを取得できます。

月次データセットは、毎月第 2 火曜日にリリースされます。たとえば、5 月のユーザー エクスペリエンス データで構成されるデータセットは、6 月の第 2 火曜日にリリースされます。

Core Web Vitals の概要

最初のページには、オリジンのウェブに関する主な指標の月間パフォーマンスの概要が表示されます。これらは特に重要な UX 指標であり、Google が注力することを推奨しています。

CrUX ダッシュボードのウェブに関する主な指標の概要

Core Web Vitals のページでは、パソコンとスマートフォンのユーザーがオリジンでどのような体験をしているかを把握できます。デフォルトでは、ダッシュボードを作成した最新の月が選択されています。過去の月次リリースと最新の月次リリースを切り替えるには、ページ上部の [] フィルタを使用します。

これらのグラフに「タブレット」はデフォルトで省略されていますが、必要に応じて棒グラフの設定で [タブレットなし] フィルタを削除できます。

CrUX ダッシュボードを編集して、Core Web Vitals ページにタブレットを表示する

指標のパフォーマンス

Core Web Vitals ページの後には、CrUX データセットのすべてのmetricsをまとめたスタンドアロン ページが表示されます。

CrUX ダッシュボード LCP ページ

各ページの上部には [デバイス] フィルタがあります。このフィルタを使用すると、ウェブサイト エクスペリエンス データに含めるフォーム ファクタを限定できます。たとえば、スマートフォンのエクスペリエンスを具体的にドリルダウンできます。この設定はページ間で維持されます。

これらのページでは、主に「良い」、「改善が必要」、「低い」に分類されたエクスペリエンスの月間分布が表示されます。グラフの下にある色分けされた凡例は、カテゴリに含まれる体験の範囲を示しています。たとえば、上のスクリーンショットでは、Largest Contentful Paint(LCP)エクスペリエンスが「良好」な割合が変動し、ここ数か月でやや悪化していることがわかります。

直近の月のエクスペリエンスが「良い」と「低い」の割合がグラフの上に表示され、前月からの差異の割合もインジケーターで示されます。このオリジンでは、LCP の「良い」エクスペリエンスは前月比で 3.2% 減の 56.04% となりました。

また、LCP などのウェブに関する主な指標など、明示的なパーセンタイルの推奨値を提供する指標については、「高い」と「低い」の割合の間に「P75」という指標が表示されます。この値は、ユーザー エクスペリエンスのオリジンの 75 パーセンタイルに対応します。つまり、エクスペリエンスの 75% がこの値より優れています。注意すべき点は、これはオリジン上のすべてのデバイスにわたる全体的な分布に適用されることです。[デバイス] フィルタで特定のデバイスを切り替えても、パーセンタイルは再計算されません。

パーセンタイルに関する退屈な技術的注意事項

パーセンタイル指標は BigQuery のヒストグラム データに基づいているため、粒度は粗くなります(LCP は 1,000 ms、FID は 100 ms、CLS は 0.05)。つまり、P75 LCP が 3800 ミリ秒の場合、真の 75 パーセンタイルが 3800 ミリ秒と 3900 ミリ秒の間にあることがわかります。

さらに、BigQuery データセットは「ビン スプレッディング」と呼ばれる手法を使用しています。この手法では、ユーザー エクスペリエンスの密度が本質的に、粒度が低下する非常に粗いビンにグループ化されます。これにより、4 桁の精度を超えることなく、分布の最下位に微小な密度でも含めることができます。たとえば、3 秒未満の LCP 値は幅 200 ミリ秒のビンにグループ化されます。3 ~ 10 秒、ビンの幅は 500 ミリ秒。10 秒を超えて、ビンの幅が 5,000 ミリ秒である、など。さまざまな幅のビンを使用するのではなく、ビンの拡散により、すべてのビンの幅が 100 ミリ秒の一定であり(最大公約数)、分布は各ビンにわたって線形補間されます。

PageSpeed Insights などのツールに対応する P75 の値は、一般公開されている BigQuery データセットには基づいておらず、ミリ秒精度の値を提供できます。

ユーザー層

ユーザー属性ページには、デバイスと効果的な接続タイプ(ECT)の 2 つのディメンションがあります。これらのページは、各ユーザー属性のユーザーの、オリジン全体におけるページビュー数の分布を示しています。

[デバイスの分布] ページには、スマートフォン、パソコン、タブレットの各ユーザー数の内訳が時系列で表示されます。多くのオリジンではタブレットのデータがほとんど、またはまったくない傾向があるため、グラフの端から端に「0%」と表示されることがよくあります。

CrUX ダッシュボードのデバイスページ

同様に、ECT 分布ページには、4G、3G、2G、低速の 2G、オフライン エクスペリエンスの内訳が表示されます。

これらのディメンションの分布は、First Contentful Paint(FCP)ヒストグラム データのセグメントを使用して計算されます。

よくある質問

CrUX ダッシュボードを使用すべきなのはどのような場合ですか?

CrUX ダッシュボードは、BigQuery で利用可能なものと同じ基礎データに基づいていますが、データを抽出するために SQL を 1 行記述する必要はなく、無料の割り当ての超過を心配する必要もありません。ダッシュボードはすばやく簡単に設定でき、すべてのビジュアリゼーションは自動で生成されます。また、ダッシュボードを他のユーザーと共有することも可能です。

CrUX ダッシュボードの使用制限はありますか?

CrUX ダッシュボードは BigQuery をベースとしているため、その制限もすべて継承します。月単位の粒度でオリジンレベルのデータに制限されます。

CrUX ダッシュボードでは、シンプルさと利便性のために、BigQuery 上の元データの汎用性の一部が引き換えられます。たとえば、指標の分布は完全なヒストグラムではなく、「良好」、「改善が必要」、「不良」のみとして表示されます。CrUX ダッシュボードではグローバル レベルのデータも提供されますが、BigQuery データセットでは特定の国に焦点を絞ることができます。

Looker Studio の詳細はどこで確認できますか?

詳しくは、Looker Studio の機能のページをご覧ください。