How Tokopedia Achieves 90% Mobile Web Performance at Tokopedia
Original post Achieving 90% Mobile Web Performance at Tokopedia
Article Summary
Tokopedia slashed their mobile homepage JavaScript from 320kB to just 37kB. Here's how they did it without rebuilding everything.
Indonesia's largest e-commerce platform needed a blazing-fast landing page for new mobile users. Instead of using AMP, they experimented with SvelteJS, a framework that compiles to vanilla JavaScript, to create a lightweight alternative to their React app.
Key Takeaways
- Reduced JavaScript bundle from 320kB to 37kB (88% reduction)
- Achieved 90+ Lighthouse score and 4-second time to interactive
- Used Svelte with SSR, Emotion for CSS, and dynamic polyfill loading
- Service worker precaches React app assets in background for seamless navigation
- Built proof of concept in just 2 weeks with unfamiliar tech stack
By replacing their React homepage with a Svelte-powered landing page, Tokopedia cut load times to near-zero on 4G while maintaining identical UI and user experience.
Continue reading
What This Article Covers
Tokopedia's homepage got a lot of traffic, but it was too complex to build with AMP's limited JavaScript. The team needed a different approach.
They switched to SvelteJS, which compiles to vanilla JavaScript. They added Emotion for CSS-in-JS and set up dynamic polyfill loading to keep the initial bundle small while still supporting server-side rendering for SEO.
Time to interactive dropped to 4 seconds and the Lighthouse score averaged 93. On 4G connections, Google's Test My Site tool showed 0-second load times for the new landing page.
This page summarizes “Achieving 90% Mobile Web Performance at Tokopedia” by Tokopedia, published Jun 15, 2021. All credit for the original work goes to the authors.
