橘色:全新 PWA 在行動裝置上的轉換率提高了 52%

此外,新版 PWA 的平均載入時間比舊網站快 30%,不僅跳出率提高 12%,工作階段深度也高達 18%。

Adam Skręt
Adam Skręt
Marcin Sierakowski
Marcin Sierakowski
Rafał Filipek
Rafał Filipek

Orange Polska S.A. (國際 Orange 集團) 是波蘭頂尖的電信服務供應商,包括行動裝置和固定電信服務,例如語音、數據、網際網路和電視。此外,我們也提供 IT 和整合服務、租用線路,以及其他電信加值服務與設備。

新版 PWA 的螢幕截圖。

挑戰

我們都知道,網站長時間載入時,使用者的焦慮會變得刺激。 對於實體形象幾乎或完全沒有的數位公司而言,這一點顯而易見,特別是在行動應用程式方面,我們的內部研究清楚顯示,使用者解除安裝應用程式的關鍵是速度最重要。不過,如果您是像我們這樣的知名產業營運,就對經銷通路制定了嚴格的實體通路策略,數位速度的影響並不明顯,因為數位並非我們銷售的唯一來源。這也讓說服高階主管更難以投資速度。

向高階主管推銷時,我們參考 Google Analytics (分析) 的歷來成效資料,清楚顯示載入時間和轉換率之間的關聯,讓我們的個案更加完善。冷知識卻顯示,每多一秒網頁載入時間就能減少 15-20% 的收益和銷售。

顯示載入時間和轉換關聯性的圖表。
上頭圖表 (橘色) 會顯示舊網站的轉換率,並按載入時間區隔。舉例來說,左側第一個長條代表載入時間不到 2 秒的使用者。旁邊的長條代表載入時間介於 2 到 3 秒之間的使用者。底部圖表 (灰色) 顯示所有使用者在舊網站上實際體驗的載入時間。

方法

我們決定打造漸進式網頁應用程式 (PWA)。由於有超過 75% 的客戶是透過行動裝置瀏覽我們的網站,因此我們特別將重心放在行動流量該團隊也很重視改善主要成效指標,並提供更吸引人的使用體驗。

我們成立了全新的跨職能小組 (包括 IT、業務與使用者體驗專家),以提供概念驗證來回答下列問題:

  • 我們能否有效縮短載入時間,同時遵守舊有的舊有限制?
  • 這會對轉換和收益造成什麼實際影響?

我們之所以選擇 Next.js,是因為有許多預設啟用或易於設定的最佳化功能,例如自動伺服器端轉譯 (這對我們的搜尋引擎最佳化來說特別重要)、資料預先擷取和程式碼分割。另一個關鍵考量因素是,Next.js 可讓我們逐一遷移網頁,而不會在舊版應用程式中造成任何問題。然而,我們必須在仍然仰賴舊有系統的複雜環境中管理轉換作業,導致服務中斷。為解決上述問題,我們整合了 Workbox,即使後端已關閉,我們的網站仍可正常運作。而且內建預先快取、要求轉送和執行階段快取解決方案,擁有絕佳的效能。

結果

新版 PWA 的平均載入時間比舊網站快 30%,行動裝置上的轉換率提升 52%、跳出率提高 12%,工作階段深度也提升了 18%。 這項經驗證實可將所有面向客戶的解決方案 (包括客戶服務和銷售人員前端) 轉換至 PWA 技術。