Truebil 如何透過網站成長茁壯

瞭解新創公司如何打造一流的網路體驗。

關於

Truebil 成立於 2015 年，是印度線上市集，專門販售經過 100% 認證的二手車。這個平台每月活躍使用者超過 140 萬人，提供一站式解決方案，包括過戶、保險、貸款和服務保固。潛在顧客可以查看個別產品頁面，其中包含圖片和詳細的檢查報告，並透過網站的「比較」和「Truescore」功能取得車輛評估結果。Truebil 的產品提供豐富的功能，包括根據機器學習技術提供的個人化推薦、加入我的最愛功能、分享車輛功能等，藉此與其他產品做出區隔。

挑戰

Truebil 是一間精實的新創公司，交易頻率低但價值高，因此選擇合適的平台並優先投入資源至關重要。

Truebil 將行動裝置視為目標平台，並選擇網路做為第一個應用程式「Truebil Lite」的平台，因為網路容易探索且阻力較低。相較於建構 Android/iOS 應用程式，網路技術的開發成本較低，資料和記憶體用量較少，獲取新客的成本也大幅降低。此外，Truebil 透過建構漸進式網路應用程式 (PWA)，可享有網路的各項優勢和 iOS/Android 的好處。

解決方案

Truebil Lite 由內部團隊開發，歷時四個月，採用 React、Django 和 Preact (用於正式環境遷移)。他們根據使用者目標，為網頁應用程式設定明確的指導原則。使用者體驗必須符合下列條件：

• 快速載入網頁，並在後續導覽中保持快速，
• 可靠，不受使用者網路或裝置限制，且
• 吸引人，尤其是在小螢幕行動裝置上，讓使用者想再次造訪。

加快首次載入和導覽速度

團隊使用 Lighthouse 指引進行效能最佳化，並在導入新功能時，採用效能優先的文化。Truebil 優先處理首次內容繪製和可互動時間 (TTI) 指標，並針對快速首次載入、重複造訪和流暢導覽進行最佳化，大幅提升使用者體驗。該團隊設定了成效預算，並運用各種技巧達成目標，因此獲得上述成果。

設定成效預算

Truebil 團隊以效能為優先考量，選擇將體驗架構為單頁應用程式，首次載入時採用伺服器端算繪，後續載入則採用用戶端算繪。維持採用用戶端算繪的網頁應用程式效能並不容易，因此 Truebil 設定了非常嚴格的效能預算，確保不會犧牲速度，尤其是在新增更多功能時。

該團隊為 TTI 設定了嚴格的里程碑預算，目標是將 TTI 控制在 5 秒以下。為達成這個目標，他們手動確保建構作業不會超過 250 KB 的 JavaScript 套件大小，並持續檢查圖片大小，以及追蹤應用程式的 Lighthouse 效能分數。

最佳化 JavaScript 套件

團隊先從基礎著手，使用 PRPL 模式預先快取及最佳化 JavaScript 酬載，並改用 HTTP/2 提供重要 JavaScript 組合。

為延遲載入非重要資源，他們使用架構層級的延遲載入元件，載入摺疊以下片段。

