Outrun the 🐻! Performance Optimizations for Progressive Web Apps

on YouTube ↗51m

" summary

Xfinity xFi is an enterprise PWA built with Google Polymer using the PRPL/app‑shell pattern; Chrome performance tools and the User Timing API find and log startup costs, code‑splitting via webpack reduces bundles, and service worker caching speeds repeat loads. Optimizations cut interactive time to ~2.3s (production average drops from 21s to 15s) and one CSS variable move shrinks style recalc from ~500ms to ~64ms. Key numbers: 130–170KB critical budget and 53% abandonment past 3s.

AI-written summary · about

" chapters (8)

1. 0:00Start
2. 3:48Why Speed Matters
3. 5:22Desktop Performance
4. 11:28Performance is your #1 feature
5. 16:23Progressive Web Apps Add to Homescreen → Full Screen Mode (web manifest)
6. 20:03Use incognito mode to bypass extensions!
7. 36:11Components / Framework Startup
8. 46:55Loading too much

" related talks

• 32mPerformance Optimizations for Progressive Web AppsChris Lorenzo · DevFest Florida 2019
• 23mPerformance Optimizations for Progressive Web AppsChris Lorenzo · Node+JS Interactive 2018
• 46mWeb Performance in 2018Jad Joubran · Mobile Era 2018
• 35mDesigning Great Progressive Web AppsNicole Saidy · NDC Sydney 2017
• 42mDecoupling with Google PolymerChris Lorenzo · BuzzJS 3.1 2018
• 40mSupercharge the speed of your app with these PWAs' secrets!Marta Wiśniewska · angularday 2020
• 39mDesigning great progressive web appsNicole Saidy · NDC Oslo 2017
• 28mMaking Chromestatus.com a Lightning-Fast PWAEric Bidelman · Polymer Summit 2016