PWA of Pinterest
Pinterest has introduced the DIY culture to the world and started the few new trends. The main aim of the Pinterest is to capture the art and craft of the world, but their slow web has been creating a problem for them.
As the Pinterest mobile web users were not creating new accounts and on the top users were shifting more towards the native apps. Which only results in 1% of conversion rate and this is no good for Pinterest.
So, that’s why Pinterest launched their PWA using React, Redux, and webpack. And, guys, the results received by the Pinterest are very encouraging and shocking. The results show that:
- Time spent by the user on Pinterest increased by 40%.
- Ads revenue spiked up to 44%.
- And, moreover, the core engagement rate increased to 60%.
So, this remarkable results of Pinterest PWA have motivated us to cover the case study on the topic. So, that our readers could get benefit out of the success story of the Pinterest progressive web app and also try it out.
Improved Loading Time On Average 3G Phone
- Vendor chunk (73KB) including react, redux, react-router, etc.
- Entry chunk (72KB) consists of common libs, the main shell of the page, our redux store, etc.
- Async route chunk (13-18KB)
Pinterest Uses babel-preset-env
Pinterest adopted Babel’s babel-preset-env to only transpile ES2015+ features unsupported by the modern browsers they target. Pinterest has knackered the last two versions of it. They can further modify the system like Internationalization API of Safari, but they are leaving it for the future.
Improvement With Webpack Bundle Analyzer
In the Pinterest PWA, different image optimizations methods are used as most of the lazy content is loaded by Masonry grid. As the grid has built-in support for the visualization. They have also started using progressive loading technique for their images in the new app. In which, each pin is separated by placeholder of a dominant color.
Rendering Performance With The React
Pinterest worked with reacting to render some pins issues. At the time of writing Pinterest React 15.5.4 was used, but they are truly hoping that React 16 will help them in reducing the unmounting. In the meantime, Virtualizing the grid helped significantly with component unmount time.
To more enhance the performance, Pinterest has upgraded the navigation bar icons independent. This makes the experience of navigating from one router to another quickly without the delay of network blocking. The users get UI paint quick in the new navigation bar while they are waiting for data to load.
Experience With Redux
Apparently, all Pinterest API data uses normalizr which normalize the nested JSON. This can be viewed with the redux tool. But, it has one downside that it slows denormalization and they have to depend on reselect’s selector pattern for memoizing denormalization during renders.
Analyzing With Lighthouse
Pinterest wants to be top in the game and for that, they use Lighthouse to constantly audit their performance. They want to keep the record of their performance so that they won’t defy their performance goals. Lighthouse even let them evaluate the metrics such as Time to Consistently Interactive.
Impressed by the performance of Lighthouse they are planning to use it as regression mechanism to verify that page loads remain fast.
Pinterest Succeeded As PWA
Well, as we have already figured out that Pinterest is indeed succeeding as a progressive web app. And, in the future, they have numerous great plans like using <link rel=preload> to reduce preload critical bundles. So, keep pinning for new Pinterest features people.