找出網站成效與業務指標之間的關聯，是推動優化成效的關鍵。
Swappie 是一家成功的新創公司，專門販售翻新手機。幾年來，他們將優先順序放在新增功能，而非網站效能，但當他們發現行動版網站的業務成效落後於電腦版時，就開始轉變。他們專注於提升成效，很快就發現行動收益有所成長。
42%
來自行動裝置訪客的收益增加
10 個pp*
*mCvR 相對增幅百分點
突顯商機
相對行動裝置轉換率 (Rel mCvR) 的計算方式是將行動裝置轉換率除以電腦轉換率。追蹤速度指標的機會很多，但將這些指標連結至業務指標可能相當棘手。由於相同的廣告活動和季節性因素會觸及行動裝置和電腦，因此 Rel mCvR 指標會移除這些外部參數的影響，只顯示行動網站是否有改善。
美國十大電子商務網站的 Rel mCvR 平均值為 50%，但 Swappie 的 Rel mCvR 為 24%。這表示行動版網站有問題，且公司因此損失收益，因此我們啟動了成效改善專案。
評估效能改善措施的影響
Swappie 使用 Google Analytics 設定 Rel mCvR 和行動裝置平均網頁載入時間的每日追蹤，並使用這個範本試算表。(請參閱試算表使用說明)。他們也開始透過 Google Analytics 和 BigQuery 追蹤 Core Web Vitals。完成追蹤設定後，開發人員便開始著手改善網站效能。
短短三個月後，成效就十分明顯：Rel mCvR 從 24% 提高到 34%，行動版收益也成長了 42%！
23%
降低平均網頁載入時間
55%
降低 LCP
91%
降低 CLS
90%
降低 FID
最佳化
針對 LCP 和 CLS 進行最佳化
Swappie 的開發團隊發現，許多小細節長期以來都被忽略，因此有許多改進空間。在不同檢視區和不同語言下研究網站後，我們發現 LCP 和 CLS 有幾個容易解決的問題，這些問題會對整體效能造成重大影響。舉例來說，盡可能在伺服器上算繪 LCP 元素，而非在用戶端算繪，可降低 LCP。
偵測版面配置變動相當困難，因為這些變動可能會因檢視區和連線而有很大差異。在從使用者收集到 Core Web Vitals 資料並導入 Analytics 後，他們發現 CLS 已降低，因此知道自己走在正確的道路上。
圖片
我們透過預先載入、延遲載入和適當的大小，對圖片進行最佳化。預先載入主要圖片 (例如 LCP)，並只在需要時載入檢視區範圍外的圖片。
字型
Swappie 會透過切換供應商來改善字型。這項功能對他們影響重大，因為他們需要最佳方式來處理不同語言所需的字型。
第三方指令碼
Swappie 花了許多心力審查每個第三方指令碼和小工具，包括用途和提供的功能。在與所有利害關係人討論後，他們制定了計畫，以便在保留功能的同時，減少指令碼對網站的影響。他們移除了不必要的內容，並對其餘內容進行最佳化，大幅減少網站上的第三方 JavaScript 數量。
移除未使用的程式碼並最佳化捆綁
最佳化匯入作業並移除未使用的 JS 和 CSS，可稍微改善 Swappie 的網站效能，但這些小幅改善會隨著時間累積。並且改善了捆綁設定。
在 Swappie 建立成效文化
Swappie 取得的成果不僅來自程式碼的變更，也來自組織和其優先順序的變更。
工程負責人 Teemu Huovinen 說明如下：
您必須將網站速度連結至業務指標，才能真正凸顯其重要性。當您時間和資源有限時，就必須優先處理重要工作，這一點永遠不會改變。優先考量客戶價值是正確的做法，但如果您認為網站速度只會改善網站的「感覺」，那麼很容易就會將重心放在新功能和更直接的轉換改善上。將網站速度連結至業務指標並不容易，這正是使用 Rel mCvR 進行計算的用處所在。
Teemu Huovinen
開發人員團隊有 1 季的時間專注於網站速度，因此更有動力深入研究。
我們團隊的成長與影響力相輔相成，成就了這項令人驚豔的成果。在我們開始改善成效的當月，七位開發人員中有四位是新加入。這一切都歸功於團隊，我們能夠聚焦於這個主題並產生如此巨大的影響力，實在令人驚艷。
Teemu Huovinen
Teemu 也指出，在開始進行任何改善前，花時間制定以資料為依據的計畫、瞭解如何使用 DevTools 的「Performance」分頁，以及設定使用者分析功能，都是相當重要的事。圖表 (尤其是正確方向的圖表) 是您工作的重要意見來源，也是驗證工作成果的絕佳工具！他們同時查看實地 Core Web Vitals 和 Lighthouse (實驗室) 分數，有助於專注於改善會影響最多使用者的正確項目。