Mobile Web Performance (Caviar)
Article Summary
Caviar's mobile site was bleeding conversions. Their homepage took nearly 10 seconds to load, and 53% of users were bouncing before seeing a single restaurant.
The Caviar engineering team shares their systematic approach to mobile web performance optimization. They moved from a desktop-first to mobile-first experience, using Lighthouse audits and webpack analysis to identify bottlenecks across their most critical user journeys.
Key Takeaways
- Image optimization alone cut First Contentful Paint from 9.45s to 3.5s (6 second improvement)
- Reduced DOM nodes by 50% and improved Time to Interactive by 4 seconds
- Code splitting with HTTP/2 slashed base bundle sizes by over 50% (436kb to 233kb vendor)
- Built performance budgets into CI pipeline to catch regressions on every commit
- Final TTI dropped to 13 seconds, moving Lighthouse score into the green
Critical Insight
Through image optimization, strategic code splitting, and performance monitoring infrastructure, Caviar reduced their homepage Time to Interactive by 14+ seconds and cut bundle sizes in half.
