首頁>建站資源>網站數據
下載

Autowebperf（AWP）

Autowebperf提供了一個靈活且可擴展的框架，用於使用WebPagetest和Pages -Peedinsights（PagesPeedInsights）的任意審核工具運行Web性能審核。該庫使開發人員能夠始終如一地收集指標，並將指標存儲到首選的數據存儲中，例如本地JSON文件，Google表，BigQuery或內部SQL數據庫。

查看https://web.dev/autowebperf進行介紹。

它如何工作

Autowebperf從任意數據存儲平台中獲取測試列表，例如本地JSON，Google Sheets，BigQuery或自託管SQL數據庫。通過測試列表，它根據每種測試配置執行審核，將各個數據源的指標收集到結果列表中。

通過測量工具（例如WebPagetest）進行審核的過程是在單個Gainter中定義的。使用數據平台（例如本地JSON）讀取和寫作的邏輯是在連接器中實現的。

功能亮點

  • 可以插入任何平台的Web審核自動化庫，例如Google Sheeets，GCP App Engine或僅將其寫入JSON文件的CRON作業。
  • 提供具有可自定義頻率（例如每日，每週，每月等），網絡條件和其他審核配置等的重複測試的能力。
  • 公制收集器被設計為與輸出數據格式和自動化邏輯分離的模塊。
  • 連接器模塊旨在讀取測試列表並將審核結果寫入特定的數據格式或平台。例如，CSV文件的連接器。 （有關詳細信息，請參見src/connectors/csv-connector ）

這與Google的其餘速度測量工具相比如何？

Autowebperf充當性能審核聚合器，通過多種速度測量工具（包括WebPagetest，Pages -Pages -Peedinsights和Chrome UX報告）自動化性能審核和指標的過程。當每個單獨的速度測量工具提供審核指標時，Autowebperf匯總了結果並將其寫入任何首選的數據存儲平台，例如本地JSON，基於雲的數據庫或GoogleSheets。

Quickstart

首先，克隆AWP回購併運行NPM安裝： 

 git clone https://github.com/GoogleChromeLabs/AutoWebPerf.git
npm install

完成後，通過以下命令運行單個測試來檢查安裝： 

 ./awp run examples/tests.json output/results.json

此命令使用examples/tests.json中的示例文件，並將結果返回到output/results.json 。

要開始重複進行測試，您需要在測試文件中包含一個recurring.frequency屬性，並在測試文件中設置下一個觸發器。要設置下一個觸發時間並運行一次性測試，請在添加recurring.frequency屬性後使用此命令： 

 ./awp recurring examples/tests-recurring.json output/results.json

如果成功的話，觸發時間將對您選擇的頻率進行更新，並且結果將被寫入output/results.json 。

一旦正確設置了觸發時間，您就可以在下一個triger時間內使用continue命令進行測試自動運行： 

 ./awp continue examples/tests-recurring.json output/results.json

這將自動以指定的頻率運行每個測試。請參見下面的“運行重複測試”部分的更多信息。

更多例子

單個URL：通過PagesPeedInsights測試單個URL： 

 ./awp run url:https://www.thinkwithgoogle.com/ json:output/results.json

選擇Galether：測試一個帶有特定收集者（例如PagesPeedInsights或WebPagetest）的URL： 

 ./awp run --gatherers=psi url:https://web.dev json:output/results.json

CSV文件：運行在CSV文件中定義的測試並將結果寫入JSON文件： 

 ./awp run csv:examples/tests.csv json:output/results.json

PAGESPEEDINSIGHTS API：使用API​​密鑰運行PagesPeedInsights測試： 

 PSI_APIKEY=SAMPLE_KEY ./awp run examples/tests.json output/results.json

WebPagetest API：運行WebPagetest測試： 

 WPT_APIKEY=SAMPLE_KEY ./awp run examples/tests-wpt.json output/results.json

覆蓋與附加：要在輸出文件中運行測試並覆蓋現有結果

 ./awp run examples/tests.json output/results.json --override-results

