他サイトのコアウェブバイタルのスコアをざっくり確認する方法

自サイト・他サイトのコアウェブバイタル（Core Web Vitals）を簡単に計測するための方法をご紹介します。
今回はAmazonのコアウェブバイタルを例にご紹介します。

Chrome User Experience Reportとは？

「Chrome User Experience Report（CrUX）」は、Chomeユーザーがアクセスしたデータをもとに作成されています。CrUXでは主要な指標を確認することができます。
例えば、AmazonのFirst Contentful Paintの何％がGoodかなどを調査することができます。

また、使用統計レポートがオンのユーザーのデータをもとに作成されています。

CrUXのデータを取得・表示する方法

1. PageSpeed Insightsを利用
2. CrUX Dashboard on Data Studioを利用　
3. Public Google BigQuery projectを利用

今回は継続的なモニタリングをしやすくするために、2番と3番の方法をご紹介します。

CrUX Dashboard on Data Studioを利用

最終的にData Studio（Googleデータポータル）で以下のようなデータを見ることができます。

1. データスタジオのコネクタ選択画面に移動します。
調査したいサービスのURL入力後、「CONNECT」をクリックします。
ここでは例としてAmazonのURLを入力しています。

2. 初めてChrome UX Reportを利用する場合は認証を行います。

3. 「CREATE REPORT」を選択します。

4.  もう一度「CREATE REPORT」を選択します。

5. 指定したサイトのコアウェブバイタルの状況をData Studioで確認することができます。
AmazonはCLSのデスクトップのスコアが低いことが分かります。

同様の作業を行うことで、楽天市場のコアウェブバイタルも出してみました。楽天市場はAmazonに比べて全体的にスコアが低いことが分かります。
新しいレポートを作成する時は「このURL」にアクセスすることで作成できます。

Public Google BigQuery projectを利用

BigQueryでも各サイトのコアウェブバイタルを確認することができます。
最終的に以下のような結果を確認することができます。

1. Public Google BigQuery projectにアクセスします。

2. プロジェクトをピンしつつ、自身のプロジェクトに切り替えます。

3. クエリを実行します。

WITH 
`tmp` AS (
SELECT
 CASE
   WHEN lcp_bin.end <= 2500 THEN 'good'
   WHEN lcp_bin.end <= 4000 THEN 'needs_improvement'
   WHEN lcp_bin.end > 4000 THEN 'bad'
 END AS lcp_score
 , lcp_bin.density AS lcp_density
FROM `chrome-ux-report.country_jp.202102`,
UNNEST (largest_contentful_paint.histogram.bin) AS lcp_bin
WHERE
 origin = 'https://www.amazon.co.jp'
)

SELECT
 lcp_score
 , SUM(lcp_density) AS lcp_density
FROM `tmp`
GROUP BY lcp_score
ORDER BY lcp_score

4. 結果が表示されます。
注意点として、デスクトップ・タブレット・モバイルすべてが足し合わされています。そのため、モバイルのみ表示したい場合はクエリに「form_factor.name」を追加する必要があります。

その他のクエリ例を見たい場合は以下を参考にしてください。

Chrome User Experience Report  |  Chrome UX Report  |  Google Developers

お仕事の依頼

データ分析やSEO、UI/UX改善のコンサルティングなどのお仕事をご相談する際はTwitterからご連絡お願いいたします。