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
4~sec~

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.

> [!NOTE]
> **Note:** Check out web.dev's [Build a performance culture](https://web.dev/explore/fast#build-a-performance-culture) collection for tips on how to persuade your cross-functional stakeholders to focus on website performance.

## The approach they used

### JavaScript and resource optimization


Render-blocking or long-running [JavaScript](https://web.dev/explore/fast#optimize-your-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](https://web.dev/articles/reduce-javascript-payloads-with-code-splitting.md.txt) and optimized for above-the-fold content.
- Implemented [adaptive loading](https://web.dev/articles/adaptive-loading-cds-2019.md.txt), e.g. only loading high-quality images for devices on fast networks and using lower-quality images for devices on slow networks.
- [Lazy-loaded](https://web.dev/articles/lazy-loading-images) below-the-fold images.
- Deferred loading of non-critical JavaScript.
![Script controller library improved TTI by 4 seconds](https://web.dev/static/case-studies/tokopedia/image/script-controller-library-49ecc2cd55dc2.png)

### Homepage optimization


The team used [Svelte](https://svelte.dev/) 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.](https://web.dev/static/case-studies/tokopedia/image/reduced-app-javascript-si-6aceaf2de0fd4.png)

### Performance budgeting and monitoring


The team built a performance monitoring dashboard using
[Lighthouse](https://web.dev/articles/lighthouse-whats-new-6)
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](https://developer.mozilla.org/docs/Web/API/Resource_Timing_API/Using_the_Resource_Timing_API) and the `Server-Timing` header), the [PageSpeed Insights (PSI) API](https://developers.google.com/speed/docs/insights/v5/get-started), and [Chrome User Experience Report](https://developer.chrome.com/docs/crux) 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).](https://web.dev/static/case-studies/tokopedia/image/22-second-tti-score-the-b434838c98deb.png)
> 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](https://web.dev/scale-on-web) page for more success
stories from India and Southeast Asia.