使用 AutoWebPerf 自動進行稽核

全新模組化工具,可自動收集來自多個來源的效能資料。

Gilberto Cocchi
Gilberto Cocchi

什麼是 AutoWebPerf (AWP)?

AutoWebPerf (AWP) 是一項模組化工具,可自動收集來自多個來源的成效資料。目前有許多工具可用來評估網站在不同範圍 (實驗室和實地) 的效能,例如 Chrome 使用者體驗報告、PageSpeed Insights 或 WebPageTest。AWP 可整合各種稽核工具,並提供簡單的設定方式,讓您在同一個地方持續監控網站成效。

發布網站體驗指標指南,意味著關閉網頁並積極監控網頁的重要性與日俱增。這項工具的工程師團隊多年以來一直在進行效能稽核,他們開發出 AWP,以便自動執行手動、重複且耗時的日常活動。目前,AWP 已達到一定成熟度,可以廣泛分享,讓所有人都可從自動化功能中獲益。

您可以在 GitHub 的 AutoWebPerf 公開存放區中使用這項工具。

AWP 是什麼?

雖然有多種工具和 API 可用來監控網頁的效能,但大多數工具和 API 都會在特定時間提供評估的資料。為了充分監控網站並維持主要網頁的效能,建議您持續評估Core Web Vitals 的表現並觀察趨勢。

AWP 提供引擎和預先建構的 API 整合功能,可透過程式輔助方式進行設定,自動執行對各種效能監控 API 的週期性查詢。

舉例來說,您可以使用 AWP 在首頁上設定每日測試,擷取 CrUX API 的實地資料,以及 PageSpeed Insights 的 Lighthouse 報告實驗室資料。這類資料可寫入並儲存一段時間,例如儲存在 Google 試算表中,然後在 Google 數據分析資訊主頁中以視覺化方式呈現。AWP 可自動執行整個程序中的繁重工作,因此非常適合用於追蹤實驗室和實地趨勢。詳情請參閱下方的「在數據分析中以視覺化方式呈現稽核結果」。

架構總覽

AWP 是模組式程式庫,包含三種不同類型的模組:

  • 引擎
  • connector 模組
  • gatherer 模組

引擎會從連接器 (例如本機 CSV 檔案) 取得測試清單,透過所選收集器 (例如 PageSpeed Insights) 執行效能稽核,並將結果寫入輸出連接器 (例如 Google 試算表)。

AWP 架構圖。

AWP 隨附多個預先實作的收集器和連接器:

使用 AWP 自動執行稽核

AWP 會透過您偏好的稽核平台 (例如 PageSpeed InsightsWebPageTestCrUX API) 自動執行效能稽核作業。AWP 可讓您彈性選擇要載入測試清單的位置,以及要將結果寫入的位置。

舉例來說,您可以針對儲存在 Google 試算表中的測試清單執行稽核,並使用下列指令將結果寫入 CSV 檔案:

PSI_APIKEY=<YOUR_KEY> SHEETS_APIKEY=<YOUR_KEY> ./awp run sheets:<SheetID> csv:output.csv

定期稽核

您可以選擇每天、每週或每月執行週期性稽核。舉例來說,您可以針對在本機 JSON 中定義的測試清單執行每日稽核作業,如下所示:

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

下列指令會從本機 JSON 檔案讀取稽核測試清單,在本機電腦上執行稽核,然後將結果輸出至本機 CSV 檔案:

PSI_APIKEY=<YOUR_KEY> ./awp run json:tests.json csv:output.csv

如要每天以背景服務持續執行稽核作業,請改用下列指令:

PSI_APIKEY=<YOUR_KEY> ./awp continue json:tests.json csv:output.csv

您也可以在類似 Unix 的環境中設定 crontab,藉此執行 AWP 的每日 Cron 工作:

0 0 * * * PSI_APIKEY=<YOUR_KEY> ./awp run json:tests.json csv:output.csv

您可以在 AWP GitHub 存放區找到更多方式來自動執行每日稽核和結果收集作業。

在數據分析中以視覺化方式呈現稽核結果

除了持續評估 Core Web Vitals 之外,您也應評估趨勢,並透過實際使用者指標 (RUM) 或 AWP 收集的 Chrome 使用者體驗報告 (CrUX) 資料,找出可能的回歸現象。請注意,Chrome UX 報告 (CrUX) 是 28 天移動式匯總,因此建議您一併使用自己的 RUM 資料和 CrUX,以便更快發現回歸現象。

數據分析是一項免費的視覺化工具,可讓您輕鬆載入成效指標,並以圖表繪製趨勢。舉例來說,下方的時間序列圖表會根據 Chrome 使用者體驗報告資料,顯示 Core Web Vitals。其中一個圖表顯示近幾週累積的版面配置位移情形,也就是某些網頁的版面配置穩定性出現了倒退情形。在這種情況下,您應優先分析這些網頁的潛在問題。

數據分析工具中的 Core Web Vitals 結果螢幕截圖。

為簡化從資料收集到視覺化呈現的端對端程序,您可以使用網址清單執行 AWP,並透過下列指令自動將結果匯出至 Google 試算表:

PSI_APIKEY=<YOUR_KEY> SHEETS_APIKEY=<YOUR_KEY> ./awp run sheets:<SheetID> csv:output.csv

在試算表中收集每日指標後,您可以建立 Data Studio 資訊主頁,直接從試算表載入資料,並將趨勢繪製成時間序列圖表。如要進一步瞭解如何使用試算表做為資料來源,以便在數據分析中以視覺化方式呈現 AWP,請參閱 Google Sheetss API Connector

後續步驟

AWP 提供簡單且整合的做法,可盡量減少設定持續監控管道以評估網站體驗核心指標和其他效能指標的作業負擔。目前 AWP 涵蓋最常見的用途,日後將持續提供更多功能,以因應其他用途。

如需進一步瞭解,請參閱 AutoWebPerf 存放區。