A Tinder Progressive Web App Performance Case Study - Rewritten!
Tinder recently made a bold move by launching their responsive Progressive Web App (PWA) - Tinder Online. This innovative app is now available to 100% of users on desktop and mobile, leveraging techniques for JavaScript performance optimization, Service Workers for network resilience, and Push Notifications for chat engagement.
Journey to a Progressive Web App
Tinder's goal was to get adoption in new markets while striving to hit feature parity with V1 of Tinder's experience on other platforms. The MVP for the PWA took just 3 months to implement using React as their UI library and Redux for state management. The result? A PWA that delivers the core Tinder experience at a fraction of the data-investment costs, making it accessible to users in data-costly or data-scarce markets.
Performance
The mobile devices users most commonly access Tinder Online with include Apple iPhone & iPad, Samsung Galaxy S8, Samsung Galaxy S7, and Motorola Moto G4. Using Chrome User Experience reports (CrUX), we can see that the majority of users accessing the site are on a 4G connection. Testing the new experience on WebPageTest and Lighthouse (using the Galaxy S7 on 4G) reveals impressive load times - under 5 seconds!
Performance Optimization
Tinder improved page load speeds by implementing route-based code-splitting, introducing performance budgets, and long-term asset caching. Code-splitting broke up large, monolithic JavaScript bundles into smaller, more manageable chunks, significantly reducing load times.
Route-level code-splitting
Initially, Tinder had massive JavaScript bundles containing code that wasn't immediately needed to boot-up the core user experience. By using React Router and React Loadable, they were able to implement code splitting at the top level, making it easy to split up bundles at a component level.
Performance Budgets
Tinder adopted performance budgets to hit their mobile performance goals. As Alex Russell noted in "Can you afford it?: real-world performance budgets", you have a limited headroom to deliver an experience when considering slow 3G connections being used on median mobile hardware. To get and stay interactive quickly, Tinder enforced a budget of ~155KB for their main and vendor chunks.
Long-term asset caching
To benefit from long-term caching of static resources output by webpack, Tinder added [chunkhash] to add a cache-buster to each file. This ensured that changes to open-source libraries wouldn't invalidate the cache.
Impact
After introducing route-based code-splitting, their main bundle sizes went down from 166KB to 101KB, and DCL improved from 5.46s to 4.69s. Long-term asset caching further reduced bundle size to about 160KB for both chunks. Preloading late-discovered resources reduced load time by 1s and first paint from 1000ms to about 500ms.
By leveraging these techniques, Tinder Online has proven that swift app development can be achieved with a Progressive Web App, delivering an exceptional user experience while reducing data costs. As the PWA continues to evolve, we look forward to seeing more innovative performance optimization strategies being implemented!