Rakuten 24';針對網站體驗核心指標進行投資,將每位訪客收益提升 53.37%,轉換率則提高 33.13%

藉由評估實際使用者的網站體驗指標,樂天 24 也發現,良好最大內容繪製 (LCP) 有助於提高轉換率 61.13%。

Hayoung Lee
Hayoung Lee
Linh Duong
Linh Duong
Ryunosuke Akiba
Ryunosuke Akiba
Shogo Kashiwase
Shogo Kashiwase

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 是相當新的獨立服務,因此運用靈活的彈性克服挑戰。他們認為個案研究的成果有助他們在未來制定更根據資料做出的決策,同時也可幫助其他開發人員評估工作成果,且能說服利害關係人也能因此獲益良多。歡迎參閱這篇貼文,瞭解他們是怎麼辦到的。

樂天 24 首頁的螢幕截圖,每次螢幕截圖周圍有行動裝置外框。
樂天首頁的部分螢幕截圖示例。

最佳化 JavaScript 和資源

最佳化圖片

最佳化 CLS

  • 載入圖片時,使用 CSS aspect-ratio 保留圖片所需的空間。
  • 使用 CSS min-height 盡量減少載入元素時的版面配置位移。

效能評估

除了使用 PageSpeed Insights 稽核網站外,開發團隊還想找出更有效的方法來瞭解使用者實際遇到的實際情況。因此,樂天 24 決定使用 Web Vitals JavaScript 程式庫評估實際網站體驗核心指標和其他指標,並將資料傳送至內部分析工具。

Rakuten 24 的網站體驗追蹤整合流程。第一步是將指令碼新增到 Rakuten 24 網站,以便整合 Web-Vitals 程式庫。之後,您就可以透過實際使用者指標評估網站體驗指標,並將資料傳送至 Rakuten 24 的內部資料收集工具。

成效分析

該團隊分析了收集到的現場資料,判斷網站體驗核心指標與主要業務指標是否有任何關聯。他們發現,與未完成轉換的使用者相比,已轉換的使用者通常效果較佳。

完成轉換的使用者與未採用 LCP 的使用者比較。轉換頻率較高的使用者群組會遇到較低的 LCP。

收集到的資料也顯示:

  • 良好的 LCP 可提高轉換率、每位訪客帶來的收益高達 26.09%,平均訂單價值最多達 11.26%。
  • 與整體平均資料相比,FID 品質可提升多達 55.88%。
LCP 按照轉換率和 LCP 時間劃分。LCP 較低時完成轉換的頻率較高,且有 61.13% 的使用者在 LCP 以下方面完成轉換。
LCP 對轉換率的影響。
LCP 按照每位訪客的收益和 LCP 時間劃分。LCP 較低的使用者帶來的收益較高,且當 LCP 為 1 秒或更低時,每位使用者帶來的收益增加了 26.09%。
LCP 對每位訪客收益的影響。
LCP 依照平均訂單價值和 LCP 時間劃分。LCP 偏低的使用者,表示 LCP 為 1 秒或更低時,平均訂單價值可提高 11.26%。
LCP 對平均訂單價值的影響。
按轉換率和 FID 時間劃分的 FID。在 FID 較低時完成轉換的頻率較高,且有 55.88% 的使用者在轉換 FID 以下且 50 毫秒以下。
FID 對轉換率的影響。

Performance Monitoring

團隊根據現場和商業智慧工具收集到的資料,建立了效能監控資訊主頁。這對監控進度及防止迴歸相當重要。

螢幕截圖顯示 Rakuten 24 內部效能監控資訊主頁的各個網站體驗核心指標 (LCP、CLS 和 FID)。
效能監控資訊主頁

A/B 測試

A/B 測試是評估成效最佳化對業務影響的好方法,該公司針對網站體驗核心指標對其中一個到達網頁進行最佳化調整,然後透過 A/B 測試將最佳化版本與原始網頁進行比較,為期一個月。他們選擇的到達網頁流量和轉換都很高,以便測試能帶來有意義的結果。在測試期間,系統會將 50% 的流量導向最佳化的到達網頁 (版本 A),另外 50% 則導向原始網頁 (版本 B)。而 A 版本與 B 版本間的唯一差別在於,版本 A 針對網站體驗核心指標進行最佳化,不會有任何功能或視覺差異。

樂天 24 網站的行動裝置 A/B 版本測試螢幕截圖。每個版本的視覺和功能都相同,也就是 A 版本經過最佳化,以提升網站體驗核心指標。

最佳化版本 A 在行動負載測試中提早 0.4 秒載入完畢,且沒有造成版面配置大幅變動。事實上,版本 A 的 CLS 比版本 B 多了 92.72%。其他網站體驗指標的分數也有所提升:FID 提高 7.95%FCP 提高 8.45%TTFB 也提高了 18.03%

樂天 24 首頁的新創公司比較。相較於在 2 秒內載入的 B 版本,版本 A 經過最佳化,因此能在 1.6 秒內載入更優異。
版本 A 和 B 版本的行動裝置負載測試結果。

比較最佳化版本 A 與未最佳化版本 B 後,樂天 24 發現版本 A 能帶來下列優勢:

  • 每位訪客的收益增加了 53.37%。
  • 轉換率提高 33.13%。
  • 平均訂單價值提升 15.20%。
  • 平均停留時間增加 9.99%。
  • 離開率降低 35.12%。
有關樂天 24 首頁網站體驗核心指標改善的螢幕截圖。統計資料指出,每位訪客的收益增加了 53.37%、轉換率提高 33.13%、平均訂單價值提高 15.2%、平均網頁停留時間增加 9.99%,離開率則降低 35.12%。

結論

網站效能最佳化並不容易,但一切都值得。樂天 24 採取以資料為導向的做法,成功提升了使用者體驗,並評估成效對自家業務有正面影響。瞭解這只是消費歷程的一部分,而非實際造訪,因此將持續改善網站,為線上購物者提供更愉快的體驗。

最佳化需要投入大量心力,開發人員也不必在這段歷程中獨自完成。樂天 24 分享他們的挑戰和成就,希望更多開發人員能運用網站體驗核心指標,與利害關係人共同理解,再一起努力打造優質的使用者體驗和推動業務成長。