豪華零售商 Farfetch 的轉換率更高,網站體驗指標就會提升

這個電子商務時尚零售商如何將網站體驗核心指標與成效指標與業務指標建立關聯,讓 KPI 提升,並打造「效能業務案例計算工具」,協助制定產品決策及提升績效文化。

Dikla Cohen
Dikla Cohen
Patrícia Couto Neto
Patrícia Couto Neto
Rui Santos
Rui Santos

在許多公司內部,網站速度效能和網站體驗核心指標大多仍視為工程團隊的責任。如果商家和客戶的體驗價值不合,商家的其他區域就不可能知道網站速度。因此,在製定重要決策及製定藍圖時,可能會忽略成效。

為了改善不同團隊的效能文化,並大幅提升網路體驗,奢華電子商務時裝零售商 Farfetch 推出了一項以客戶為中心的真正成效指標,並推出一項專案。這類遊戲的目的是將這些指標與業務指標建立關聯,藉此瞭解成效對公司 KPI 的影響。

不過,他們的目標並未結束。本專案的目標最終就是大規模實施文化變革,打破組織內的藩籬並導入新的商業導向用語,讓每個人都能共同討論過去被視為技術議題。Farfetch 希望能在網站速度方面善盡責任,共同製定更明智的決策,並將網站速度列為優質網頁體驗的主要基石。

圖表顯示速度是開發人員的責任與共同責任的速度。在前者中,每個階段各自獨立,後者則各自獨立。

最初,Farfetch 發現一個部門無法像之前一樣完成這個目標,並從工程、基礎架構、架構和產品等領域的各領域專家組成核心專家團隊,並安排逐步調整策略,以此改變公司看待這個主題的方式。

步驟 1:定義、評估及監控指標

首先,Farfetch 必須備妥合適的監控工具,以便瞭解不同歷程接觸點和應用程式目前的狀態和偏差。

他們運用研究室資料和實際使用者監控功能 (現場資料),追蹤網站體驗核心指標,以及其他以使用者為中心的成效指標,分析目前的速度表現。他們運用 JavaScript 和 web-vitals.js 程式庫擷取資料,讓產品分析團隊可以在同一個工作階段中瞭解成效指標和業務指標,進而開始檢驗兩者對另一項指標的影響。

這個跨領域的團隊旨在瞭解哪些指標對業務而言最重要。為此,他們查看了 Farfetch 使用者的關鍵旅程路徑,並嘗試連結該歷程與績效標記。除了 Google 列出的網站體驗核心指標,每個指標都代表使用者體驗的不同面向,他們還使用自訂 JavaScript 追蹤第一個位元組 (TTFB)首次顯示內容所需時間 (FCP)、首次顯示所需時間和互動時間 (TTI)

這些指標是以 Performance APILong Tasks API 和 Google 的 polyfill 中的幾種方法收集指標。詳情請參閱這篇 2020 年中旬的 Farfetch Tech 網誌文章 (作者為網路資深首席工程師 Manuel Garcia)。

在資料分析方面,Farfetch 有自己的多管道追蹤解決方案,供前端應用程式「Omnitracking」使用。可用來追蹤網頁瀏覽量、使用者動作和系統動作產生的事件。Omnitracking Data Model 是針對分析、資料探索和報告案例的解決方案,以追蹤器產生的事件為基礎。資料模型的目標是協助及支援所有需要瞭解下列資訊的使用者:

  • 使用者行為
  • Farfetch 應用程式的使用者體驗
  • 應用程式使用情況
  • 大型和小型轉換
  • 跨管道和漏斗分析

這個想法後應將 Farfetch.com 上每個網頁瀏覽的成效資料 (由 JavaScript 擷取) 加進資料層。這樣就能確保各工作階段的成效資料與主要轉換漏斗指標相符,以及該主題的分析探索基準。

最後,Farfetch 為主要流程頁面中的各項指標制定了以時間為準的效能預算,還設有管理流程來處理預算侵害事件。此外,他們也開始在持續整合管道中納入成效指標,以便盡快掌握開發流程中的預算偏差。

步驟 2:以商業語言溝通

由於 Farfetch 的內部商業智慧資料集現在可提供效能資料,開始探索資料中的數學模型和模式,找出成效指標與業務 KPI (例如單一網頁造訪次數的轉換率和百分比) 之間的關聯,透過全新的觀點瞭解網站速度和企業使用者體驗對收益的影響。還能以通用語言與業務決策者討論成效。這項分析涵蓋所有網站體驗核心指標,以及 Farfetch 認為有價值的其他指標。發掘出對成效極具影響力的洞察資料。

請注意,Google 建議最大內容繪製 (LCP) 的長度不超過 2.5 秒,以提供最佳使用者體驗。Farfetch 會依據這個門檻仔細研究,找出有意義的結果。

Farfetch 統計相關分析指出,在那之後,轉換率就會開始降低,離開率也會上升。這表示使用者對於網頁載入速度緩慢的問題會逐漸降低,而且轉換率平均降低了 1.3%,而且 LCP 增加 100 毫秒。

LCP 圖表,Y 軸代表轉換率和網頁造訪次數百分比,X 軸則是 LCP 時間。LCP 速度越快,單次網頁造訪次數所佔的百分比就會降低,轉換率也會跟著提高。

此外,Farfetch 也發現,累計版面配置位移 (CLS) 分數的離開率每減少 0.01 就降低了 3.1%,再次體認網頁穩定性帶來的影響,讓使用者持續瀏覽網站。

CLS 圖表,Y 軸代表轉換率和網頁造訪次數百分比,X 軸則是 CLS 分數。CLS 分數最低代表單頁造訪百分比最高,而轉換則在 CLS 分數較低時提高。

