创建网页性能信息中心,并优化 JavaScript、资源和首页,以取得业务成功。
Tokopedia 是印度尼西亚最大的电子商务公司之一。凭借超过 270 万个全国商家网络、超过 1,800 万条产品详情和超过 5,000 万月访问量,Web 团队深知提高网站性能至关重要。通过打造以效果为先的文化,他们将点击率 (CTR) 提高了 35%,转化率 (CVR) 提高了 8%。
35%
点击率增幅
8%
转化率增幅
4秒
TTI 增幅
突出显示机会
Web 团队向其领导团队介绍了投资 Web 性能以提升用户体验和互动度的重要性,并说明了使用高级模式和 API 的性能影响。
他们采用的方法
JavaScript 和资源优化
阻塞渲染或长时间运行的 JavaScript 是导致性能问题的常见原因。为尽量减少这种情况,该团队采取了一些措施:

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

性能预算和监控
该团队使用 Lighthouse 和其他工具构建了一个性能监控信息中心,以提高网页质量:
- 衡量网络质量、基础架构监控、前端性能和服务器性能。
-
结合使用 Web 平台 API(例如
Resource Timing API
和
Server-Timing
标头)、 PageSpeed Insights (PSI) API 和 Chrome 用户体验报告数据来监控实测指标和实验室指标。 - 分析 Lighthouse 中的图片,以帮助发现图片优化机会。
- 在持续集成 (CI) 期间强制执行软件包大小预算。如果软件包大小超出预算,CI 运行会失败。

作为一家电子商务企业,用户获取是我们成功的核心。我们深知网络的重要性,因此我们热衷于投资开发各种工具和功能,以便为用户提供最佳体验。
Dendi Sunardi,Tokopedia Web 平台工程经理
如需了解印度和东南亚的更多成功案例,请参阅在 Web 上扩展案例研究页面。