lighthouse pwmetrics を使ってみる


GoogleChrome/lighthouse: Auditing, performance metrics, and best practices for Progressive Web Apps に 関連プロジェクトとして、幾つかのプロジェクトがあります。

この中の、paulirish/pwmetrics: Progressive web metrics at your fingertipz に興味を持ちましたので使ってみます。


Lighthouse pwmetrics とは

lighthouse の結果を console 上でグラフィカルに閲覧できるツールです。
ドキュメントを読む限り、Google スプレッドシートに記録できたり、Google ドライブに 計測結果 を保存できたりするみたいです。1


インストール

npm install -g yarn

CLI で実行したいので、global インストールします。

yarn global add pwmetrics


使い方

README.md を少しトレースします。

オプションなし通常実行

  • Command

    pwmetrics https://www.monotalk.xyz
    

  • Output
    コンソール上にグラフが出力され、指標として以下が表示されます。

    • Time to Consistently Interactive (vBeta)
    • First Interactive (vBeta)
    • First Meaningful Paint
    • First Contentful Paint

"オプションなし通常実行 Output"各指標の意味については、以下の記事が参考になりました。
Web クライアントサイドのパフォーマンスメトリクス — Speed Index、Paint Timing、TTI etc… ::ハブろぐ

3回測定を実行

  • Command
    --runs=n で n回計測になります。

    pwmetrics https://www.monotalk.xyz --runs=3
    

  • Output
    3回測定した、平均値が出力されます。
    "3回測定を実行 Output"

測定結果をJSON形式で出力する

  • Command --json をつけると測定結果が JSON 形式で出力できます。

    pwmetrics https://www.monotalk.xyz/ --json
    

  • Output

    Launching Chrome
       Success: Run 1 of 1 finished successfully.
    {
      "runs": [
        {
          "timings": [
            {
              "title": "First Contentful Paint",
              "id": "ttfcp",
              "timestamp": 1717590041,
              "timing": 1620.424,
              "color": "green"
            },
            {
              "title": "First Meaningful Paint",
              "id": "ttfmp",
              "timestamp": 1717590041,
              "timing": 1620.424,
              "color": "green"
            },
            {
              "title": "Perceptual Speed Index",
              "id": "psi",
              "timestamp": 1718506565,
              "timing": 2536.948,
              "color": "blue"
            },
            {
              "title": "First Visual Change",
              "id": "fv",
              "timestamp": 1718505617,
              "timing": 2536,
              "color": "blue"
            },
            {
              "title": "Visually Complete 85%",
              "id": "vc85",
              "timestamp": 1718506565,
              "timing": 2536.948,
              "color": "blue"
            },
            {
              "title": "Visually Complete 100%",
              "id": "vc100",
              "timestamp": 1718505617,
              "timing": 2536,
              "color": "blue"
            },
            {
              "title": "First Interactive (vBeta)",
              "id": "ttfi",
              "timestamp": 1719493952,
              "timing": 3524.335,
              "color": "yellow"
            },
            {
              "title": "Time to Consistently Interactive (vBeta)",
              "id": "ttci",
              "timestamp": 1719493952,
              "timing": 3524.335,
              "color": "yellow"
            }
          ],
          "timestamps": [
            {
              "title": "Navigation Start",
              "id": "navstart",
              "timestamp": 1715969617
            }
          ],
          "generatedTime": "2017-12-18T21:23:10.370Z",
          "lighthouseVersion": "2.7.0",
          "initialUrl": "https://www.monotalk.xyz/",
          "url": "https://www.monotalk.xyz/"
        }
      ]
    }
    


Google スプレッドシートに測定結果を書き込む際の設定

pwmetrics/readme.md at master · paulirish/pwmetrics を見る限り、Google スプレッドシートに結果を書き込むには、以下、手順を踏めばできそうです。

  1. スプレッドシートのテンプレートをコピーする
  2. スプレッドシートの ID をコピーして、pwmetrics-config.jssheets.options.spreadsheetId に ID を設定する
  3. Google Developer Console から、キー を 取得する
  4. キー の client_secret を pwmetrics-config.js に設定する

以下それぞれ手順を説明します。

1. スプレッドシートのテンプレートをコピーする
readme.md に記載されているリンクから、スプレッドシートに辿りつけますので、対象のスプレッドシートをコピーします。

2. スプレッドシートの ID をコピーして、pwmetrics-config.jssheets.options.spreadsheetId に ID を設定する
以下のような pwmetrics-config.js を作成しました。

