新創公司的成功案例，說明打造業界一流的網路體驗。
簡介
Truebil 成立於 2015 年，是一家印度線上市集，販售 100% 認證二手車。這項解決方案的綜合性解決方案擁有超過 140 萬名每月活躍使用者，包括所有權轉移、保險、貸款及服務保固。潛在顧客能查看個別產品網頁，上面附有圖片和詳細檢查報表，並透過網站的「比較」和「Truescore」功能取得車輛估價。Truebil 為自家產品提供豐富功能，包括以機器學習為基礎的個人化建議、加入收藏的功能，以及共享汽車功能等。
挑戰
Truebil 是營運頻率低落、高價值交易不多的新創公司，因此務必選擇適合優先處理和投資的平台。
Truebil 將行動裝置視為目標平台，並選擇打造第一款應用程式 Truebil Lite，因為網頁容易找到，而且操作起來很順暢。與建構 Android/iOS 應用程式相比，網路技術的開發成本更低、數據用量和記憶體用量更低，並大幅降低客戶開發成本。透過建構漸進式網頁應用程式 (PWA)，Truebil 可享有所有網路優勢，以及 iOS/Android 的優勢。
解決方法
內部團隊花了四個月的時間，使用 React、Django 和 Preact (針對實際工作環境遷移) 開發 Truebil Lite。並根據使用者的目標制定網頁應用程式的明確指導原則。體驗必須符合下列條件：
- 在首次載入和後續瀏覽時快速。
- 可靠，不受使用者的網路或裝置限制影響。
- 引人入勝，特別是在小行動裝置的螢幕上，因此使用者會想要回訪。
進行最佳化調整，加快首次載入和瀏覽的速度
該團隊運用 Lighthouse 引導效能最佳化，在導入新功能的同時，採用以成效為優先的文化。Truebil 優先採用首次顯示內容繪製和互動時間 (TTI) 指標，並針對首次載入、重複造訪和順暢瀏覽進行最佳化，大幅提升使用者體驗。該團隊透過設定效能預算，並採用各種技術來實現上述成果。
設定效能預算
憑藉效能優先的原則，Truebil 團隊選擇將使用者體驗架構為單頁應用程式，並針對首次載入和用戶端算繪，設計兩者的使用者體驗。想讓網頁應用程式保持用戶端轉譯效能並不容易，因此 Truebil 設定了非常嚴格的效能預算，以免對速度造成負面影響，特別是在新增更多功能的情況下。
團隊為 TTI 設定了嚴格的里程碑預算，目標是維持在 5 秒以下。為了達成這個目標，他們手動確保建構作業不會超過 250 KB JavaScript 套件大小、持續檢查圖片大小，並持續追蹤應用程式的 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 進行圖片最佳化。他們也對所有可壓縮資源 (包括圖片、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 內容的大部分內容都相當動態 (例如汽車隨時都可加入或購買)，該團隊也想確保使用者有「部分」內容能與他們互動，即使他們是透過修補網路或完全離線使用也沒問題。
使用服務工作處理程序的團隊時，團隊也能快取靜態資料和使用者已互動的動態資料，讓使用者可在離線時查看這些資料。為確保使用者瞭解內容可能會在重新上線後有所變動，該團隊將 UI 變更為灰階，表示離線模式。瀏覽產品網頁是 Truebil 使用者歷程中重要的一環。包括至少造訪 PWA 一次的使用者，可以瀏覽先前造訪過的商家資訊和產品頁面，但無法查看產品資訊或產品的任何更新。
提高參與度，吸引使用者持續回訪
吸引人的初次體驗
由於他們大部分的使用者來自付費管道，因此 Truebil 需要利用產品，顯示高度相關建議來提高轉換率，藉此來補充快速載入的網頁應用程式。雖然團隊使用以現有使用者精細篩選功能為基礎的推薦系統，但該系統不適用於首次登入的使用者。
為了避免讓首次使用新手進行測試，該團隊透過數位行銷活動整合了推薦系統，這類廣告活動可透過 UTM 參數，在廣告的到達網頁網址中加入車款、價格和車型等產品詳細資料，而 Urchin 流量監視器 (UTM) 參數會讀取該參數，並反映於顯示的產品中。如果系統在網址中找不到這類詳細資料，就會改回使用熱門車款，也就是過去幾週或幾天內的熱門車款、熱門預算和汽車組合。
可安裝的網頁應用程式
Truebil 開發了快速、功能完整的網頁應用程式，並提供吸引人的使用者體驗，因此希望確保使用者持續回訪。該公司發現，提供可安裝的應用程式可以讓你更順暢地重複造訪。
該團隊已導入新增至主畫面功能，將產品打造成完整的漸進式網頁應用程式 (PWA)。這個方法可讓使用者將 Truebil Lite 新增到主畫面，並以全螢幕模式啟動。由於該公司已導入離線模式，因此該團隊能輕鬆新增新功能。
為確保使用者不會受到垃圾內容幹擾，並增加使用者安裝應用程式的機率，該團隊最近更新了宣傳 PWA 的策略，好讓不同類型的使用者能實際運用安裝提示。Truebil 決定採用三部分策略：
- 在使用者完成操作或閒置時顯示提示。
- 對成人使用者顯示符合情境的提示。
- 當使用者在網站上停留一定時間時顯示橫幅。
程序完成及高流量網頁上的預設橫幅廣告
當使用者完成一件任務，或是位於高流量頁面但閒置 (亦即不會採取動作，例如捲動或填寫表單) 時，團隊決定顯示安裝橫幅。這種做法可以避免干擾使用者的活動。
對成年使用者顯示的相關提示
對於曾與應用程式互動一段時間的使用者，他們運用高度符合情境的自訂訊息，在主畫面上展現安裝應用程式的價值：
根據時間提示的自訂橫幅
最後，該團隊還建立了一種非干擾性橫幅，其中採用類似通知的設計，會在特定事件 (例如開啟資訊頁面，或使用者已使用一定時間的應用程式) 後觸發。
這些改善項目讓 Truebil 的轉換率和參與度大幅成長，包括使用者工作階段增加 26% ，轉換次數也增加 61% 。由於每次轉換交易的價值都較高，這對自家業務來說十分重要。
對於資源有限的新創公司，選擇合適的平台是公司邁向成功的關鍵。改用以速度、應變和參與度為主的 PWA，不僅可加快轉換，也能夠順暢地觸及網路，結果行銷支出因而提高了 80%。
Truebil 產品與數據資料學共同創辦人兼執行長 Rakesh Raman
44%
縮短載入時間
26%
使用者工作階段時間較長
61%
轉換量升幅
80%
收益行銷支出的增幅