為移除 JavaScript 套件瓶頸，團隊透過程式碼分割減少酬載。他們使用以元件和路徑為基礎的區塊，縮減主要套件大小，並將載入時間縮短 44%，TTI 從 6 秒降至約 5 秒，首次有意義的繪製 (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=prefetch> 動態下載下一個網頁資源，確保使用者瀏覽過程順暢。團隊手動找出要預先擷取的連結，並使用 webpack 將這些連結的 JS 檔案打包。

最佳化圖片和字型

圖片是 Truebil 產品體驗和可信度的重要元素，每個產品資訊最多可包含 40 張圖片。為確保圖片不會阻礙網頁載入，團隊選擇從 CDN 提供所有資源，並使用 imagemagick 最佳化圖片。他們也對所有可壓縮的資源 (包括圖片、JavaScript 和 CSS) 進行 Gzip 壓縮，進一步縮短載入時間。

為避免出現無文字的閃爍畫面，同時盡可能縮短載入時間，Truebil 設定 CSS，在外部字型載入完成前，使用系統字型做為備用字型。

進一步最佳化

應用程式準備就緒後，團隊想進一步縮減供應商套件大小和 JavaScript 執行時間，因此在正式環境中將 React 應用程式切換為 Preact。(詳情請參閱 React 集合。)這個方法有助於將供應商套件大小從 82.3 KB 縮減至 51.2 KB。

內建可靠性

Truebil 的目標市場是印度，因此絕大多數使用者都是透過網路不穩定的連線存取產品，有時頻寬甚至低至 2G。因此，建構彈性體驗至關重要，不僅能提升網路受限時的效能，還能提供使用者信賴的產品，確保隨時都能正常運作。

混合式快取策略，確保載入作業穩定進行

Truebil 內容的互動性和變化率差異很大。為確保所有內容都是最新且可靠的，Truebil 團隊採用了網路優先、快取優先和最快優先策略，實作 API 快取。

對於訂閱頁面等靜態網頁，Truebil 會先採用快取優先策略，前往訂閱 API 快取，然後再返回網路。

對於動態內容很少變更的網頁 (例如產品目錄或詳細資料頁面)，Truebil 會採用「網路優先」策略，讓瀏覽器先檢查網路是否有內容，如果網路無法連線，再回頭使用 API 快取。

對於經常變動的動態網頁 (例如首頁、篩選器、搜尋和城市頁面)，Truebil 會採用「最快優先」策略，根據網路或快取哪個先出現，選擇使用哪個。為確保內容為最新版本，只要網路回應與快取中的內容不同，系統就會更新快取。

Service Worker 可提供完整的離線體驗

雖然 Truebil 的大部分內容都是高度動態，隨時可能新增或購買車輛，但團隊仍希望確保使用者有內容可互動，即使網路不穩或完全離線也一樣。

該團隊運用 Service Worker 快取靜態資料和使用者已互動的動態資料，讓使用者離線時也能查看。為確保使用者瞭解內容可能會在連線後變更，團隊將使用者介面改為灰階，表示目前處於離線模式。瀏覽產品頁面是 Truebil 使用者歷程的重要環節。至少造訪過一次 PWA 的使用者可以瀏覽先前造訪過的商品資訊和產品頁面，但無法查看商品資訊或產品的任何更新。

提高參與度，吸引使用者回訪

引人入勝的初次體驗

由於大多數使用者來自付費管道，Truebil 需要在快速載入的網路應用程式中，加入可顯示高度相關建議的產品，以提高轉換率。該團隊為現有使用者提供推薦系統，但這套系統無法為首次登入的使用者提供服務。

為避免新使用者遇到冷啟動問題，團隊整合了推薦系統，並運用數位行銷活動。他們會透過 Urchin 流量監視器 (UTM) 參數，將車款、價格和車身類型等產品詳細資料加入廣告的到達網頁網址，供推薦系統讀取並顯示在產品中。如果系統在網址中找不到這類詳細資料，就會改為顯示熱門車款，也就是熱門車型、熱門預算，以及過去幾週或幾天內熱門的車輛。

可安裝的網頁應用程式

Truebil 打造了快速且功能齊全的網頁應用程式，提供引人入勝的使用者體驗，並希望確保使用者會持續回訪。他們發現，如果使用者能安裝應用程式，日後造訪網站時就會更加順暢。

該團隊導入「新增至主畫面」功能，將產品打造成完整的漸進式網頁應用程式 (PWA)。使用者可以透過這種方式將 Truebil Lite 新增到主畫面，並以全螢幕模式啟動。由於開發團隊已實作離線模式，因此可以輕鬆新增這項功能。

為確保使用者不會收到垃圾訊息，並提高使用者安裝應用程式的機率，該團隊最近更新了宣傳 PWA 安裝的策略，讓安裝提示在對不同類型使用者真正有幫助時顯示。Truebil 決定採用三步驟策略：

• 在使用者完成動作或處於閒置狀態時顯示提示。
• 向成熟使用者顯示情境提示。
• 在使用者於網站上停留一段時間後，顯示橫幅。

在程序完成時和高流量網頁上顯示預設橫幅

團隊決定在使用者完成工作或位於高流量頁面但處於閒置狀態 (即未採取任何動作，例如捲動或填寫表單) 時，顯示安裝橫幅。這樣一來，他們就能避免中斷使用者的活動。

向成熟期使用者顯示情境提示

對於已與應用程式互動一段時間的使用者，團隊會使用情境高度相關的自訂訊息，向他們說明將應用程式安裝到主畫面的價值：

時間型提示的自訂橫幅

最後，團隊建構了非侵入式橫幅，採用類似通知的設計，會在特定事件觸發時顯示，例如開啟房源頁面，或使用者在應用程式中停留一段時間後：

由於這些改善措施，Truebil 的轉換率和參與度大幅提升，使用者工作階段時間延長 26% ，轉換次數增加 61% 。由於每次轉換的交易價值很高，這對 Truebil 的業務來說意義重大。

對於資源有限的新創公司來說，選擇合適的平台對業務成功至關重要。改用以速度、彈性和參與度為主的 PWA 後，由於轉換次數增加，加上網頁觸及率高，我們的收益與行銷支出比率提高了 80%。

Truebil 共同創辦人暨產品與資料科學長 Rakesh Raman