可用的收集者：

  • WebPagetest-有關詳細信息，請參見DOCS/WEBPAGETEST.MD。
  • PagesPeed Insights-有關詳細信息，請參見DOCS/PSI.MD。
  • Chrome UX報告API-有關詳細信息，請參見DOCS/CRUXAPI.MD。
  • Chrome UX報告BigQuery-有關詳細信息，請參見Docs/Cruxbigquery.md。

可用連接器：

  • JSON連接器 - 讀取或寫入本地JSON文件。如果未指定conenctor名稱，這是默認連接器。例如： 
 ./awp run examples/tests.json output/results.json

另外，要指定使用JSON連接器進行Tests路徑和Results路徑： 

 ./awp run json:/examples/tests.json json:output/results.json
  • CSV連接器 - 讀取或寫入本地CSV文件。要使用CSV連接器進行Tests路徑和Results路徑： 
 ./awp run csv:/examples/tests.csv csv:output/results.csv
  • URL連接器 - 僅生成一個帶有特定URL審核的Test 。僅使用一個特定URL的一個Test進行審核： 
 ./awp run url:https://example.com csv:output/results.csv

請注意，此連接器僅適用於Tests路徑，而不是Results路徑。

  • 有關詳細的指導，Google Shees Connector Connector請參閱Docs/Sheets-connector.md。

將AWP與節點CLI一起使用

運行測試

您可以隨時運行以下打印CLI用法： 

 ./awp --help

要運行測試，您可以使用給定的測試JSON運行以下CLI命令，例如examples/tests.json ，其中包含一系列測試。您可以查看examples/tests.json測試數據結構。 

 ./awp run examples/tests.json output/results.json

這將在給定的results.json路徑中生成結果對象。

默認情況下，AWP將使用JSON作為閱讀測試和寫作結果的默認連接器。另外，您可以以<connector>:<path> 。

例如，運行在CSV中定義的測試並在JSON中寫入結果： 

 ./awp run csv:examples/tests.csv json:output/results.csv

檢索測試結果

對於某些審核平台，例如WebPagetest，每個測試可能需要幾分鐘才能獲取實際結果。對於這些類型的異步審核，每個結果都將保持在“提交”狀態。您需要以後明確檢索結果。

運行以下內容以檢索results.json中結果的最終指標。 

 ./awp retrieve examples/tests.json output/results.json

這將獲取所有審核平台的指標，並在output/results.json中更新結果對象。您可以查看examples/results.json有關結果對像中的詳細信息。

運行重複測試

如果您想設置重複的測試，則可以定義包含該測試frequency的recurring對象。 

 ./awp recurring examples/tests-recurring.json output/results.json

這將在results.json中生成結果對象tests.json例如，更新的測試對像看起來如下，並帶有更新的nextTriggerTimestamp 。 

 {
  "label": "web.dev",
  "url": "https://web.dev",
  "recurring": {
    "frequency": "Daily",
    "nextTriggerTimestamp": 1599692305567,
    "activatedFrequency": "Daily"
  },
  "psi": {
    "settings": {
      "locale": "en-GB",
      "strategy": "mobile"
    }
  }
}

nextTriggerTimestamp將根據以前的時間戳更新到第二天。這是為了防止相同的測試重複運行，並確保該測試每天僅執行一次。

設置Cron工作以進行重複測試

在大多數UNIX式操作系統中，您可以設置一個CRON作業以定期運行AWP CLI。

例如，在MacOS中，您可以運行以下命令來通過AWP設置每日CRON作業： 

 # Edit the cronjob with a text editor.
EDITOR=nano crontab -e

將以下行添加到crontab中，以在中午12:00進行每日跑步。請注意，這是基於運行AWP的系統時間。 

 0 12 * * * PSI_APIKEY=SAMPLE_KEY cd ~/workspace/awp && ./awp run examples/tests.json csv:output/results-recurring.csv

運行擴展測試

擴展程序是一個模塊，可幫助AWP通過其他過程和計算運行測試。例如， budgets擴展可以添加績效預算併計算目標和結果指標之間的三角洲。

運行擴展： 

 ./awp run examples/tests.json output/results.json --extensions=budgets

測試和結果

定義測試

