What if I told you that Pinterest has found an innovative solution that not only enhances performance but also redefines the way we engage with our favorite digital pinboard?
Enter the Pinterest Progressive Web App (PWA), a game-changer that’s turbocharging mobile performance, reducing load times, and creating a seamlessly smooth user experience. From the moment you tap the Pinterest icon, you’ll notice something different, something faster, something… right.
Whether you’re an avid Pinterest user, a curious developer, or a digital marketer looking to leverage the power of PWAs, this post will take you behind the scenes of this technological leap. Discover how Pinterest has harnessed the capabilities of PWA technology to enrich user experience, boost engagement, and set a new standard for mobile browsing. Ready to unlock the future of mobile performance? Let’s dive in!
Contents
An Overview Of Pinterest
As a social platform for image-lovers, inspiration-seekers, and idea-finders to hang out, Pinterest allows everyone to join and venture through their hauls of ideas for recipes, home decor ideas, outfit ideas, empowering quotes, cute animals, and many more.
Each post on Pinterest is called a pin. There are billions of pins on Pinterest, and this platform acts as a visual discovery engine as pins require you to upload in the form of jpg or png rather than text. You can save pins to your private or public boards and keep your inspiration organized all in one place, so the next time, you can easily retrieve what you’re looking for.
Pinterest was founded by Paul Sciarra, Evan Sharp, and Ben Silbermann 12 years ago. Pinterest refers to itself as “the world’s catalog of ideas.” Thanks to Pinterest, people have a much easier way to find ideas even when they’re yet to be named.
By reducing the steps from discovery to conversion, Pinterest is more likely to convert browsers into leads and leads into sales faster than most social media sites. Over 433 million individuals are active on Pinterest per month, with around 10M unique visitors, making it one of the fastest-growing platforms.
Why Do Pinterest And PWA Get Together?
It all started because Pinterest had an international audience to keep an eye on. Therefore they turned to the mobile web. Pinterest was aware that its app and website weren’t at their best-optimized performance. With the online landscape growing in momentum, they needed to do something to unwind from the competition.
Research into their non-authentic mobile web users allows them to see the poor converting power of 1% from their old and slow web experience into signups, logins, or app installations. Web app technologies were evolving fast at the time, leading them to a considerable gap in improving their site conversion rate.
In 2015, Google introduced PWA as a solution to bring the most value to both merchants and end-users. It had lightened up Pinterest an idea of where to invest for a new mobile web experience.
Here’s how PWA could deliver:
- For users: PWA seeks to enhance user experience on a global scale, meaning your mobile site will save bandwidth and load fast and responsively despite living in places with low Internet connections or limited data processing. The swift, smooth, and seamless site interactions make all the difference, driving an enjoyable journey.
- For merchants: saving duplicated app development costs as PWA runs via a browser to work across operating systems. PWA can act like a native app, but it can also offer merchants chances to showcase their brands’ mobile sites on the search engine results page, even top places with a good user experience.
Pinterest’s Challenges That Fosters PWA Integration
Data showed that 80% of Pinterest’s users used the site on mobile browsers instead of a native app. Although the app installation rate increased over time, it came with the blemish: numerous negative, unsatisfied, frustrated reviews relating directly to their mobile web.
With over half of non-US users, building an excellent mobile web with limited bandwidth and a fast loading speed can help global users access Pinterest easier. Also, there was a small ratio of non-authenticated users switching to the mobile app, which wasn’t a delightful experience on the native app.
However, the app still brought about a larger audience with greater interactions than the mobile web. Converting native app users to mobile web wasn’t an easy task. But Pinterest was more ambitious than that.
Another thing is Pinterest’s previous mobile web required a minimum of 23s to start interacting. Users reviewed Pinterest’s mobile presence before the 2017 transformation as “an evil curse to the mobile web.” Specifically, over 2.5MB of JavaScript were sent down for enough time to get parsed and compiled before the final settle down of the main thread to stand interactive.
The Outcomes Of Pinterest PWA
About The Functions
To solve the weary interacting time, the new Pinterest PWA shaved hundreds off their JavaScript, downsizing their core bundle to 150KB from the initial 650KB. Moreover, they managed to uplift the critical performance metrics. Interactive time needs less than 6s, and the first paint appeared after 1.8s, reduced from 4.2s.
In general, the mobile web is now more lightweight and responsive. The platform is filled with images, but all the elements are aligned shortly and vividly. Page transitions are also working well to their expectation.
The Results
The 2017 transformation yielded a 103% increase in weekly active users on the new mobile web year after year.
Pinterest PWA comparison to the old mobile web:
- 40% higher in time spent on-site over 5 mins
- 44% increase in user-generated ad
- 50% increase in ad clickthrough rate
- 60% higher in core engagements
Pinterest PWA comparison to the native app:
- 5% higher in time spent on-site over 5 mins
- 2% increase in user-generated ad
- Ad clickthrough rate remained
- Around 2-3% higher in core engagements
The results revealed the biggest secret to raising profit from building an online presence and confirmed our belief that excellent user experience drives an impressive user interaction level, increasing conversions over time.
Pinterest PWA is getting closer to mimicking a native app. Therefore there aren’t viable changes in the functionality. However, the storage use-up requests iOS users 56MB and Android users 9.6MB to deliver the same experience that PWA provides, with less burden on the download of minified & zipped 150KB. All thanks to the fantastic add-to-home-screen feature.
What Can You Learn From The Pinterest Mobile App Makeover?
The name was “Project Duplo,” which came from the inspiration of simplicity and accessibility in the summer of 2017 when a team of web platform developers and growth engineers was born. When they checked the old site’s performance for measurements, their mobile web can handle less than 10% of the signups while the desktop web made five times that amount.
What’s special about this project is that it only took Pinterest engineers 3 short months to build, integrate, and launch the new mobile site, also the biggest PWA in the world. So, how did they do it? In retrospect, they shared the same worry of being early adopters in the viewpoint 2 years after releasing the term Progressive Web App.
Revealing The Framework
Accounting for the short time creating and shipping the complete rewritten process in Pinterest features is Gestalt. This open-source UI library helps them deliver the project within a quarter. The component suite from Gestalt allows them to build a unique design language to consistently and easily create stunning pages without touching CSS.
Then another suite was built for mobile web only, with specific layout components for specific spaced pages. To turn out for a fast, bug-proof UI development, PageContainer’s default boundaries need to exclude FullWidth, excluding the FixedHeader’s boundaries. And React 16 was used for every web development that took place at Pinterest.
They paid close attention to Service Worker as PWA gets its fame from leveraging the conventional use with Workbox libraries for generating and managing. Pinterest today prioritize the cache-first strategy to tweak any JavaScript or CSS bundles and their application shell’s UI.
How They Accelerated The Speed
Performance and speed especially were top-tier epicenters in Pinterest transformation. After optimization, Pinterest downsized the JavaScript file from 490KB to 190KB, conducting from the default level of code-splitting in the route, then prompting the use of a <Loader> component with code-splitting from the component level.
Counting on the preloading system on the client-server side also works as it helps speed up loading by improving the initial page load and changes in the client-side route.
To ensure a fast experience yet highly native-like, Pinterest relied on the normalized redux store, which is responsible for changing routes in the near-instant by having a single model source of truth such as a Pin or users’ action.
In a concrete view, you only see a Pin with limited content. You’ll read through it first until deciding to click for further information. That way, enough time for the details to be fetched from the server. All of this is possible as Pin data is normalized for masses.
Key Takeaways
Pinterest PWA was taking the lead in the PWA adoption and succeeded immensely. They heard their users’ complaints and took appropriate responsibility, developing the new mobile web that performs and converts almost resembles what the native apps can bring.
Hopefully, through this inspiring case study, you’ll be open-minded to learning more about PWA and try to see just how it can help you stay strong and dangerous. If you’re looking for a decade-worth expert in PWA development, don’t forget to check out Tigren’s PWA solutions.
Related Posts:
Uber PWA: The Perfect Case Study For Progressive Web App
