Zalando 如何運用 Lighthouse CI 將效能意見回饋從 1 天縮短至 15 分鐘

Zalando 的網路團隊發現整合 Lighthouse CI 後,能採取主動的效能方法,而自動狀態檢查可以將目前修訂版本與主要分支版本進行比較,以避免效能迴歸。

Jan Brockmeyer
Jan Brockmeyer
Jeremy Colin
Jeremy Colin

Zalando 擁有超過 3,500 萬名活躍客戶,是歐洲知名的線上時尚平台。在這篇文章中,我們會說明我們為何開始使用 Lighthouse CI、如何簡化實作方式,以及 Google 團隊的優勢。

Zalando 深知網站成效和收益之間的關係,過去,我們測試過如何以人為方式增加目錄頁面的載入時間,對跳出率、轉換率和每位使用者的收益造成影響。結果相當清楚,網頁載入時間縮短 100 毫秒,成功提升參與度、跳出率降低,單次工作階段收益也提高 0.7%。

100毫秒

縮短網頁載入時間

0.7%

單次工作階段收益增幅

獲得公司的支持不見得會讓業績成長

儘管公司內部已認同您的成效,但如果未將效能設為產品放送條件,就可以輕易捨棄。2020 年,將 Zalando 網站重新設計時,我們主要是致力提供新功能、維持良好的使用者體驗,以及為網站套用自訂字型和更鮮豔的色彩。不過,在重新設計的網站和應用程式已準備好要發布時,早期採用者指標顯示新版本的速度較慢。首次顯示內容所需時間最多降低 53%,而我們測量到的互動時間最多加快了 59%。

Zalando 網路

Zalando 網站是由開發架構的核心團隊所建立,共有超過 15 個功能團隊提供前端微服務。支援新版本時,我們也將網站的部分內容轉換成集中式架構。

之前稱為 Mosaic 的架構包含透過內部指標評估網頁效能的方法。不過,我們缺乏內部研究室效能監控工具,因此很難在向使用者推出前比較成效指標。雖然每天都部署完成,但開發人員在設法改善效能時,都收到大約一天後產生的意見回饋循環。

運用網站體驗指標和 Lighthouse 解決問題

我們對於內部指標的助益不盡滿意,因為它們無法配合新的設定進行調整。更重要的是,這些客戶並非以客戶體驗為重心。我們改用網站體驗核心指標,提供一組精簡、全方位且以使用者為中心的指標。

為了在發布前提升效能,我們需要建立適當的研究室環境。這提供可重現的測量結果,除了代表現場資料第 90 個百分位數的測試條件之外,致力於改善效能的工程師,您知道要將心力投注在哪些地方,才能發揮最大影響力。我們已經在本機使用 Lighthouse 稽核報告。因此,我們第一次的疊代是根據 Lighthouse 節點模組開發服務,並從測試環境中測試變更。 因此,我們大約需要一小時的時間穩定可靠的效能意見回饋循環,確保效能穩定,並節省版本更新時間!

為開發人員提供提取要求的效能意見回饋

我們的目標不僅止於此,也希望有機會獲得成效的機會並積極主動。 從 Lighthouse 節點模組跳轉至 Lighthouse CI (LHCI) 伺服器並不困難。我們選擇採用自行管理的解決方案,藉此與現有公司服務更緊密整合。我們的 LHCI 伺服器應用程式會以 Docker 映像檔的形式建構,然後與 PostgreSQL 資料庫一起部署至 Kubernetes 叢集,並回報至 GitHub。

我們的架構已向開發人員提供一些效能意見回饋,也就是比較元件套件大小與每個修訂版本的門檻值。現在,我們可以將 Lighthouse 指標回報為 GitHub 狀態檢查。如果 CI 管道不符合效能門檻,就會導致 CI 管道失敗,而且會附上詳細 Lighthouse 報表的連結 (如下圖所示)。

顯示成功檢查行的 GitHub UI 圖片。
Lighthouse CI GitHub 狀態檢查功能可讓開發人員在發布實際工作環境前,輕鬆瞭解並解決迴歸問題。
Lighthouse CI 中的比較圖片,顯示修訂版本與主要分支版本的比較結果
比較主要分支版本的 Lighthouse CI 詳細修訂報告。

擴大效能涵蓋範圍

我們一開始先以務實的態度開始; Lighthouse 目前只會在我們最重要的兩個頁面中執行:首頁和產品詳細資料頁面。幸運的是,Lighthouse CI 可以輕鬆擴充執行設定。在我們網站特定網頁合作的功能團隊,可以設定比對網址模式和斷言。如此一來,我們就能確信成效有所提升。

現在,我們在建構大型版本時更有信心,開發人員可以享受更短的程式碼效能回饋循環。