測試列表只是一系列測試對象，例如以下樣本測試。或查看src/examples/tests.js以獲取測試列表的詳細示例。 

 [{
  "label": "Test-1",
  "url": "example1.com",
  "webpagetest": {
    ...
  }
}, {
  "label": "Test-2",
  "url": "example2.com",
  "psi": {
    ...
  }
}]

每個Test對像都定義了通過定義gatherers屬性進行的審核。例如，第一個Test具有webpagetest屬性，該屬性定義了運行WebPagetest審核的配置。第二個Test具有psi屬性，該屬性定義瞭如何運行PagesSpeedInsights審核。

生成結果

運行測試後，如下所示， Results列表。每個Result都包含其相應的指標與預定義的gatherers ，例如WebPagetest和Pages -PeedInsights。請參見下面的示例。 

 [{
  "label": "Test-1",
  "url": "example1.com",
  "webpagetest": {
    "metrics": {
      FirstContentfulPaint: 900,
      ...
    }
  }  
}, {
  "label": "Test-2",
  "url": "example2.com",
  "psi": {
    "metrics": {
      FirstContentfulPaint: 900,
      ...
    }
  }  
}]

環境變量

一些連接器或收集者可能需要一個或多個環境變量，例如API鍵或服務帳戶的途徑。例如，使用CRUX API收集器運行需要CRUX API鍵。

要通過CLI中的環境變量，請使用環境的常規使用var運行命令： 

 CRUX_APIKEY=<YOUR_KEY> ./awp run url:https://wev.dev/ json:output/results.json

收集者

AWP支持以下審計收集者。請查看相應的文檔以獲取詳細信息。

WebPagetest

WebPagetest Gatherer通過公共WebPagetest端點或自定義的私有WebPagetest實例運行測試。

有關使用WebPagetest Gatherer的更多詳細信息，請參見DOCS/WEBPAGETEST.MD。

PagesPeed Insights

PagesPeed Insights Chapterer通過公共PagesPeed Insights API進行測試。

有關PSI Gatherer使用的更多詳細信息，請參見Docs/PSI.MD。

Chrome UX報告API（CRUX API）

CRUX API收集者通過Chrome UX報告API收集性能指標。

有關使用CRUX API收集者的更多詳細信息，請參見Docs/Cruxapi.md。

Chrome UX報告歷史（通過BigQuery的關鍵）

Crux BigQuery Gatherer通過其公共Google BigQuery項目通過Chrome UX報告收集性能指標。請否您需要設置一個Google Cloud項目才能查詢公共BigQuery表。

有關使用CRUX API GATHICER的更多詳細信息，請參見Docs/Cruxbigquery.md。

設計

AWP採用模塊設計，包括用於使用WebPagetest，Pages -PeedInsights或其他工具進行審核的模塊，以及用於從JSON，Googlesheets或Cloud Service等數據平台讀取/編寫數據的模塊。

在高級視圖中，有三種模塊：

  • 收集者- 收集者進行審核並生成指標。
  • 連接器- 連接器將讀取測試配置並將結果寫入數據平台，例如本地JSON文件或Google表格。
  • 擴展名- 擴展名在運行審核之前或之後添加了其他指標或信息。

AWP引擎使用兩個主要的JavaScript對象結構來運行審核和收集指標。

  • 測試- 一個包含一個測試任務的審核配置的對象，例如URL，審計方法或擴展配置。您可以參考examples/tests.json的實際測試對象。
  • 結果- 包含審核配置，指標和整體狀態的對象。您可以參考examples/results.json 。

審核步驟

為了處理諸如WebPagetest之類的異步審核工具，AWP將審核週期分為動作的三個步驟：

  • 運行- 此操作獲取Tests列表，並生成Results對象的列表。
  • 重複出現- 類似於運行，此操作採用了Tests列表，生成Results列表，並為每個重複Test更新NextTriggerTimestamp。當使用定期或基於計時器的任務（例如Cron Job）運行時，此操作很有用。
  • 檢索- 此操作掃描結果列表，並在結果未Retrieved到狀態時收集指標。

AWP配置

要設置模塊及其配置，需要作為JavaScript對象進行整體AWP配置。

