A Pinterest Progressive Web App Performance Case Study

Addy Osmani
Nov 29, 2017 · 9 min read
Login to https://pinterest.com on your phone to experience their new mobile site

Why a Progressive Web App (PWA)? Some history.

Loading fast on average mobile hardware over 3G

Pinterest’s old mobile web site took 23 seconds to get interactive. They would send down over 2.5MB of JavaScript (~1.5MB for the main bundle, 1MB lazily loaded in) taking multiple seconds to get parsed and compiled before the main thread finally settled down enough to be interactive.
Pinterest’s Progressive Web App in Firefox, Edge and Safari on mobile.

Route-based JavaScript chunking

For long-term caching, Pinterest also use a chunk-specific hash substitution for each filename.

Use babel-preset-env to only transpile what target browsers need

Image Optimization

React performance pain-points

Navigation Transitions

Experience using Redux

Caching assets with Service Workers

In a cache-first setup, if a request matches a cache entry, respond with that. Otherwise try to fetch the resource from the network. If the network request succeeds, update the cache. To learn more about caching strategies with Service Worker, read Jake Archibald’s Offline Cookbook.

Application Shell challenges

Auditing with Lighthouse

The Future

Dev Channel

Developers Channel - the thoughts, opinions and musings from members of the Chrome team.

Thanks to Yen-Wei Liu and Ben Finkel.

Addy Osmani

Written by

Eng. Manager at Google working on Chrome • Passionate about making the web fast.

Dev Channel

Developers Channel - the thoughts, opinions and musings from members of the Chrome team.