新創公司打造一流網路體驗的故事。
關於
Truebil 成立於 2015 年,是印度的線上市集,專門販售 100% 認證的二手車。這個平台每月活躍使用者人數超過 140 萬,提供車輛過戶、保險、貸款和服務保固等一站式服務。潛在客戶可以查看個別產品頁面,瞭解圖片和詳細檢查報告,並透過網站的「比較」和「Truescore」功能取得車輛評估。Truebil 提供多項功能,包括機器學習技術輔助的個人化推薦內容、新增至「我的最愛」功能、共享車輛功能等,讓產品與眾不同。
挑戰
Truebil 是一家精簡型新創公司,交易頻率低但價值高,因此必須選擇合適的平台,才能優先投資。
Truebil 將行動裝置視為目標平台,並選擇網路做為第一個應用程式 Truebil Lite 的平台,因為網路容易被發現,且使用門檻較低。與建構 Android/iOS 應用程式相比,網頁技術可降低開發成本、減少資料和記憶體用量,並大幅降低獲取新客的成本。此外,Truebil 建構漸進式網路應用程式 (PWA) 後,就能享有網頁技術和 iOS/Android 的所有優點。
解決方案
內部團隊花了四個月的時間,使用 React、Django 和 Preact (用於正式版遷移) 開發 Truebil Lite。他們根據使用者目標,為網頁應用程式訂定明確的指導原則。使用者體驗必須具備以下特質:
- 初次載入和後續導覽的速度快速
- 可靠,不受使用者的網路或裝置限制影響。
- 引人入勝,尤其是在小型行動裝置螢幕上,這樣使用者才會想再次造訪。
加快首次載入和導覽速度
團隊使用 Lighthouse 引導效能最佳化,在導入新功能的同時,也採用效能優先的文化。Truebil 將 首次顯示內容所需時間和互動時間 (TTI) 指標列為優先,並針對快速初次載入、重複造訪和順暢瀏覽進行最佳化,大幅改善使用者體驗。團隊設定成效預算,並運用各種技巧達成目標。
設定成效預算
秉持著以效能為優先的理念,Truebil 團隊選擇以單頁應用程式架構體驗,在初次載入時使用伺服器端轉譯,後續載入時則使用用戶端轉譯。要讓採用用戶端算繪的網頁應用程式維持高效能,可能會相當困難,因此 Truebil 設定了非常嚴格的效能預算,確保不會犧牲速度,尤其是在新增更多功能時。
團隊為 TTI 設定嚴格的里程碑預算,目標是將 TTI 控制在五秒以下。為達成這個目標,他們手動確保任何版本的 JavaScript 套件大小都不會超過 250 KB,並持續檢查圖片大小,並持續追蹤應用程式的 Lighthouse 效能分數。
最佳化 JavaScript 套件
團隊一開始就從基本做起,使用 PRPL 模式預先快取及最佳化 JavaScript 酬載,並改用 HTTP/2 來提供重要的 JavaScript 套件。
為了延後載入非關鍵資源,他們使用了架構層級的延後載入元件,載入下折疊邊緣的片段。
為了移除任何 JavaScript 套件瓶頸,團隊透過程式碼分割來減少酬載。他們使用了元件和路徑為基礎的區塊切割,縮減了主套件的大小,並將載入時間縮短 44%,TTI 從 6 秒降至約 5 秒,First Meaningful Paint (FMP) 則從 4.1 秒縮短至 3.6 秒。

內嵌重要的 CSS
為了進一步改善 FMP,團隊使用 Lighthouse 找出最佳化成效的機會,並驗證成效。Lighthouse 指出,減少阻斷轉譯的 CSS 可帶來最大效益,因此 Truebil 內嵌所有重要的 CSS,並延後不重要的 CSS。這項技巧可將 FMP 縮短約 2 秒。

避免多次往返任何來源的昂貴行程
為了減少 DNS 和 TLS 的額外負擔,Truebil 使用了 <link rel="preconnect">
和 <link rel="dns-prefetch">
。這種做法會讓瀏覽器在網頁載入時盡快完成 TLS 握手程序,並預先解析跨來源網域名稱,提供安全、快速的使用者體驗。

<link rel=preconnect>
的影響。動態預先擷取下一頁
該團隊分析資料後,找出最常見的使用者歷程,並著手進行最佳化。在這種情況下,應用程式會使用 <link rel=prefetch>
動態下載下一頁資源,確保使用者能順利瀏覽網頁。團隊會手動找出要預先載入的連結,並使用 webpack 將這些連結的 JS 打包。

