Google Analyatics 3 には、サイトの速度というデータが記録されています。
このデータはReal User Monitoring に分類されるデータで、デフォルトでは1%のユーザーの速度が記録されています。
どのサイト、サービスでも大概Google Analytics は導入されているので、
いざ、「フロントエンドの速度も含めたパフォーマンスの悪いページを特定したい」といったケースで活用できそうに思います。
この記事ではそのようなケースを想定して、速度レポートとしてどのようなデータが取得できるのか試してみました。

前提

OS、PythonのVersion必要なライブラリの情報を記載します。

  • OS

!sw_vers


ProductName:    macOS
ProductVersion: 11.6
BuildVersion:   20G165
  • Python の Version

!python3 -V


Python 3.7.2

必要なライブラリのインストール

!pip3 install --upgrade pip
!pip3 install pandas
!pip3 install google2pandas
!pip3 install oauth2client
!pip3 install matplotlib

データの戻り形式を確認してみる。

このブログのサイトの速度を取得します。
Google Anlayticds V4 のAPIの実行時のキーの指定方法は、Dimensions & Metrics Explorer を確認しながら指定しました。

ページ読み込み時間を取得して、ヒストグラム表示する

ページ読み込み時間を取得してヒストグラム表示します。
GAのAPIの値はga:pageLoadTimeとga:pageLoadSample、ga:avgPageLoadTimeを指定しています。
戻り値をみる限り上記は、以下の関係が成り立ちます。

ga:pageLoadTime / ga:pageLoadSample = ga:avgPageLoadTime

ヒストグラムに表示する値は、ga:avgPageLoadTimeを使用します。
Google AnalyticsとNavigation Timing API - Qiita が参考になりますが、ページ読み込み時間は、Navigation Timing API を使用して以下の計算式で求められる値です。
performance.timing.loadEventStart - performance.timing.navigationStart。

from google2pandas import *
view_id = '103185238'
query = {
    'reportRequests': [{
        'viewId' : view_id,
        'dateRanges': [{
            'startDate' : '30daysAgo',
            'endDate'   : 'today'}],
        'dimensions' : [
            {'name' : 'ga:pagePath'}      
        ],
        'metrics'   : [
            {'expression' : 'ga:pageLoadTime'},
            {'expression' : 'ga:pageLoadSample'},
            {'expression' : 'ga:avgPageLoadTime'},            
        ],
    }]
}
conn = GoogleAnalyticsQueryV4(secrets='./ga_client.json')
df = conn.execute_query(query)
df['avgPageLoadTime'].astype(float).hist(bins=50)


<AxesSubplot:>

Image from Gyazo

ページ読み込み時間を取得して、パフォーマンスが悪い上位10%のページを取得する

from google2pandas import *
view_id = '103185238'
query = {
    'reportRequests': [{
        'viewId' : view_id,
        'dateRanges': [{
            'startDate' : '30daysAgo',
            'endDate'   : 'today'}],
        'dimensions' : [
            {'name' : 'ga:pagePath'}      
        ],
        'metrics'   : [
            {'expression' : 'ga:pageLoadTime'},
            {'expression' : 'ga:pageLoadSample'},
            {'expression' : 'ga:avgPageLoadTime'},        
        ],
    }]
}
conn = GoogleAnalyticsQueryV4(secrets='./ga_client.json')
df = conn.execute_query(query)
df['avgPageLoadTime'] = df['avgPageLoadTime'].astype(float)
df = df.sort_values(by='avgPageLoadTime', ascending=False)
df[df['avgPageLoadTime']>=df['avgPageLoadTime'].quantile(0.9)]

pagePathpageLoadTimepageLoadSampleavgPageLoadTime
23/blog/django-model-を作成したがmakemigrations-で-no-c...17126117.126000
17/blog/Customize-Google-Form-and-set-hidden-field/32875310.958333
3/amp/blog/Python-implements-statistical-test-m...801018.010000
36/blog/jar-ファイル作成時にminify-maven-plugin-を使ってcssj...658616.586000
9/blog/About-JavaScript-keyboard-shortcut-library/1180625.903000
43/blog/pip-インストールする-ライブラリの-version-番号を調べる/1141725.708500
15/blog/Calculate-Weibull-distribution-in-Python/2243245.608000

pandas のquantileと条件式を組み合わせると上位10%の遅いページが抽出できました。

サンプリング数が少なすぎると、異常値が上位に来ている可能性があるため、サンプリング数でフィルターをかけるか、 異常値の除去も実施したほうが良いかもしれません。

サーバーの応答速度を取得してヒストグラムを表示する

サーバーの応答速度を取得してヒストグラムを表示します。
ga:serverResponseTime、ga:avgServerResponseTime、ga:speedMetricsSample を取得し、ヒストグラム表示には、ga:avgServerResponseTime を使用します。

from google2pandas import *
view_id = '103185238'
query = {
    'reportRequests': [{
        'viewId' : view_id,
        'dateRanges': [{
            'startDate' : '30daysAgo',
            'endDate'   : 'today'}],
        'dimensions' : [
            {'name' : 'ga:pagePath'}      
        ],
        'metrics'   : [
            {'expression' : 'ga:serverResponseTime'},
            {'expression' : 'ga:speedMetricsSample'},
            {'expression' : 'ga:avgServerResponseTime'},        
        ],
    }]
}
conn = GoogleAnalyticsQueryV4(secrets='./ga_client.json')
df = conn.execute_query(query)
df['avgServerResponseTime'].astype(float).hist(bins=50)


<AxesSubplot:>

Image from Gyazo

サーバーの応答時間を取得して、パフォーマンスが悪い上位10%のページを取得する

from google2pandas import *
view_id = '103185238'
query = {
    'reportRequests': [{
        'viewId' : view_id,
        'dateRanges': [{
            'startDate' : '30daysAgo',
            'endDate'   : 'today'}],
        'dimensions' : [
            {'name' : 'ga:pagePath'}      
        ],
        'metrics'   : [
            {'expression' : 'ga:serverResponseTime'},
            {'expression' : 'ga:speedMetricsSample'},
            {'expression' : 'ga:avgServerResponseTime'},        
        ],
    }]
}
conn = GoogleAnalyticsQueryV4(secrets='./ga_client.json')
df = conn.execute_query(query)
df['avgServerResponseTime'] = df['avgServerResponseTime'].astype(float)
df = df.sort_values(by='avgServerResponseTime', ascending=False)
df[df['avgServerResponseTime']>=df['avgServerResponseTime'].quantile(0.9)]

pagePathserverResponseTimespeedMetricsSampleavgServerResponseTime
7/blog/About-checklists-used-in-system-developm...81910.819
2/amp/blog/java-url文字列からクエリストリングを取得/81610.816
39/blog/lighthouse-pwa-警告-の対処-する/72610.726
58/blog/spring-boot-でapplication-起動時にorgspringfr...70010.700
4/amp/blog/pythonで相関係数の計算をする/68010.680
38/blog/jpa-query-selecting-only-specific-columns/62510.625
42/blog/monitorevents-で-input-タグの発生イベントを監視する/169530.565

データを見る限り言えそうなこと

データをみる限り以下のことが言えそうです。

  • ページ読み込み速度と、サーバーの応答速度だと、速度分布の傾向が異なる。
  • サーバーの応答速度が遅いページがそのまま、読み込み速度が遅いページになる訳ではない。

参考

以下のページが参考になりました。

以上です。

コメント

カテゴリー

最近の投稿