AWP配置具有以下所需屬性：

  • connector ：連接器的名稱。
  • helper ：特定連接器的助手，包括API處理程序和其他助手功能，將用於收集器和擴展。
  • dataSources ：一系列審核源，例如webpagetest或psi 。每個數據源都需要在src/gatherers文件夾中具有相應的Gatherer文件。
  • extensions ：一系列擴展。每個擴展名都需要在src/extensions中具有相應的擴展文件。

其他可選屬性：

  • verbose ：是否打印詳細消息。
  • debug ：是否打印調試消息。

以下配置示例來自examples/awp-config.js ： 

 {
  connector: 'JSON',
  helper: 'Node',
  dataSources: ['webpagetest'],
  json: { // Config for JSON Connector.
    tests: 'tests.json',
    results: 'results.json',
  },
  extensions: [
    'budgets',
  ],
  budgets: { // Config for Budgets extension.
    dataSource: 'webpagetest',
  },
  verbose: true,
  debug: false,
}

使用上面的示例配置，它將使用JSON連接器，該連接器將讀取和寫入測試和結果作為JSON文件。請參閱examples/tests.json和examples/results.json 。

除了基本屬性外，模塊還使用了一些其他屬性：

  • json屬性作為JSONCONNECTOR的配置。
  • budgets財產作為預算發行的配置

使用Autowebperf Core

創建AWP新實例的示例： 

 let awp = new AutoWebPerf({
  connector: 'JSON',
  helper: 'Node',
  dataSources: ['webpagetest'],
  extensions: extensions,
  json: { // Config for JSON connector.
    tests: argv['tests'],
    results: argv['results'],
  },
  verbose: verbose,
  debug: debug,
});

提交所有測試： 

 awp.run();

要使用過濾器提交特定的測試：這將運行具有ID = 1並選擇= True屬性的測試。 

 awp.run({
  filters: ['id="1"', 'selected'],
});

要檢索所有待處理結果，請用狀態過濾！ ==“檢索”。 

 awp.retrieve({
  filters: ['status!=="Retrieved"'],
});
  • 有關圖案縮寫器的更高級用法，請查看提供更多示例的src/utils/pattern-filter.js 。

進行重複測試： 

 // This will run the actual audit and update the nextTriggerTimestamp.
awp.recurring();

進行特定擴展的測試： 

 // This will override the extension list defined in the awpConfig.
awp.run({
  extensions: ['budgets']
})

收集者模塊

GATHERER類擴展了src/gatherers/gatherer.js並覆蓋以下方法：

  • constructor(config, apiHelper, options) ：

    • config ：在屬性中定義的配置，並在AWP配置中使用此Gainterer的名稱。一些審核工具（例如WebPagetest或Pages -PeedInsights）需要API鍵。 GATHERER的API密鑰位於config.apiKey中。
    • options ：其他設置，例如verbose和debug 。

  • run(test, options) ：

    • test ：此審核運行的Test對象。該收集者所需的數據（例如設置或元數據）將以收集者的名字在屬性中。例如，WebPagetest的數據將在此Test對象的webpagetest中。
    • options ：其他設置。

  • retrieve(result, options) ：

    • result ：使用指標的Result對象。此Gatherer所需的數據將以收集者的名字列入該物業。例如，數據和指標將在此Result對象的webpagetest中。
    • options ：其他設置，例如verbose和debug 。

連接器模塊

連接器類擴展src/connectors/connector.js並覆蓋以下方法：

  • constructor(config, apiHandler) ：

    • config ：在AWP配置中使用此連接器名稱的屬性定義的配置。
    • apiHandler ：用於撥打API調用的API處理程序實例。

  • getConfig() ：返回連接器的附加配置對象的方法。此配置對象取決於此連接器在哪裡存儲其其他設置，包括用於收集器的API鍵。例如，JSONCONNECTOR使用tests.json ，並從config屬性中讀取其他設置，包括每個Gainterers的API鍵。

  • getTestList(options) ：返回Tests列表作為數組的方法。

  • updateTestList(newTests, options) ：給定Tests列表，更新Tests列表的方法。

  • getResultList(options) ：返回Results列表作為數組的方法。

  • appendResultList(newResults, options) ：將新Results附加到當前Results列表末尾的方法。

  • updateResultList(newResults, options) ：更新當前Results列表中現有Results的方法。