最佳化圖片和字型
圖片是 Truebil 產品體驗和信譽的重要元素,每個產品資訊最多可包含 40 張相片。為確保圖片不會阻礙網頁載入,團隊選擇透過 CDN 提供所有資源,並使用 imagemagick 進行圖片最佳化。他們也使用 GZIP 壓縮所有可壓縮的資源,包括圖片、JavaScript 和 CSS,進一步縮短載入時間。
為了避免出現看不見的文字,同時盡可能縮短載入時間,Truebil 將 CSS 設為在外部字型載入前,使用系統字型做為備用字型。
進一步最佳化
應用程式完成後,團隊希望進一步縮減供應商套件大小和 JavaScript 執行時間,因此在正式版中將 React 應用程式切換為 Preact。(詳情請參閱 React 集合)。這個方法有助於將供應商套件大小從 82.3 KB 縮減至 51.2 KB。
內建可靠性
Truebil 專注於印度市場,因此絕大多數使用者都是透過不穩定的網路存取產品,有時頻寬甚至低至 2G。因此,建立可靠的體驗至關重要,這不僅有助於在受限的網路環境中提升效能,還能提供使用者信賴的產品,讓產品「一如既往」運作。
混合式快取策略,可確保可靠的載入
Truebil 內容的互動性和變化率差異很大,為確保所有內容都新鮮可靠,Truebil 團隊採用網路優先、快取優先和速度優先策略的組合,實作 API 快取功能。
針對靜態網頁 (例如訂閱頁面),Truebil 會採用快取優先策略,先存取訂閱 API 快取,再改為網路。
如果網頁的動態內容很少變動 (例如產品清單或詳細資料頁面),Truebill 會採用網路優先策略,讓瀏覽器先檢查網路內容,然後在網路無法使用時改用 API 快取。
至於經常變動的動態網頁 (例如首頁、篩選器、搜尋和城市頁面),Truebill 會採用最快優先策略,根據先到先得的策略選擇網路或快取。為確保內容保持最新狀態,當網路回應與快取中的內容不同時,系統就會更新快取。
提供完整離線體驗的 Service Worker
雖然 Truebil 的內容大多具有高度動態性 (可隨時新增或購買汽車),但團隊希望確保使用者即使在網路不穩定或完全離線的情況下,也能瀏覽某些內容。
團隊使用service worker,可同時快取靜態資料和使用者已互動的動態資料,讓使用者在離線時也能查看這些資料。為了讓使用者知道內容可能會在重新連線時變更,團隊將 UI 變更為灰階,以表示離線模式。瀏覽產品頁面是 Truebil 使用者歷程中的重要環節。使用者至少造訪過一次 PWA,就能瀏覽先前造訪過的產品資訊和產品頁面,但無法查看產品資訊或產品的任何更新內容。

提高參與度,吸引使用者回訪
吸引人的初次體驗
由於大部分使用者來自付費管道,Truebil 需要透過提供高度相關的推薦內容,為快速載入的網頁應用程式增添產品,以提高轉換率。雖然該團隊為現有使用者採用了以精密篩選為基礎的推薦系統,但系統無法為首次登入的使用者運作。
為避免初次使用者無法順利開始使用,團隊整合了數位行銷活動的推薦系統。他們透過 Urchin 流量監視器 (UTM) 參數,將車款型號、價格和車身類型等產品詳細資料加入廣告的到達網頁網址,系統會讀取這些參數,並在顯示的產品中反映。如果系統無法從網址讀取這類詳細資料,就會改為使用熱門車款,也就是熱門車款、熱門預算和過去幾週或幾天內熱門車款的組合。
可安裝的網頁應用程式
Truebil 已建構出快速且功能齊全的網路應用程式,提供引人入勝的使用者體驗,因此希望確保使用者持續回訪。他們發現,讓使用者可安裝應用程式,可讓重複造訪的流程更流暢。
團隊導入了「Add to Home Screen」功能,將產品打造為完整的漸進式網頁應用程式 (PWA)。這個方法可讓使用者將 Truebil Lite 新增至主畫面,並以全螢幕模式啟動應用程式。由於他們已實作離線模式,因此開發團隊可以輕鬆新增新功能。
為確保使用者不會收到垃圾郵件,並提高安裝應用程式的可能性,該團隊最近更新了推廣 PWA 安裝作業的策略,讓安裝提示在對不同類型的使用者有用的情況下顯示。Truebil 採用了三項策略:
- 在使用者完成動作或處於閒置狀態時顯示提示。
- 向成年使用者顯示情境提示。
- 在使用者在網站上停留一段指定時間後顯示橫幅廣告。
在程序完成和流量高的網頁上顯示預設橫幅
團隊決定在使用者完成工作或瀏覽流量高的網頁時,但處於閒置狀態 (也就是沒有採取任何動作,例如捲動或填寫表單) 時,顯示安裝橫幅。這項做法可避免中斷使用者的活動。
針對成人使用者顯示情境提示
針對已與應用程式互動一段時間的使用者,團隊使用高度符合情境的自訂訊息,說明將應用程式安裝至主畫面的價值:
時間提示的自訂橫幅
最後,團隊在設計中加入了非侵入式橫幅,採用類似通知的設計,可在特定事件觸發時顯示,例如開啟商家資訊頁面,或是使用者在應用程式中停留一段時間後:

由於這些改善,Truebil 的轉換和參與率大幅提升,使用者工作階段延長 26% ,轉換次數增加 61% ,這對他們的業務來說意義重大,因為每筆轉換的交易價值都很高。
對於資源有限的新創公司來說,選擇合適的平台對於業務成功至關重要。我們改用以速度、彈性和參與度為重點的 PWA,轉換次數增加,且網頁的觸及範圍更廣,因此收益/行銷支出比率提升了 80%。
Truebil 共同創辦人暨產品與數據科學總監 Rakesh Raman
44%
改善載入時間
26%
使用者工作階段時間延長
61%
轉換量升幅
80%
提高收益與行銷支出比