关注网站性能的策略如何让 Tokopedia 的点击率提高 35%

创建网页性能信息中心，并优化 JavaScript、资源和首页，以取得业务成功。

Tokopedia 是印度尼西亚最大的电子商务公司之一。凭借超过 270 万个全国商家网络、超过 1,800 万条产品详情和超过 5,000 万月访问量，Web 团队深知提高网站性能至关重要。通过打造以效果为先的文化，他们将点击率 (CTR) 提高了 35%，转化率 (CVR) 提高了 8%。

35%

点击率增幅

8%

转化率增幅

4秒

TTI 增幅

突出显示机会

Web 团队向其领导团队介绍了投资 Web 性能以提升用户体验和互动度的重要性，并说明了使用高级模式和 API 的性能影响。

他们采用的方法

JavaScript 和资源优化

阻塞渲染或长时间运行的 JavaScript 是导致性能问题的常见原因。为尽量减少这种情况，该团队采取了一些措施：

  • 构建了一个脚本控制器库，用于选择性地加载第三方脚本，以针对关键渲染路径进行优化。
  • 将较重的库替换为较轻的库。
  • 实现了代码拆分，并针对首屏内容进行了优化。
  • 实现了自适应加载，例如为网络速度较快的设备仅加载高质量图像，为网速较慢的设备使用低质量图像。
  • 延迟加载的非首屏图片。
  • 延迟加载非关键 JavaScript。
脚本控制器库将 TTI 提升了 4 秒

首页优化

该团队使用 Svelte 为首次访问者构建了精简版首页，确保了快捷的网站体验。此版本还使用 Service Worker 在后台缓存非精简版资源。

将应用 JavaScript 大小缩减了 88%（从 320 KB 缩减到 37 KB）。Lighthouse 得分提高了 90 分。实现了不到 1 秒的 FCP。点击率提高了 35%。转化率提高了 8%。

性能预算和监控

该团队使用 Lighthouse 和其他工具构建了一个性能监控信息中心，以提高网页质量：

  • 衡量网络质量、基础架构监控、前端性能和服务器性能。
  • 结合使用 Web 平台 API（例如 Resource Timing API 和 Server-Timing 标头）、 PageSpeed Insights (PSI) API 和 Chrome 用户体验报告数据来监控实测指标和实验室指标。
  • 分析 Lighthouse 中的图片，以帮助发现图片优化机会。
  • 在持续集成 (CI) 期间强制执行软件包大小预算。如果软件包大小超出预算，CI 运行会失败。
首页上的 TTI 得分为 2.2 秒（Lighthouse 得分：88）。产品页面上的 TTI 分数为 1.9 秒（Lighthouse 得分：86）。

作为一家电子商务企业，用户获取是我们成功的核心。我们深知网络的重要性，因此我们热衷于投资开发各种工具和功能，以便为用户提供最佳体验。

Dendi Sunardi，Tokopedia Web 平台工程经理

如需了解印度和东南亚的更多成功案例，请参阅在 Web 上扩展案例研究页面。