擴展模塊

擴展類擴展src/extensions/extension.js並覆蓋以下方法：

  • constructor(config) ：
    • config ：在屬性中定義的配置，並在AWP配置中使用此擴展名稱。
  • beforeRun(context) ：執行Test運行步驟之前的方法。
    • context.test ：相應的Test對象。
  • afterRun(context) ：執行Test的運行步驟後的方法。
    • context.test ：相應的Test對象。
    • context.result ：相應的Result對象。
  • beforeAllRuns(context) ：執行運行步驟之前的方法。
    • context.tests ：此運行中的所有Test對象。
  • afterAllRuns(context) ：執行運行步驟後的方法。
    • context.tests ：此運行中的所有Test對象。
    • context.results ：此運行中的所有Result對象。
  • beforeRetrieve(context) ：執行Result檢索步驟之前的方法。
    • context.result ：相應的Result對象。
  • afterRetrieve(context) ：執行Result的方法後的方法。
    • context.result ：相應的Result對象。
  • beforeAllRetrieves(context) ：執行檢索步驟之前的方法。
    • context.result ：相應的Result對象。
  • afterAllRetrieves(context) ：執行檢索步驟後的方法。
    • context.result ：相應的Result對象。

測試對象

標準Test對象包含以下屬性：

（您可以參考examples/tests.json 。）

  • selected ：是否要執行此Test 。
  • label ：此Test的名稱。
  • url ：URL審計。
  • recurring ：重複審核的設置。
    • frequency ： src/common/frequency.js中定義的頻率字符串。例如“每日”，“每週”或“每月”。

在較低的情況下，特定於Gatherer的設置將以收集者的名字列為自己的財產。例如， WebPagetests的設置將是：

  • webpagetest
    • settings ：設置對象包含審核位置，連接等。
    • metadata ：元數據對象包含WebPagetests的ID，JSON URL等。

結果對象

標準Result對象包含以下屬性：

  • selected ：是否為此Result進行檢索。
  • id ：為此Result自動生成的獨特ID。
  • type ： Single或Recurring審核。
  • status ： Submitted ， Retrieved或Error 。有關詳細信息，請參閱src/common/status.js 。
  • label ：此Result的字符串標籤。該標籤從其原始Test對象繼承。
  • url ：審核的URL。
  • createdTimestamp ：創建此Result時。
  • modifiedTimestamp ：最後修改此Result時。

標準化指標

AWP中使用的所有公制名稱都需要遵循名稱敏感的名稱。請參閱src/common/metrics.js中標準化指標的完整列表

  • 定時指標

    • TimeToFirstByte
    • FirstPaint
    • FirstMeaningfulPaint
    • FirstContentfulPaint
    • VisualComplete
    • SpeedIndex
    • DOMContentLoaded
    • LoadEvent
    • TimeToInteractive
    • TotalBlockingTime
    • FirstCPUIdle
    • FirstInputDelay
    • LargestContentfulPaint

  • 資源大小

    • HTML
    • Javascript
    • CSS
    • Fonts
    • Images
    • Videos

  • 資源計數

    • DOMElements
    • Connections
    • Requests

  • 資源分數

    • Performance
    • ProgressiveWebApp

源文件夾結構

主要功能的所有源代碼都位於src文件夾中。文件被組織到以下子文件夾中：

  • common ：常見的類和定義，例如狀態，頻率，指標等。
  • connectors ：連接器類。
  • extensions ：擴展類。
  • gatherers ：收集者課。
  • utils ：實用程序和工具。

單位測試

運行以下命令運行單元測試： 

 npm test

要運行單個測試規格，您可以將Jest NPM模塊安裝到本地計算機： 

 npm install -g jest
jest test/some-module.test.js

單位測試設計

單元測試基於開玩笑的單位測試框架。所有單元測試均位於./test文件夾中，並將其組織到其自己的相應子文件夾中，與src文件夾中的結構相同。

展開
附加信息
相關應用
爲您推薦
相關資訊 全部