lighthouse pwmetrics を使ってみる

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

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

[TOC]

Lighthouse pwmetrics とは

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

インストール

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

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

3回測定を実行

Command
--runs=n で n回計測になります。
```
pwmetrics https://www.monotalk.xyz --runs=3
```
Output
3回測定した、平均値が出力されます。

測定結果を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 スプレッドシートに結果を書き込むには、以下、手順を踏めばできそうです。

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

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

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

2. スプレッドシートの ID をコピーして、pwmetrics-config.js の sheets.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 Developers に this wizard というリンクがありますが、このリンクをクリックしていくと、認証キーの発行画面に飛べます。

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

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

trace と記述されてました ↩

lighthouse pwmetrics を使ってみる

Lighthouse pwmetrics とは

インストール

使い方

オプションなし通常実行

3回測定を実行

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

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

設定後に pwmetrics を実行する

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

コメント

カテゴリー

最近の投稿

Lighthouse pwmetrics とは

インストール

使い方

オプションなし通常実行

3回測定を実行

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

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

設定後に pwmetrics を実行する

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

コメント

カテゴリー

関連投稿

最近の投稿