Progressive Web App Case Study 1 : A Journey of Pinterest

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

Earlier, Pinterest’s web experience is a complexed bundle of CPU-heavy JavaScript. Which almost took 23 seconds to display any pin to the user. And, here Pinterest learned a lesson and improved their loading speed.

First, they break and shave hundreds of JavaScript bundles into a small portion, they reduced JavaScript bundles from 650 KB to 150 KB. Moreover, they have improved the performance metrics too, as the First Meaningful Paint was down from 4.2s to 1.8s and Time To Interactive reduced from 23s to 5.6s.

Routing JavaScript

Every user wants to load as much data they want at a quick speed and Pinterest has worked in this direction also. For lazy browsers, Pinterest has broken their multi-megabyte JavaScript bundles and split them into three categories of webpack:

  • 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

Webpack Bundle Analyzer is a very dynamic to analyze the JavaScript bundles. Pinterest uses this tool to understand the nature of bundles they are sending to their JavaScript using users. It allows Pinterest to visualize the duplicate chunk codes.

Image Optimization

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.

Performance Navigation

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.

Workbox Libraries

Today, Pinterest use the workbox libraries to manage their Service Workers. They even cache any JavaScript or CSS bundles using a cache-first strategy and also cache their user-interface.

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.

Send a Message