使用 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 試算表中,然後以視覺化方式呈現在數據分析資訊主頁中。AWP 會將整個過程中的繁瑣作業自動化,因此是遵循研究室和現場趨勢的絕佳解決方案。詳情請參閱下方的「在數據分析中以視覺化方式呈現稽核結果」一節)。

架構總覽

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

  • 引擎
  • 連接器模組
  • 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

或者,您也可以在類似 Unx 的環境中設定 Crontab,以每日 Cron 工作的形式執行 AWP:

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

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

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

除了持續評估網站體驗核心指標,要能評估相關趨勢,並使用實際使用者指標 (RUM) 或 AWP 收集的 Chrome 使用者體驗報告 (CrUX) 資料找出潛在迴歸問題。請注意,Chrome 使用者體驗報告 (CrUX) 是為期 28 天的移動匯總作業,因此建議您同時使用自己的 RUM 資料和 CrUX 來更快找出迴歸問題。

「數據分析」是一項免費的視覺化工具,可讓您輕鬆地將成效指標載入至圖表,並以圖表呈現趨勢。舉例來說,下方的時間序列圖表是根據 Chrome 使用者體驗報告資料顯示網站體驗核心指標。其中一個圖表顯示最近幾週的累計版面配置位移增加,這也表示某些頁面的版面配置穩定性出現迴歸現象。在這種情況下,建議您優先分析這些網頁的問題。

「數據分析」中網站體驗核心指標結果的螢幕截圖。

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

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

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

後續步驟

AWP 提供簡單且整合式的整合方式,讓您能盡量避免設定持續監控管道來評估網站體驗核心指標和其他效能指標的工作。就目前來說,AWP 涵蓋最常見的用途,日後也會繼續提供更多功能來因應其他使用情境。

詳情請參閱 AutoWebPerf 存放區。