Chrome User Experience Report で、収集されたサイトの統計情報を閲覧する

Page Speed Insights の V4 API から、ある程度アクセスのあるサイトであれば、First Contentful Paint（FCP）と DOMContentLoaded（DCL）が取得できるようになりました。

PageSpeed Insights について | PageSpeed Insights | Google Developers には以下のように記載されています。

PageSpeed Insights では Chrome ユーザーエクスペリエンスレポート（CrUX）のデータを組み入れて、ページに関する実際のパフォーマンスデータを表示します。PSI レポートで確認できる指標は First Contentful Paint（FCP）と DOMContentLoaded（DCL）の 2 つです。

Chrome ユーザーエクスペリエンスレポート（CrUX）は、Public な BigQuery Project で、一般公開されているようなので、アクセスしていくつかクエリを実行してみました。
実行したクエリについて記載します。

参考
一般公開データセットについて
スキーマの定義
実行するクエリ
- ヒストグラムデータを取得する
- 接続回線、デバイスの種類を調べる
用途について

参考

一般公開データセットについて

まず、BigQuery を使用するのが初めてで、BigQueryで150万円溶かした人の顔 - Qiita という記事があったりするため、若干恐ろしかったので、Public な BigQuery の Project について調べてみたところ、以下ドキュメントが見つかりました。
Google BigQuery 一般公開データセット | BigQuery | Google Cloud

一般公開データセットは、BigQuery に保存され、一般に公開されるデータセットです。BigQuery のドキュメントに記載されている一般公開データセットは、Google BigQuery がホストしているデータセットで、ユーザーがアクセスして自分のアプリケーションに統合することができます。Google では、これらのデータセットの保存費用を負担しており、プロジェクト経由でデータへの一般公開アクセスを提供しています。データに対して実行されたクエリに対してのみ料金が発生します（毎月 1 TB まで無料。クエリの料金の詳細をご覧ください）。

という記載があり、以下のことがわかったので安心して動作確認しても、課金されることはないことがわかりました。

1 TB までは無料で使用できる。
クレジットカードを登録しなければ、1TB超えた場合、使用制限がかかるだけで、課金はされない。

スキーマの定義

chrome-ux-report のスキーマ定義は以下の通りです。
属性が RECORDの項目は、除外しています。

フィールド名	説明
origin	`https://example.com` プロトコル名を含む origin 名が設定されます。
effective_connection_type.name	`slow-2g`, `2g`, `3g`, `4g`, `offline` の接続回線の種類が設定されます。Mobileの場合飲み記録されるのか、4g より速い回線は 4g になっているのかと思います。
form_factor.name	`phone`、`tablet` `desktop` デバイスの種類が設定されます。
first_paint.histogram.bin.start	First Paint の開始時間が設定されます。
first_paint.histogram.bin.end	First Paint の終了時間が設定されます。
first_paint.histogram.bin.density	開始-終了が同一のデータの全体に対する割合が設定されます。
first_contentful_paint.histogram.bin.start	First Contentful Paint の開始時間が設定されます。
first_contentful_paint.histogram.bin.end	First Contentful Paint の終了時間が設定されます。
first_contentful_paint.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	開始-終了が同一のデータの全体に対する割合が設定されます。
onload.histogram.bin.start	OnLoad の開始時間が設定されます。
onload.histogram.bin.end	OnLoad の終了時間が設定されます。
onload.histogram.bin.density	開始-終了が同一のデータの全体に対する割合が設定されます。

実行するクエリ

ヒストグラムデータを取得する

以下のようなクエリを実行すると、ヒストグラム出力用のデータを取得することができます。
私は、この結果をスプレッドシートに保存、グラフに描画しました。
当サイトはBig Query に保存されるほどアクセス数がなかったので、Yahoo のorigin で実行してみましたが、他所様のサイトですので、結果を載せるのが憚られ、クエリのみ記載します。

First Contentful Paint の開始時間のヒストグラムデータを得る

#standardSQL
SELECT
    bin.start,
    SUM(bin.density) AS density
FROM
    `chrome-ux-report.all.201802`,
    UNNEST(first_contentful_paint.histogram.bin) AS bin
WHERE
    origin = 'https://www.yahoo.co.jp'
