Optimising Core Web Vitals at Carousell
Article Summary
Shubham Desale from Carousell improved all Core Web Vitals by at least 40%. The secret? Knowing when NOT to follow best practices.
Carousell, Southeast Asia's leading marketplace, tackled their web performance problem systematically using Google Search Console and Lighthouse. They focused on homepage and product pages, discovering that blindly applying SSR and lazy-loading can actually hurt performance if not implemented thoughtfully.
Key Takeaways
- Homepage LCP dropped 65% using selective SSR (only above-the-fold content)
- Removed lazy-loading from hero images: JS dependency was slowing LCP by 200ms
- Cut 8% of JS bundle size by lazy-loading unused dynamic UI components
- CLS improved from 41% to 74% good scores by restricting image aspect ratios
- Created GTM review process: marketing tags now profiled before production
Carousell reached 'Good' performance levels in multiple markets by selectively applying SSR, removing unnecessary lazy-loading, and auditing third-party scripts.
About This Article
Product detail pages on Carousell were loading images slowly. The lazy-loading components would show placeholders first, which created a JavaScript dependency that kept the actual product images from appearing right away.
The team ditched lazy-loading for product images and added preloading directives to the DOM instead. This let the browser find and download images immediately without waiting.
The change cut about 200ms off LCP performance. It's a good reminder that sometimes removing a feature works better than piling on more complexity.