關於網頁的互動性和流暢性,雖然系統會持續追蹤及分析首次輸入延遲時間 (FID),但 Farfetch 也可以評估 TTI,這對於 Farfetch 商務轉換漏斗而言,這項指標成為了顯著影響的指標。

為此,他們將 Google 的 TTI polyfill 插入網站來儲存這項指標。使用 Long Tasks API 回報長時間的工作 (在瀏覽器主執行緒上花費的時間超過 50 毫秒的工作)。

之後,分析團隊發現 TTI 每秒的轉換率降低了 2.8%,因此成為改善程式碼效率及去記錄瀏覽器主執行緒的好方法。

TTI 圖表,Y 軸代表轉換率和單一網頁造訪百分比,X 軸則是 TTI 時間。隨著 TTI 時間增加,轉換率會下降,單次網頁造訪所佔的百分比也隨之提高。

最後,這項分析還能證明某些指標對業務 KPI 沒有顯著影響,或是有些指標在使用者歷程的各個階段較為具有關聯性。如此一來,您便能完全瞭解轉換漏斗中各個階段的商機。

步驟 3:嵌入文化變革

若想建立符合公司目標、在高階主管階層的認識和投入工作,以便在產品藍圖中製定成效導向決策,就必須將上述洞察資料,以及有關使用者對於網站速度的定性使用者研究呈現在搜尋結果上。現在可以證明 Farfetch 的成效有多少價值。

為了簡化優先順序,Farfetch 打造了一項自助式工具,稱為 Site Speed Business Case「計算機」,並從 Google 速度影響計算機汲取靈感。這項產品可讓任何產品經理計算即時對業務的影響,進而打造出業績成長的商業論點。資料模型結合轉換率和使用者體驗指標之間的關聯,因此能靈活因應不同的產品範圍、裝置和使用者歷程接觸點。

Farfetch 的 Site Speed 商業案例計算機的螢幕截圖,

同時,公司也能使用一套自助式數據分析資訊主頁,全公司掌握即時成效指標,以及這些指標對業務的影響。因此這項功能現在已完全嵌入產品開發流程中,產品團隊也能輕鬆取得指標、稽核工具和效能預算監控功能。此外,由於資料層整合的關係,Farfetch A/B 測試工具也能提供成效指標,讓產品經理及其他強大的深入分析媒介。

近幾個月以來,核心團隊也正按自己的進度在平台領域內建立這種文化,透過類似的方法監控及證明主要微服務和交易的影響。

目前已有許多 Farfetch 驅動的簡報,也有外部提及。例如,2021 年 Google I/O 大會發表網站體驗核心指標對業務的影響一文。這也有助於持續與主題提供關聯性,並鞏固團隊文化策略。

步驟 4:改善指標

最終,這些工作所需的一切努力都有助於 Farfetch 客觀地改善網站速度指標,並保證他們的團隊能遵循課堂最佳做法,並追求改進的機會。

2021 年偵測到的主要商機之一,就是需要改善 Farfetch 兩種主要網頁類型的 LCP:產品頁面和產品資訊頁面。

調查團隊瞭解他們如何載入這些網頁的主要內容。該機構運用商業案例證明把握此商機,成功達成以下目標:

  • 將產品圖片載入元件從以 JavaScript 為基礎的解決方案,調整為原生導入。
  • 定義圖片的優先順序,並將圖片分為重要及非重要資產。
  • 透過內嵌在 HTML 中的來源並使用 <link rel="preload">,提早載入重要圖片,以便盡快下載。
  • 為非重要圖片使用 <img loading="lazy"> 屬性,並在 Safari 等不受支援的瀏覽器上使用 Intersection Observer 建立 polyfill。

於是他們順利推動了這方面的行動,並透過 A/B 測試,證明自己的假設和業務影響。例如,在產品頁面中,這項工作減少了 600 毫秒以上,而 A/B 版本測試顯示,轉換率升幅在 1% 到 5% 之間,與該公司指定的信賴水準有關。

以下是該團隊根據 Google 的 LCP 分數定義,對「良好」、「需要改善」和「不佳」的網頁,採用下列各項改善措施。

針對 Farfetch 房源資訊網頁,在網站體驗核心指標門檻的中位數 LCP 堆疊長條圖。達到「良好」門檻的網頁已從 37% 調高為 53%。
針對 Farfetch 房源資訊網頁,在網站體驗核心指標門檻的中位數 LCP 堆疊長條圖。達到「良好」門檻的網頁已從 36% 調高為 48%。

加快網站速度及改善工作效率的獎勵

打造著重於效能和工具的文化,例如企業案例計算機等工具,讓每個人都能開口討論產品經理、利害關係人及工程師都能理解的共通語言。這讓大家持續討論如何排定新計畫的優先順序,以及提升成效。

Rui Santos 的網頁頻道資深首席產品經理 Farfetch 說:「我們想突破績效循環,因為只有工程團隊負責處理及修正這類問題。」「只要對照成效指標和業務指標,就能以非常快的速度傳達訊息,真是非常有效。企業推動公司成長,連結其成功與速度指標後,促使更多相關人士瞭解並做出權衡決策。」

在豪華電子商務區隔中,無論網站速度是快還是慢,都可能反映出消費者對品牌和服務品質的整體評價。對使用者而言,品質與奢華差不多,而且無論使用者體驗的各個面向 (包括你網站的成效) 都適用。網站速度對轉換率的影響有實證,如今在 Farfetch 進行前瞻性規劃時,成效便是他們最大的考量。