Zenn
Closed4

AutoWebPerfを試してみる

Google
パフォーマンス
Kentaro MatsushitaKentaro Matsushita

AutoWebPerfはWebPageTestやPageSpeedInsightなどWebサイトパフォーマンスの測定ツールを使用して、パフォーマンスを計測し、その結果をGoogle SpreadsheetやBigQueryなど任意のデータストアプラットフォームに書き込む。

Kentaro MatsushitaKentaro Matsushita

クイックスタートを試してみる

❯ ghq get git@github.com:GoogleChromeLabs/AutoWebPerf.git
     clone ssh://git@github.com/GoogleChromeLabs/AutoWebPerf.git -> /Users/kentarom/workspace/github.com/GoogleChromeLabs/AutoWebPerf
       git clone --recursive ssh://git@github.com/GoogleChromeLabs/AutoWebPerf.git /Users/kentarom/workspace/github.com/GoogleChromeLabs/AutoWebPerf
Cloning into '/Users/kentarom/workspace/github.com/GoogleChromeLabs/AutoWebPerf'...
remote: Enumerating objects: 69, done.
remote: Counting objects: 100% (69/69), done.
remote: Compressing objects: 100% (52/52), done.
remote: Total 2156 (delta 25), reused 37 (delta 17), pack-reused 2087
Receiving objects: 100% (2156/2156), 1.35 MiB | 1.22 MiB/s, done.
Resolving deltas: 100% (1502/1502), done.

~/workspace/github.com/GoogleChromeLabs/AutoWebPerf on stable took 3s
❯ npm install
added 783 packages from 421 contributors and audited 784 packages in 13.143s

18 packages are looking for funding
  run `npm fund` for details

found 2 high severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

~/workspace/github.com/GoogleChromeLabs/AutoWebPerf on stable [!]
❯ ./awp run examples/tests.json output/results.json
Run with 1 test(s)
Run completed for 1 tests.

テスト内容はJSON形式 ( examples/test.json ) で記載する。サンプルではweb.devに対して、PageSpeed Insightを実行している。

{
  "tests": [
    {
      "label": "web.dev",
      "url": "https://web.dev",
      "gatherer": "psi"
    }
  ]
}

結果は JSON形式 ( output/results.json ) で出力される。出力フォーマットはコネクタと呼ばれるもので制御することができ、デフォルトではJSONコネクタが利用される。他にはCSVやGoogle Spreadsheetなどのコネクタがある。

{
  "results": [
    {
      "id": "1610774954901-https://web.dev",
      "type": "Single",
      "gatherer": "psi",
      "status": "Retrieved",
      "label": "web.dev",
      "createdTimestamp": 1610774954901,
      "modifiedTimestamp": 1610774954901,
      "errors": [],
      "url": "https://web.dev",
      "psi": {
        "status": "Retrieved",
        "statusText": "Success",
        "settings": {},
        "metadata": {
          "testId": "https://web.dev/",
          "requestedUrl": "https://web.dev/",
          "finalUrl": "https://web.dev/",
          "lighthouseVersion": "6.3.0",
          "userAgent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/85.0.4183.140 Safari/537.36",
          "fetchTime": "2021-01-16T05:29:16.333Z"
        },
        "metrics": {
          "RenderBlockingResources": 0,
          "crux": {
            "LargestContentfulPaint": {
              "category": "AVERAGE",
              "percentile": 2520,
              "good": 0.7518407731247178,
              "ni": 0.16417395306028654,
              "poor": 0.0839852738150032
            },
            "FirstInputDelay": {
              "category": "FAST",
              "percentile": 17,
              "good": 0.9412043622569954,
              "ni": 0.040777619724988216,
              "poor": 0.018018018018017945
            },
            "FirstContentfulPaint": {
              "category": "AVERAGE",
              "percentile": 2573,
              "good": 0.1748989672204776,
              "ni": 0.6472833408172488,
              "poor": 0.17781769196228453
            },
            "CumulativeLayoutShift": {
              "category": "FAST",
              "percentile": 3,
              "good": 0.7865468674113648,
              "ni": 0.07406508013598835,
              "poor": 0.13938805245264674
            }
          },
          "lighthouse": {
            "FirstContentfulPaint": 1440,
            "FirstMeaningfulPaint": 1700,
            "LargestContentfulPaint": 3346.4179310772934,
            "SpeedIndex": 2579,
            "TimeToInteractive": 5565,
            "FirstCPUIdle": 4160,
            "FirstInputDelay": 13,
            "TotalBlockingTime": 86,
            "CumulativeLayoutShift": 0,
            "TotalSize": 392,
            "HTML": 6,
            "Javascript": 140,
            "CSS": 25,
            "Fonts": 74,
            "Images": 135,
            "Medias": 0,
            "ThirdParty": 202,
            "UnusedCSS": 21,
            "WebPImages": 0,
            "OptimizedImages": 0,
            "ResponsiveImages": 0,
            "OffscreenImages": 0,
            "DOMElements": 307,
            "Performance": 0.87,
            "ProgressiveWebApp": 1,
            "Manifest": 1,
            "ServiceWorker": 1,
            "Offline": 1,
            "Accessibility": 1,
            "SEO": 0.99,
            "BestPractices": 1
          }
        },
        "errors": []
      }
    }
  ]
}
Kentaro MatsushitaKentaro Matsushita

テストで gatherer を変更することで、使用する測定ツールを変更することができる。

  • WebPageTest
  • PageSpeed Insights
  • Chrome UX Report API (CrUX API)
  • Chrome UX Report History (CrUX via BigQuery)

gatherer によって、設定するパラメーターが異なる。また、実行時にAPIキーを与えないと動作しないものがある。

このスクラップは2021/02/20にクローズされました