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 で、一般公開されているようなので、アクセスしていくつかクエリを実行してみました。
実行したクエリについて記載します。

[TOC]

参考

• Chrome User Experience Report OverView|  Tools for Web Developers  |  Google Developers
• Chrome User Experience Report Getting started|  Tools for Web Developers  |  Google Developers

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

まず、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の項目は、除外しています。

実行するクエリ

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

以下のようなクエリを実行すると、ヒストグラム出力用のデータを取得することができます。
私は、この結果をスプレッドシートに保存、グラフに描画しました。
当サイトは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別に取得できるので、競合他社とのパフォーマンス比較に使用できるかと思います。

以上です。