module.exports = {
  url: 'http://www.monotalk.xyz/',
  flags: { // AKA feature flags
    runs: '3', // 測定回数
    submit: true, // スプレッドシートに書き込むだけならここをtrue
    upload: false // これをtrueにすると、Google Drive 上に json ファイルがアップロードされます。
  },
  sheets: {
    type: 'GOOGLE_SHEETS', // sheets service type. Available types: GOOGLE_SHEETS
    options: {
      spreadsheetId: 'your_spreadsheetId', // ここにはスプレッドシートIDを記載
      tableName: 'data' // テンプレートを使うと、書き込み先シート名は変えなくてOK
    }
  },
  clientSecret: {
    // ここは取得した client_id.json の中身を転記すればOK
  }
}

3. Google Developer Console から、キー を 取得する
OAuth 2 認証 の キー を取得する必要があります。
Node.js Quickstart  |  Drive REST API  |  Google Developersthis wizard というリンクがありますが、このリンクをクリックしていくと、認証キーの発行画面に飛べます。

4. キー の client_secret を pwmetrics-config.js に設定する
3. のキーを pwmetrics-config.jsclientSecret に 設定します。

以上で、pwmetrics-config.js の設定は完了です。


設定後に pwmetrics を実行する

pwmetrics-config.js ができたら、--config を指定して、pwmetrics を実行します。

  • Command

    pwmetrics --config=pwmetrics-config.js
    

  • 初回起動時のメッセージ
    初回起動時は、OAuth2 の コードを入力する必要があり、以下のようなメッセージが表示されます。

    Launching Chrome
    Uploading trace to Google Drive...
    Authorize this app by visiting this url: https://accounts.google.com/o/oauth2/auth?access_type=offline....
    Enter the code from that page here: 
    

  • Google スプレッドシートにアクセス権がなかった場合のメッセージ
    私の発行したキーは Google Drive のアクセス権だけをつけたので、スプレッドシートへの書き込みの際に以下のエラーが発生していました。

    The API returned an error: Error: Google Sheets API has not been used in project xxxxxxxxxxxxx before or it is disabled. Enable it by visiting https://console.developers.google.com/apis/api/sheets.googleapis.com/overview?project=xxxxxxxxxxxxx then retry. If you enabled this API recently, wait a few minutes for the action to propagate to our systems and retry.
    Error: Error: Google Sheets API has not been used in project xxxxxxxxxxxxx before or it is disabled. Enable it by visiting https://console.developers.google.com/apis/api/sheets.googleapis.com/overview?project=xxxxxxxxxxxxxx then retry. If you enabled this API recently, wait a few minutes for the action to propagate to our systems and retry.
        at Object.<anonymous> (/Users/xxxxxxxxxxxx/.config/yarn/global/node_modules/pwmetrics/lib/sheets/gsheets.js:60:19)
        at Generator.throw (<anonymous>)
        at rejected (/Users/xxxxxxxxxx/.config/yarn/global/node_modules/pwmetrics/lib/sheets/gsheets.js:7:65)
        at <anonymous>
        at process._tickCallback (internal/process/next_tick.js:188:7)
    
    メッセージに含まれる https://console.developers.google.com/apis/api/sheets.googleapis.com/overview?project=xxxxxxxxxxxxxx にアクセスすると、Google スプレッドシート API 権限を付与することができます。

  • 正常終了時
    3回測定され、測定結果がスプレッドシートに書き込まれます。

    % pwmetrics --config=pwmetrics-config.js
    Launching Chrome
      ✓ Success: Run 1 of 3 finished successfully.
    Launching Chrome
      ✓ Success: Run 2 of 3 finished successfully.
    Launching Chrome
      ✓ Success: Run 3 of 3 finished successfully.
    Appending...
    2018.436  2018.436  3214.0139999980925  3214  3214  4150.379  4150.379  3214.0139999980925
    1952.018  1952.018  3106.813  3105.999999998093 3105.999999998093 4303.783  4303.782999998092 3106.813
    1960.176  1960.177  3013.5169999980926  3013.000000001907 3013.000000001907 4096.176  4096.176  3013.5169999980926
    
    Appended
    2018.436  2018.436  3214.014  3214  3214  4150.379  4150.379  3214.014
    1952.018  1952.018  3106.813  3106  3106  4303.783  4303.783  3106.813
    1960.176  1960.177  3013.517  3013  3013  4096.176  4096.176  3013.517
    


スプレッドシートの記録結果

テンプレートには、記録用の表(data)と、グラフ(Chart)の2シートがあります。
以下、記録後のイメージを貼り付けます。

  • 複数回実行後のスプレッドシートの内容
    測定結果

  • グラフ表示結果
    グラフ

対象画面を 1 画面しか設定できなさそうですが、グラフの生成までしてくれるので、とりあえず測ってみる用途に使用するには調度よいのかもしれません。
以上です。


  1. trace と記述されてました 

コメント