Swappie 如何運用網站體驗核心指標，將行動收益提升 42%

找出網站效能和業務指標之間的關聯性，是最佳化工作成功的關鍵。

Lina Hansson

替換品是銷售整新機的成功新創公司。多年來，該公司決定優先導入新功能，勝過網站效能；然而，當他們發現行動版網站的業務成效落後於電腦版網站，卻在電腦版上發生了轉變。他們著重於提升成效，很快就發現行動收益有所增加

強調商機

相對行動裝置轉換率 (Rel mCvR) 的計算方式是將行動裝置轉換率除以電腦轉換率。追蹤速度指標的方法很多，但將這些指標連結至業務指標並不容易。由於行動裝置和電腦都會看見相同的廣告活動和季節性，因此 Rel mCvR 指標不會再影響這些外部參數的影響，而且只有在行動版網站改善時才會顯示。

美國十大電子商務網站平均值為 50%的 Rel mCvR，但 Swappie 為 24%。這顯示出行動版網站面臨了挑戰，公司也錯失了收益，因此在推動效能改善專案時。

評估改善成效

Swappie 使用這份範本試算表，透過 Google Analytics (分析) 設定每日追蹤 Rel mCvR 和行動平均網頁載入時間的每日追蹤。(請參閱使用試算表操作說明)。並開始透過 Google Analytics (分析) 和 BigQuery 追蹤網站體驗核心指標。 有了追蹤功能，開發人員就能開始著手改善網站成效。

但經過三個月的工作後，Rel mCvR 的影響力顯而易見：Rel mCvR 從 24% 下降到 34%，行動收益則增加了 42%！

最佳化

針對 LCP 和 CLS 進行最佳化調整

Swappie 的開發團隊發現，長久以來，自己一直遭到忽視的小型事物對於改進空間都有改善空間。針對不同可視區域和不同語言的使用者研究網站，特別指出 LCP 和 CLS 的問題易於解決，且對整體效能產生了重大影響。例如，在可能降低 LCP 的情況下，在伺服器 (而非用戶端) 轉譯 LCP 元素。

偵測版面配置位移並不容易，因為偵測版面配置的位移可能會因可視區域和連線而有很大的差異。從使用者瞭解網站體驗核心指標的分析結果後，他們便瞭解，隨著 CLS 減少，他們正朝正確的方向邁進。

圖片

使用預先載入、延遲載入和適當大小調整圖片。並只在必要時預先載入主要圖片 (例如 LCP)，同時只在需要時載入可視區域以外的圖片。

字型

切換供應商，以替換最佳化的字型。這會造成很大的影響，因為他們需要以最佳方式處理不同語言要求的字體。

第三方指令碼

Swappie 會花費許多心力，檢查每個第三方指令碼和小工具、使用的位置，以及所提供的功能。與所有相關人員討論後，他們計劃要減少指令碼對網站的影響，同時保留功能。並移除了不需要的部分，並將其餘項目最佳化，大幅減少網站上的第三方 JavaScript 數量。

移除用不到的程式碼並改善套裝組合最佳化

改善匯入作業並移除未使用的 JS 和 CSS 對 Swappie 的網站效能有些微改善，但是這些小幅改善會隨著時間逐漸累積。此外，他們也調整了套裝設定。

在 Swappie 打造績效文化

Swappie 的結果不僅源自程式碼的變更，還會反映機構的變更及其優先順序。

工程主管 Teemu Huovinen 表示：

您必須將網站速度與業務指標建立連結，才能真正強調網站速度的重要性。只要時間和資源有限，就會考量到排定優先順序，一直都是這樣。優先爭取客戶價值是不錯的做法，但如果您發現網站速度光是改善網站的「感覺」，那就很容易著重在新功能，並直接改善轉換。將網站速度與業務指標相連結並不容易，而使用 Rel mCvR 計算方法就對我們很有幫助。

Teemu Huovinen

開發團隊讓開發團隊有機會全心投入一季的網站速度，因此更有意願深入探究。

更令人印象深刻。我們七名開發人員就在短短一個月內，就開始提升效能。對團隊的貢獻，這是我們能夠共襄盛舉，並帶來這麼大的影響力。

Teemu Huovinen

Teemu 也指出在開始根據資料製定計畫時，必須花時間投入資源，並瞭解如何使用開發人員工具的「效能」分頁，以及在做出任何改善前設定使用者數據分析。圖表 (尤其是指向正確方向的圖表) 是向工作收集意見和驗證的絕佳來源！他們查看了實地中網站體驗核心指標，以及 Lighthouse (研究室式) 分數，協助將重點放在改善最多人適用的正確項目。