How focusing on web performance improved Tokopedia's click-through rate by 35%

Creating a web performance dashboard and optimizing JavaScript, resources, and the homepage to achieve business success.

Tokopedia is one of the largest e-commerce companies in Indonesia. With 2.7M+ nationwide merchant networks, 18M+ product listings, and 50M+ monthly visitors, the web team knew that investment in web performance was essential. By building a performance-first culture, they achieved a 35% increase in click-through rates (CTR) and an 8% increase in conversions (CVR).

35%

Increase in CTR

8%

Increase in CVR

4sec

Improvement in TTI

Highlighting the opportunity

The web team talked to their leadership team on the importance of investing in web performance to improve user experience and engagement, and also showed the impact of performance using advanced patterns and APIs.

The approach they used

JavaScript and resource optimization

Render-blocking or long-running JavaScript is a common cause of performance issues. The team took several steps to minimize this:

  • Built a script controller library to selectively load third-party scripts to optimize for critical rendering path.
  • Replaced heavier libraries with lighter ones.
  • Implemented code splitting and optimized for above-the-fold content.
  • Implemented adaptive loading, e.g. only loading high-quality images for devices on fast networks and using lower-quality images for devices on slow networks.
  • Lazy-loaded below-the-fold images.
  • Deferred loading of non-critical JavaScript.
Script controller library improved TTI by 4 seconds

Homepage optimization

The team used Svelte to build a lite version of the homepage for first-time visitors, ensuring a fast website experience. This version also used a service worker to cache the non-lite assets in the background.

Reduced app JavaScript size by 88% (from 320 KB to 37 KB). Boosted Lighthouse score by 90 points. Achieved FCP of less than 1 second. 35% CTR increase. 8% CVR increase.

Performance budgeting and monitoring

The team built a performance monitoring dashboard using Lighthouse and other tools to improve the quality of web pages:

  • Measures network quality, infrastructure monitoring, frontend performance, and server performance.
  • Uses a combination of web platform APIs (such as the Resource Timing API and the Server-Timing header), the PageSpeed Insights (PSI) API, and Chrome User Experience Report data to monitor field and lab metrics.
  • Analyzes images from Lighthouse to help identify image optimization opportunities.
  • Enforces a bundle-size budget during continuous integration (CI). The CI run fails if the bundle size is over budget.
2.2 second TTI score on the homepage (Lighthouse score: 88). 1.9 second TTI score on product pages (Lighthouse score: 86).

Being an e-commerce business, user acquisition is at the heart of our success. We acknowledge the importance of the web and thus we are passionate about investing in all the tools and features that will give the best user experience to our users.

Dendi Sunardi, Engineering Manager, Web Platform, Tokopedia

Check out the Scale on web case studies page for more success stories from India and Southeast Asia.