Overview
This article provides a retrospective on Pinterest's experience building a Progressive Web App (PWA), highlighting the motivations, implementation process, and the significant improvements in user engagement and performance metrics achieved over the year. It emphasizes the importance of mobile web accessibility and the technical strategies employed to enhance the user experience.
What You'll Learn
1
How to leverage service workers for caching in a PWA
2
Why performance optimization is critical for user engagement on mobile web
3
How to implement a normalized Redux store for fast client-side performance
Prerequisites & Requirements
- Understanding of Progressive Web Apps and service workers
- Familiarity with React and Redux
Key Questions Answered
What were the main reasons for Pinterest to invest in a PWA?
Pinterest aimed to improve the mobile web experience for users in low-bandwidth environments and to enhance conversion rates for unauthenticated users. The existing mobile web experience was poor, leading to low engagement and sign-up rates, prompting the need for a better solution.
How did Pinterest achieve performance improvements in their PWA?
Pinterest reduced their homepage JavaScript payload from ~490kb to ~190kb through code-splitting and a route preloading system. This allowed for faster initial page loads and improved client-side routing, significantly enhancing the user experience on mobile devices.
What were the engagement statistics after launching the new PWA?
After the launch, Pinterest saw a 103% increase in weekly active users on mobile web, with a 370% increase in logins and an 843% increase in new signups year-over-year. These metrics indicate a substantial improvement in user engagement and conversion rates.
Key Statistics & Figures
Increase in weekly active users
103%
Year-over-year increase after launching the new mobile web experience.
Increase in logins
370%
Year-over-year increase following the PWA launch.
Increase in new signups
843%
Year-over-year increase since the new experience was shipped.
Reduction in homepage JavaScript payload
~490kb to ~190kb
Achieved through code-splitting and performance optimizations.
Technologies & Tools
Some links below are affiliate links. We may earn a commission if you make a purchase.
Frontend
React
Used for all web development at Pinterest.
Frontend
Redux
Utilized for state management in the PWA.
Frontend
Gestalt
An open-source UI library used to maintain design consistency.
Key Actionable Insights
1Investing in a PWA can significantly enhance user engagement metrics, especially in regions with low bandwidth.Pinterest's experience shows that improving mobile web accessibility can lead to increased signups and user activity, making it a worthwhile investment for businesses targeting global audiences.
2Utilizing a normalized Redux store can streamline state management and improve performance in client-side applications.By normalizing data, applications can provide faster responses to user interactions, which is crucial for maintaining a smooth user experience in mobile environments.
3Implementing service workers for caching can drastically improve load times and user experience.Pinterest's use of service workers allowed for near-instant page refreshes, showcasing the effectiveness of this technology in delivering a native-like experience on the web.
Common Pitfalls
1
Failing to optimize JavaScript bundle sizes can lead to performance issues.
Pinterest faced challenges with maintaining performance due to the extensive use of shared code across subsites, which required careful management of dependencies to avoid bloating the bundle.
Related Concepts
Progressive Web Apps
Service Workers
Performance Optimization
User Engagement Strategies