使用 AutoWebPerf 自動執行稽核

這項全新模組化工具可自動從多個來源收集成效資料。

Antoine Bisch

Gilberto Cocchi

Jonathan Chen

什麼是 AutoWebPerf (AWP)？

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

Web Vitals 指南發布後，密切且主動監控網頁變得越來越重要。這項工具背後的工程師多年來一直進行效能稽核，他們建立 AWP 是為了自動執行日常活動中手動、重複且耗時的部分。如今 AWP 已臻成熟，可廣泛分享，讓所有人都能享受自動化帶來的便利。

這項工具位於 GitHub 的 AutoWebPerf 公開存放區。

AWP 的用途是什麼？

雖然有許多工具和 API 可監控網頁效能，但大多數工具和 API 都是在特定時間測量資料。如要充分監控網站，並維持重要網頁的良好效能，建議您持續測量網站體驗核心指標，並觀察趨勢。

AWP 提供引擎和預先建構的 API 整合，可透過程式輔助方式設定，自動對各種效能監控 API 執行週期性查詢，讓這項工作變得更輕鬆。

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

架構總覽

AWP 是以模組為基礎的程式庫，包含三種不同類型的模組：

引擎
連接器模組
收集器模組

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

AWP 架構圖。

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

預先實作的收集器：
預先導入的連接器：
- Google 試算表
- JSON
- CSV

使用 AWP 自動執行稽核

AWP 會透過您偏好的稽核平台 (例如 PageSpeed Insights、WebPageTest 或 CrUX 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，您也必須能夠評估趨勢，並透過 AWP 收集的實際使用者指標 (RUM) 或 Chrome 使用者體驗報告 (CrUX) 資料，找出潛在的迴歸問題。請注意，Chrome 使用者體驗報告 (CrUX) 是 28 天的移動匯總資料，因此建議您同時使用自己的 RUM 資料和 CrUX，以便更快發現迴歸。

數據分析是免費的視覺化工具，可輕鬆載入成效指標，並以圖表形式繪製趨勢。舉例來說，下方的時間序列圖表會根據 Chrome 使用者體驗報告資料，顯示 Core Web Vitals。其中一個圖表顯示，近幾週的 Cumulative Layout Shift 增加，表示特定網頁的版面配置穩定性出現回歸。在這種情況下，您會想優先分析這些網頁的基本問題。

如要簡化從資料收集到視覺化的端對端程序，您可以執行 AWP 並提供網址清單，透過下列指令將結果自動匯出至 Google 試算表：

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

在試算表中收集每日指標後，您可以建立數據分析資訊主頁，直接從試算表載入資料，並將趨勢繪製成時序圖。如要瞭解如何使用試算表做為資料來源設定 AWP，並在數據分析中以視覺化方式呈現，請參閱 Google 試算表 API 連接器的詳細步驟。

後續步驟

AWP 提供簡單的整合式方法，可減少設定持續監控管道的工作量，用來評估 Core Web Vitals 和其他效能指標。目前 AWP 涵蓋最常見的用途，日後也會持續提供更多功能，因應其他用途。

詳情請參閱 AutoWebPerf 存放區。

使用 AutoWebPerf 自動執行稽核 透過集合功能整理內容 你可以依據偏好儲存及分類內容。