Progressive Dating With Tinder PWA
Okay, so dearies, we are back with the installment two of our Progressive Web App Case Studies. Today we are going talk about the youngster’s popular platform called Tinder. Well, Tinder has practically sabotaged the traditional way of dating and replaced it with the new virtual method.
It almost took 3 months of time for MVP of PWA to implement using React as UI library and Redux of state management. But, this hard work pays very well in the end with 10% of data investment in the data scarce market. Moreover, the early signs showed by Tinder PWA are far better than the expected:
- The user swipes more on the web than the native app.
- Users prefer messaging via the web as compared to the native app.
- Users buy more par from the native app.
- People like to edit their Tinder profile from web more.
- Sessions times are longer on Tinder web.
So, now let’s study the performance of Tinder Online. Mostly, Tinder user has Apple or Samsung smart devices, so the performance is optimized using these devices on the standard 4G network.
Performance of Tinder PWA
Well, with PWA Tinder is able to achieve the goal of quick page loading as compared to earlier. They have implemented numerous techniques to achieve this goal, like route-based code-splitting, performance budgets, and long-term asset caching. So, let’s study each Tinder technique separately:
Route-based code-splitting –
That’s why Tinder broke up these bundles using code-splitting. This is useful for the upfront user who can get information on the front and lazy loaders can browse the rest of the content.
To achieve this task, Tinder used React Router and React Loadable. As they centralized all their routes and configured the information for them. They found it easy to implement codes splitting at the top level.
Long-term asset caching –
Tinder was using numerous open source libraries as their dependency tree. But, change in the libraries causes the [chunkhash] to change and invalidate their cache. So, to resolve this issue, Tinder started defining a whitelist of external dependencies. And, splitting out their webpack manifest from the main chunk to improve caching. So, now the current bundles size for both the chunks is 160KB.
Performance budgets –
Tinder defined their performance budgets goal to achieve their performance goals on the mobile phones. Which we must say isn’t easy to achieve as half of the Tinder user has a slow 3G connection with the average hardware phone.
But, to achieve their goals, Tinder has implemented a budget of 155KB for their main and vendors chunks. In distribution, asynchronous chunks got 55KB, other chunks get 35KB and remaining goes to CSS. It was very important for them to avoid regressing on performance.
Webpack Bundle Analysis
Tinder uses Atomic CSS to create the cool and functional CSS styles. In the Atomic CSS, most styles are inlined with paint and rest of the few styles are available in the stylesheet. The critical styles have 20KB maximum size.
Tinder use CSS stats and Google Analytics to analyze the change of release. And, according to data, earlier Tinder page time load was 6.75s and after using Atomic CSS it was 5.75s.
Webpack 3 + Scope Hoisting –
React 16 –
React 16 comes with better bundles reduce size Reacts. After shifting from React 15 to 16, Tinder has reduced their total gzipped size of vendor chunk by 7%.
Well, Tinder is still tweaking with their Progressive Web App, and they are already seeing numerous positive results. So, guys, if you want to study more progressive web app cases and want to learn a lesson from other peoples expense, then stay tuned and meanwhile find your soulmate on Tinder.com.