Progressive Web App Case Study 2 : Virtual Dating With Tinder

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.

Still, being the youth-oriented and unique platform older version of the Tinder hasn’t getting desired data result. So, they took initiative and using the technologies like JavaScript, Push Notification and Service Worker, launched their PWA, Tinder Online.

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 –

Originally, Tinder has large and lethargic JavaScript bundles which slow downs the interaction experience for them. Well, these bundles containing codes didn’t need to immediately boot up the core user experience.

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 adopted the Webpack Bundle Analysis tool to analyze the dependency graph for the JavaScript bundles. So, that they can identify whether there’s any low hanging fruit to optimize or not.

CSS Strategy

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.

Dependency upgrades

Webpack 3 + Scope Hoisting –

Earlier, each Tinder JavaScript bundles is enclosed in function wraps, which makes slower for JavaScript to execute fast. But, with the Webpack 3’s scope hoisting improved Tinder’s initial JavaScript parsing time for vendor chunk by 8%.

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%.

Wrap Up

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.

Send a Message