Lowe's 網站是成效最好的電子商務網站之一

透過建構自動化效能測試和監控系統,Lowe 的網站速度團隊可針對效能預算測試拉取要求,並防止效能退化情形發生。

Abhimanyu Raibahadur
Abhimanyu Raibahadur
Ashish Choudhury
Ashish Choudhury
Dhilip venkatesh Uvarajan
Dhilip venkatesh Uvarajan
Dinakar Chandolu
Dinakar Chandolu
Garima Mimani
Garima Mimani
Safwan Samla
Safwan Samla

Lowe's 是一家居家修繕零售商,營業額將近 900 億美元,經營約 2,200 家門市,並僱用超過 300,000 名員工。Lowe 的網站速度團隊建構了自動化測試和監控系統,可防止效能退化問題在正式環境中部署,進而改善網站效能,並躋身零售網站前段班。

問題

網站速度團隊的目標是讓 Lowe's 網站成為網頁載入效能最快的電子商務網站之一。在建立自動化測試和監控系統之前,Lowe 的網站開發人員無法在正式生產前環境中自動評估效能。現有工具只會在實際工作環境中進行測試。因此,較差的版本會進入生產環境,導致使用者體驗不佳。這些品質較差的版本會持續在生產環境中,直到網站速度團隊偵測到並由作者還原為止。

解決方案

網站速度團隊使用開放原始碼工具,為試產環境建構自動化效能測試和監控系統。系統會評估每個提取要求 (PR) 的效能,如果 PR 不符合網站速度團隊的效能預算指標標準,就會阻擋 PR 運送至實際環境。系統也會評估 SEO 和 ADA 法規遵循情況。

影響

在 16 週內部署 102 個版本的 1 個團隊樣本中,自動化效能測試和監控系統避免了 32 個效能不佳的版本進入實際工作環境。

過去,網站速度團隊需要花費三到五天,才能通知開發人員他們已將效能回歸問題提交至實際工作環境,但現在系統會在開發人員在預先發布環境中提交合併要求後的五分鐘內,自動通知他們效能問題。

程式碼品質會隨著時間提升,這點可從有較少的提取要求標示為成效退化即可得知。網站速度團隊也會逐步縮減管理預算,持續改善網站品質。

一般來說,明確指出有問題的程式碼擁有者,可以改變工程文化。團隊可以透過客觀歸屬問題程式碼的擁有權,主動進行最佳化,而不會因為無法確定誰是實際引發問題的來源,而不得不進行反應式修正。

導入作業

網站速度管理 (SSG) 應用程式的核心是 Lighthouse CI。SSG 應用程式會使用 Lighthouse 驗證及稽核每個提取要求的網頁成效。

SSG 應用程式的流程圖,後文會說明圖中的步驟。

如果未達到網站速度團隊定義的效能預算和指標目標,SSG 應用程式就會導致建構作業失敗。這項工具不僅會強制執行載入效能,還會強制執行 SEO、PWA 和無障礙設計。這項工具可立即向作者、審查人員和 SRE 團隊回報狀態。您也可以設定在需要例外狀況時略過檢查。

自動化速度管理 (ASG) 流程

Spinnaker

起點。開發人員將程式碼合併至預先發布環境。

  1. 部署含有 CDN 資產的試產環境。
  2. 檢查是否已成功部署。
  3. 執行 Docker 容器,開始建構 ASG 應用程式,或在部署失敗時傳送通知。

Jenkins 和 Lighthouse

  1. 使用 Jenkins 建構 ASG 應用程式。
  2. 執行已安裝 Chrome 和 Lighthouse 的自訂 Docker 容器。從 SSG 應用程式提取 lighthouserc.json,然後執行 lhci autorun --collect-url=https://example.com

Jenkins 和 SSG 應用程式

  1. 從 lhci 擷取 assertion-results.json,並與 budgets.json 中預先定義的預算進行比較。將輸出內容儲存為文字檔,並上傳至 Nexus,以便日後進行比較。
  2. 比較目前的 assertion-results.json 與上次成功建構的版本 (從 Nexus 下載),並將其儲存為文字檔。
  3. 建立含有成功或失敗資訊的 HTML 電子郵件。
  4. 使用 Jenkins 將電子郵件傳送至相關的通訊群組清單。