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

フィールド名説明
originhttps://example.com プロトコル名を含む origin 名が設定されます。
effective_connection_type.nameslow-2g, 2g, 3g, 4g, offline の接続回線の種類が設定されます。Mobileの場合飲み記録されるのか、4g より速い回線は 4g になっているのかと思います。
form_factor.namephonetablet desktop デバイスの種類が設定されます。
first_paint.histogram.bin.startFirst Paint の開始時間が設定されます。
first_paint.histogram.bin.endFirst Paint の終了時間が設定されます。
first_paint.histogram.bin.density開始-終了が同一のデータの全体に対する割合が設定されます。
first_contentful_paint.histogram.bin.startFirst Contentful Paint の開始時間が設定されます。
first_contentful_paint.histogram.bin.endFirst Contentful Paint の終了時間が設定されます。
first_contentful_paint.histogram.bin.density開始-終了が同一のデータの全体に対する割合が設定されます。
dom_content_loaded.histogram.bin.startDom Content Loaded の開始時間が設定されます。
dom_content_loaded.histogram.bin.endDom Content Loaded の終了時間が設定されます。
dom_content_loaded.histogram.bin.density開始-終了が同一のデータの全体に対する割合が設定されます。
onload.histogram.bin.startOnLoad の開始時間が設定されます。
onload.histogram.bin.endOnLoad の終了時間が設定されます。
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 扱いで計測されているように思います。


用途について

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

  • 施策の効果検証
    月別に取得ができるので、Before、After でヒストグラムを取得して、分布の変化を見る

  • 競合他社との比較
    Origin別に取得できるので、競合他社とのパフォーマンス比較に使用できるかと思います。

以上です。

コメント