藉由評估實際使用者的網站體驗指標，樂天 24 也發現，良好最大內容繪製 (LCP) 有助於提高轉換率 61.13%。
Rakuten 24 是一家與主要跨國和國內消費性商品製造商合作的網路商店，提供醫療保健、飲料、寵物用品和嬰兒產品等多種日常用品。這間商店是由全球網路服務業界首屈一指的樂天集團 (Rakuten Group, Inc.) 提供服務，在日本的數位市集平台中名列前茅。
在瞭解網站效能對使用者體驗的影響後，樂天 24 團隊持續評估、最佳化及監控網站體驗核心指標和其他指標。
因此，超過 75% 的使用者正面臨最大內容繪製 (LCP)、首次輸入延遲 (FID) 和首次內容繪製 (FCP) 問題。不過，我們仍在努力改善「累計版面配置位移」(CLS)。
分析首頁資料後，樂天 24 發現良好的 LCP 分數有助於：
- 轉換率提高多達 61.13%。
- 每位訪客的收益達 26.09%。
- 平均訂單價值的 11.26%。
- 如果 FID 分數良好，轉換率最多可提升 55.88%。
為了進一步釐清網站體驗核心指標和業務指標的關聯性，Rakuten 24 也針對網站體驗核心指標和相關指標進行 A/B 測試，結果顯示以下改善項目：
- 每位訪客的收益提升了 53.37%。
- 轉換率提高 33.13%
- 平均訂單價值的 15.20%。
- 平均花費時間的 9.99%。
- 離開率降低 35.12%。
醒目顯示商機
雖然提升網站效能是改善使用者體驗和業務成長的明智做法，Rakuten 24 團隊也瞭解，說服相關人員採用網站體驗核心指標，並全力提升網站效能並不容易。他們認為，如果將有助於投資的投資報酬率 (ROI) 成效最佳化，直接提供給相關人士，就能有效幫助他們達成目標。
Rakuten 24 是相當新的獨立服務，因此運用靈活的彈性克服挑戰。他們認為個案研究的成果有助他們在未來制定更根據資料做出的決策，同時也可幫助其他開發人員評估工作成果，且能說服利害關係人也能因此獲益良多。歡迎參閱這篇貼文，瞭解他們是怎麼辦到的。
最佳化 JavaScript 和資源
- 排除會妨礙顯示的資源。
- 分割代碼並使用動態
import()。 - 將所有內容分割成數個獨立部分，並延遲載入位於需捲動位置的 HTML 檔案。
- 視需求執行及載入 JavaScript。
- 找出慢速的 JavaScript 資源，並透過在
<script>標記上使用非同步屬性，建立前往重要來源的早期連線 (例如dns-prefetch、preconnect和preload等資源提示)，藉此將載入程序最佳化。 - 移除未使用的程式碼，並壓縮並壓縮程式碼。
- 使用 CDN。
- 透過 Workbox 使用 Service Worker 控制快取。
最佳化圖片
- 延遲載入需捲動位置圖片。
- 使用 CDN 將圖片最佳化、提供適當大小的圖片、壓縮圖片，以及為工作採用合適的圖片格式 (WebP、SVG、Web Fonts)。
最佳化 CLS
- 載入圖片時，使用 CSS
aspect-ratio保留圖片所需的空間。 - 使用 CSS
min-height盡量減少載入元素時的版面配置位移。
效能評估
除了使用 PageSpeed Insights 稽核網站外，開發團隊還想找出更有效的方法來瞭解使用者實際遇到的實際情況。因此，樂天 24 決定使用 Web Vitals JavaScript 程式庫評估實際網站體驗核心指標和其他指標，並將資料傳送至內部分析工具。
成效分析
該團隊分析了收集到的現場資料，判斷網站體驗核心指標與主要業務指標是否有任何關聯。他們發現，與未完成轉換的使用者相比，已轉換的使用者通常效果較佳。
收集到的資料也顯示：
- 良好的 LCP 可提高轉換率、每位訪客帶來的收益高達 26.09%，平均訂單價值最多達 11.26%。
- 與整體平均資料相比，FID 品質可提升多達 55.88%。
Performance Monitoring
團隊根據現場和商業智慧工具收集到的資料，建立了效能監控資訊主頁。這對監控進度及防止迴歸相當重要。
A/B 測試
A/B 測試是評估成效最佳化對業務影響的好方法，該公司針對網站體驗核心指標對其中一個到達網頁進行最佳化調整，然後透過 A/B 測試將最佳化版本與原始網頁進行比較，為期一個月。他們選擇的到達網頁流量和轉換都很高，以便測試能帶來有意義的結果。在測試期間，系統會將 50% 的流量導向最佳化的到達網頁 (版本 A)，另外 50% 則導向原始網頁 (版本 B)。而 A 版本與 B 版本間的唯一差別在於，版本 A 針對網站體驗核心指標進行最佳化，不會有任何功能或視覺差異。
最佳化版本 A 在行動負載測試中提早 0.4 秒載入完畢，且沒有造成版面配置大幅變動。事實上，版本 A 的 CLS 比版本 B 多了 92.72%。其他網站體驗指標的分數也有所提升：FID 提高 7.95%、FCP 提高 8.45%、TTFB 也提高了 18.03%。
比較最佳化版本 A 與未最佳化版本 B 後，樂天 24 發現版本 A 能帶來下列優勢：
- 每位訪客的收益增加了 53.37%。
- 轉換率提高 33.13%。
- 平均訂單價值提升 15.20%。
- 平均停留時間增加 9.99%。
- 離開率降低 35.12%。
結論
網站效能最佳化並不容易，但一切都值得。樂天 24 採取以資料為導向的做法，成功提升了使用者體驗，並評估成效對自家業務有正面影響。瞭解這只是消費歷程的一部分，而非實際造訪，因此將持續改善網站，為線上購物者提供更愉快的體驗。
最佳化需要投入大量心力，開發人員也不必在這段歷程中獨自完成。樂天 24 分享他們的挑戰和成就，希望更多開發人員能運用網站體驗核心指標，與利害關係人共同理解，再一起努力打造優質的使用者體驗和推動業務成長。