Ele.me 是中國大陸最大的訂餐與外送公司。該平台服務了 2.6 億名來自中國各地超過 200 個城市的註冊使用者，擁有超過 130 萬筆餐廳商家資訊。99% 的使用者使用行動裝置訂購餐點，Ele.me 著手改善行動網頁體驗，讓不穩定的連線可以更快速穩定，並且完全仰賴多頁面應用程式的核心技術模型來滿足他們的作業需求。
- 所有預先快取網頁的載入時間減少了 11.6%
- 所有網頁的載入時間平均減少了 6.35%。
- 在 3G 網路中首次載入時，以一致的方式互動下滑到 4.93 秒
我們在推出 ele.me PWA 後，大幅縮短載入時間，讓行動版網站體驗搖身一變成為中國境內最快的訂餐網站。
Ele.me PWA 產品經理 Spencer Yang
選擇多頁應用程式和單頁應用程式
在多頁面應用程式 (MPA) 中，使用者導覽的每個路徑，會觸發對伺服器的完整要求，以及所需的相關指令碼和樣式。這與單頁應用程式 (SPA) 模型不同，每條路徑導覽都會針對與該路線相關的內容和資料觸發擷取作業，然後由用戶端應用程式上執行的 JavaScript 程式碼建構 UI。
Ele.me 近年來爆炸，導致公司內不同的業務單位成長茁壯，其中每個業務單位都分別負責在主要 https://ele.me 網域下執行微服務。Ele.me 團隊得出結論是，多頁應用程式 (MPA) 模型最適合透過多頁面應用程式 (MPA) 模型提供服務分離，每個團隊也會執行並維護自己的服務。
將 PRPL 應用至 MPA
PRPL 模式 (預先載入重要資源、轉譯初始路徑、預先快取剩餘路徑、延遲載入剩餘路徑) 可為網頁開發人員提供一組軌道引導 PWA 結構，此模式特別著重在快速互動並盡可能減少快取，進而減少網路來回行程。雖然 PRPL 已經在 SPA 上經過充分測試，但不清楚如何實際應用在 MPA。Ele.me 在考慮重新建構 MPA 做為 PWA 時，會考量 PRPL 的思維。為此，使用者應確保使用者在導覽頁面時，視需要加入 <link rel="preload"> 來預先載入該網頁的重要資源，或以充足的淺層形式顯示這些指令碼，讓瀏覽器的預載器在不需要其他提示的情況下就能執行作業。此外，只要瀏覽器支援某個 Service Worker，系統就會安裝 Service Worker，然後用於擷取及預先快取其他頂層導覽路徑，藉此逐步改善 PWA。這樣一來，使用者點選 PWA 時，就能更快載入和算繪體驗。MPA 中的每個頁面都有自己的路徑，因此加快初始路徑的算繪速度就等於採用最佳做法，為每條路線的關鍵算繪路徑進行最佳化調整。這些變更生效後，所有網頁的整體載入時間平均減少了 6.35%。
盡快提供轉換架構畫面
Ele.me 想要在使用者體驗中套用骨架畫面的概念，確保使用者每次輕觸任何按鈕或連結時，頁面都會盡快回應，方法是將使用者轉換至該新頁面，然後在內容出現時載入內容到該頁面；這也是改善 PWA 感知效能的關鍵。然而，由於 MPA 中的每個頁面都有自己的初始路徑，因此每次導覽都需要重新執行所有必要的載入、剖析和評估作業。
為解決這個問題，Ele.me 將基本架構畫面建構為實際的 UI 元件，然後使用 Vue.js 的伺服器端算繪堆疊建構 Vue 元件，然後在將 Vue 元件插入 HTML 範本之前，先將元件預先轉譯至字串。這可讓他們直接轉譯骨架畫面，並在切換頁面時體驗更流暢的轉場效果。
|
|
將共用資源快取至 Service Worker
當使用者瀏覽 PWA 時，系統會載入不同的路徑，而這將是不該從網路不斷重複載入這些路徑的浪費。為解決這個問題，Ele.me 分析了使用者最重視的重要路徑，建立 Webpack 外掛程式來收集這些重要路徑的依附元件，然後在使用者的用戶端瀏覽器中安裝 Service Worker 時，預先快取這些路徑。這些重要路徑包括構成 PWA 一般 UI 殼層的 JavaScript、CSS 和圖片。
服務工作站會在執行階段逐步快取重要 (但並不重要) 的路徑，隨著使用者持續瀏覽 PWA。這可讓 Ele.me 在所有網路條件下，直接從快取向使用者提供 PWA。結果：所有預先快取頁面的載入時間減少 11.6%。