著重網站效能如何提升 Tokopedia' 的點閱率增加了 35%

建立網站效能資訊主頁，最佳化 JavaScript、資源和首頁，讓業務成長茁壯。

Tokopedia 是印尼規模最大的電子商務公司之一。網路團隊在全國超過 270 萬個商家聯播網、超過 1,800 萬則產品資訊，每月訪客超過 5,000 萬人。藉由打造以成效為優先的文化，他們將點閱率 (CTR) 提高 35%，轉換次數 (CVR) 也增加了 8%。

35%

點閱率成長幅度

8%

轉換率升幅

4秒

TTI 的改善項目

突顯商機

網站團隊訪問了領導團隊，探討投資網路效能以改善使用者體驗和參與度的重要性，也說明瞭使用進階模式和 API 對效能的影響。

他們使用的做法

JavaScript 和資源最佳化

JavaScript 會遭到封鎖或長時間執行，是造成效能問題的常見原因。為盡可能避免這種情況，我們的團隊採取了以下幾個步驟：

  • 建構指令碼控制器程式庫，以便選擇性載入第三方指令碼，針對重要轉譯路徑進行最佳化。
  • 以較輕量的程式庫取代更重的程式庫。
  • 實作程式碼分割，並針對不需捲動位置的內容進行最佳化。
  • 實作自動調整載入，例如只針對使用快速網路的裝置載入高品質圖片，而在網路速度緩慢時，使用較高畫質的圖片。
  • 延遲載入的需捲動位置圖片。
  • 延後載入非重要的 JavaScript。
指令碼控制器程式庫將 TTI 改善 4 秒

首頁最佳化

該團隊利用 Svelte 為初次造訪的使用者建構精簡的首頁，確保提供快速的網站使用體驗。這個版本也使用了 Service Worker，在背景快取非 Lite 資產。

將應用程式 JavaScript 大小縮減 88% (從 320 KB 縮減至 37 KB)。Lighthouse 分數提高了 90 分FCP 低於 1 秒。點閱率增加 35%。轉換率增加 8%。

效能預算及監控

該團隊使用 Lighthouse 和其他工具，建構出效能監控資訊主頁，藉此改善網頁品質：

  • 評估網路品質、基礎架構監控、前端效能和伺服器效能。
  • 結合運用網路平台 API (例如 Resource Timing API 和 Server-Timing 標頭)、 PageSpeed Insights (PSI) API 和 Chrome 使用者體驗報告資料，監控現場和研究室指標。
  • 分析 Lighthouse 中的圖片，找出圖片最佳化機會。
  • 在持續整合 (CI) 期間強制執行套裝組合大小預算。如果套裝組合大小超過預算，CI 執行作業就會失敗。
2.2 秒在首頁的 TTI 分數 (Lighthouse 分數：88)1.9 秒產品頁面的 TTI 分數 (Lighthouse 分數：86)。

我們成功的關鍵在於電子商務業務。我們瞭解網路的重要性，因此也十分樂意投資所有能夠為使用者提供最佳使用者體驗的工具和功能。

Tokopedia 網路平台工程經理 Dendi Sunardi

如需更多印度和東南亞的成功案例，請參閱「擴大網路規模個案研究」頁面。