GROUP BY
    bin.start
ORDER BY
    bin.start

First Paint の開始時間のヒストグラムデータを得る

#standardSQL
SELECT
    bin.start,
    SUM(bin.density) AS density
FROM
    `chrome-ux-report.all.201802`,
    UNNEST(first_paint.histogram.bin) AS bin
WHERE
    origin = 'https://www.yahoo.co.jp'
GROUP BY
    bin.start
ORDER BY
    bin.start

Dom Content Loaded の開始時間のヒストグラムデータを得る

#standardSQL
SELECT
    bin.start,
    SUM(bin.density) AS density
FROM
    `chrome-ux-report.all.201802`,
    UNNEST(dom_content_loaded.histogram.bin) AS bin
WHERE
    origin = 'https://www.yahoo.co.jp'
GROUP BY
    bin.start
ORDER BY
    bin.start

OnLoad の開始時間のヒストグラムデータを得る

#standardSQL
SELECT
    bin.start,
    SUM(bin.density) AS density
FROM
    `chrome-ux-report.all.201802`,
    UNNEST(onload.histogram.bin) AS bin
WHERE
    origin = 'https://www.yahoo.co.jp'
GROUP BY
    bin.start
ORDER BY
    bin.start

4G回線の、First Contentful Paint の開始時間のヒストグラムデータを得る

#standardSQL
SELECT
    bin.start,
    SUM(bin.density) AS density
FROM
    `chrome-ux-report.all.201802`,
    UNNEST(first_contentful_paint.histogram.bin) AS bin
WHERE
    origin = 'https://www.yahoo.co.jp'
    AND  
    effective_connection_type.name = '4G'
GROUP BY
    bin.start
ORDER BY
    bin.start

接続回線、デバイスの種類を調べる

接続回線の種類を調べる
effective_connection_type.name を distinct して接続回線の種類を調べます。

#standardSQL
SELECT 
    distinct effective_connection_type.name as type_name
FROM 
    `chrome-ux-report.all.201802`

Row type_name    
1   4G   
2   offline  
3   2G   
4   3G   
5   slow-2G

デバイスの種類を調べる
form_factor.name を distinct してデバイスの種類を調べます。

#standardSQL
SELECT 
    distinct form_factor.name as factor_name
FROM 
    `chrome-ux-report.all.201802`

Row factor_name
1   phone    
2   tablet   
3   desktop

接続回線と、デバイズの組み合わせを調べる
接続回線と、デバイズの組み合わせを調べます。

#standardSQL
SELECT 
    effective_connection_type.name as type_name,
    form_factor.name as factor_name
FROM 
    `chrome-ux-report.all.201802`
GROUP BY
    type_name,
    factor_name
ORDER BY
    factor_name,
    type_name

Row type_name   factor_name  
1   2G  desktop  
2   3G  desktop  
3   4G  desktop  
4   offline desktop  
5   slow-2G desktop  
6   2G  phone    
7   3G  phone    
8   4G  phone    
8   4G  phone    
9   offline phone    
10  slow-2G phone    
11  2G  tablet   
12  3G  tablet   
13  4G  tablet   
14  offline tablet   
15  slow-2G tablet

desktop で一番速い回線が、4G なので、光回線等も 4G 扱いで計測されているように思います。

用途について

あくまで１つの指標だとは思いますが、アクセス数がある程度あるサイトであれば、RUM に近い情報を Google が収集してくれているということになるので、以下用途に使用できるかと思います。

施策の効果検証
月別に取得ができるので、Before、After でヒストグラムを取得して、分布の変化を見る
競合他社との比較
Origin別に取得できるので、競合他社とのパフォーマンス比較に使用できるかと思います。

以上です。

カテゴリー

Page Speed Insights

Chrome User Experience Report で、収集されたサイトの統計情報を閲覧する

参考

一般公開データセットについて

スキーマの定義

実行するクエリ

ヒストグラムデータを取得する

接続回線、デバイスの種類を調べる

用途について

コメント

カテゴリー

最近の投稿

参考

一般公開データセットについて

スキーマの定義

実行するクエリ

ヒストグラムデータを取得する

接続回線、デバイスの種類を調べる

用途について

コメント

カテゴリー

関連投稿

最近の投稿