Upgrade to Pro — share decks privately, control downloads, hide ads and more …

A Real-World PWA

Zack Argyle
September 07, 2018

A Real-World PWA

An exploration of progressive web apps through the lens of Pinterest's new mobile web site.

Zack Argyle

September 07, 2018

More Decks by Zack Argyle

Other Decks in Technology


  1. It was a dark night at the beginning of 2015.

    The Pinterest mobile site had been neglected, and left to fester in the streets of San Francisco.
  2. We came to a fork in the road. Do we

    invest more in the mobile site? Or force users to download the native app, which we know is better according to the metrics. We were a small company, and so we decided to leave the mobile site to die.
  3. A blocking page that asks you to download the app.

    Full Stack Fest 2018 @zackargyle
  4. Native App Deep links. Or links that when touched, take

    you to the app store. Unless you already have the app installed. Full Stack Fest 2018 @zackargyle
  5. I found myself on a dark road. Numb inside. Was

    I the only one who felt this way? No. Do you know what I discovered? I was not alone.
  6. The Story DJ Later Aid :`) @Illvibras · 20 Sep

    2016 Pinterest’s mobile web experience is a nightmare Daniel Speir @danielspeir · 4 Jun 2016 Hey, @Pinterest, your mobile web experience is bullshit. Fix that. Full Stack Fest 2018 @zackargyle
  7. The Story Emily Phillips @emjbanks · 13 Aug 2016 Pinterest

    is the portal to the worst of mobile web UX Owen Leonard @oleonard · 16 Mar 2015 Pinterest is an evil curse on the mobile web. Full Stack Fest 2018 @zackargyle
  8. The Story Sessy @sessyren · 6 Jan 2016 Pinterest on

    mobile web is so fuckin’ annoying. Illuminati Mess @geekylindsay · 25 Feb 2015 Wow, Pinterest is such a dick on mobile Web Full Stack Fest 2018 @zackargyle
  9. The Story Steph ⚛ C-137 @mentalina · 8 Jan 2018

    Pinterest is the absolute WORST… Bitch, I don't want to have to download a goddamn app just to look at pictures of cupcakes. Full Stack Fest 2018 @zackargyle
  10. The Story Ahmed Zaki @zachiness · 20 Feb 2016 You

    have the stupidest mobile web version. It's nonexistent, I don't want to download your super fast stupid app, @Pinterest. Suck it. Full Stack Fest 2018 @zackargyle
  11. What is a PWA? A site that utilizes “progressive enhancements”,

    meaning that modern browsers will get a better experience than older browsers. Full Stack Fest 2018 @zackargyle
  12. What is a PWA? A site that utilizes “progressive enhancements”,

    meaning that modern browsers will get a better experience than older browsers. Full Stack Fest 2018 @zackargyle
  13. What is a PWA? A site that uses modern browser

    technologies and best practices to provide a fast, native-like experience. Full Stack Fest 2018 @zackargyle
  14. What is a PWA ROAINSWA? Full Stack Fest 2018 @zackargyle

    Really Only Awesome In Not-Safari Web App
  15. “As we build sites that are increasingly more reliant on

    JavaScript, we sometimes pay for what we send down in ways that we don’t always easily see.” Reduce Addy Osmani Full Stack Fest 2018 @zackargyle
  16. Shoot for <200KB of JS for initial page load Reduce

    Full Stack Fest 2018 @zackargyle
  17. Reduce Vendor Entry Route Async React, redux, react-router, etc Main

    shell, common chunks, etc Home page, Search page, etc Modals, popups, experiments, etc ~71kb ~8kb ~2kb ~109kb Full Stack Fest 2018 @zackargyle
  18. We need to talk about Redux and "SSR". Just saw

    second (large, commercial) site sending > 100/500K (zipped/unzipped) of HTML payload *this week*. Reduce Alex Russell Full Stack Fest 2018 @zackargyle
  19. Full Stack Fest 2018 @zackargyle Reduce App Shell SSR First

    Paint Interactive Meaningful Paint First Load Timeline
  20. Reduce App Shell (Pseudo) <head> <scripts defer /> <style />

    <body> <script>{ …userInfo }</script> <shell> <script>darkMode</script> Full Stack Fest 2018 @zackargyle
  21. The Monica Perf Test™: if you wouldn't make eye contact

    with a stranger for the time it takes your web app to first paint, it's too slow. " Reduce Monica Dinculescu Full Stack Fest 2018 @zackargyle
  22. Reuse Precaching Full Stack Fest 2018 @zackargyle • 8 Route

    bundles • Entry bundle • Vendor bundle • Locale bundle • App shell (/sw-shell.html) Runtime Caching
  23. Whatever tools your team chooses, a budget is essential. Without

    one, even the most advanced, “lightweight” frameworks can easily create bloated, unusable apps. Review Alex Russel Full Stack Fest 2018 @zackargyle
  24. Forgive your enemies, but never forget their names. Review John

    F. Kennedy Full Stack Fest 2018 @zackargyle
  25. Review Full Stack Fest 2018 @zackargyle 1) App shell 2)

    Home page 3) Preload Closeup bundle 4) Fetch/normalize feed 5) Reuse Pin data 6) Fetch Pin details 7) AMP viewer 8) Reuse User data 9) Fetch User details 10)FAST route changes Slow 3G
  26. Performance Metrics Metric Old Mobile Web New Mobile Web TTFP

    (Time to first paint) 4.2s 1.8s TTI (Time to interactive) 23s 5.6s JS Bundle Size 620KB 150KB CSS Bundle Size 150KB 6KB inlined Full Stack Fest 2018 @zackargyle
  27. Mobile Web Metrics Metric Mweb Increase WAU +103% Y/Y WAU

    India +312% Y/Y Pins seen +401% Y/Y Pins saved 295% Y/Y Signups +843% Y/Y Logins +370% Y/Y Full Stack Fest 2018 @zackargyle
  28. Bonus Links PWA Performance Case Study Fast By Default (Chrome

    Dev Summit) Flexible PWA Libraries pinterest/service-workers A One Year PWA Retrospective Full Stack Fest 2018 @zackargyle