Performance Optimizations for Progressive Web Apps

on YouTube ↗23m

" summary

Mobile users abandon sites after ~3s and the goal is interactive in 5s, repeat in 2s; keep JS under ~170KB. Use Chrome DevTools + Lighthouse and the User Timing API to measure real users, run audits in CI, and emulate fast 3G + 6x CPU. Move auth and critical API calls above framework boot, use preload/DNS-prefetch, inline initial splash HTML/CSS, and defer heavy scripts. Real results: a site drops from ~6s to ~2.3s interactive and fleet metrics fall from ~21s to ~15.6s.

AI-written summary · about

" chapters (9)

1. 0:00Introduction and importance
2. 1:09Web vs. native experiences
3. 2:57Defining performance goals
4. 5:18Measuring and auditing
5. 7:42Reducing payload and bloat
6. 9:52Critical path optimization
7. 12:58Rendering and network fixes
8. 16:46Fine-tuning for speed
9. 21:04Conclusion and takeaways

" related talks

• 42mBuilding quick apps in 2018Ivan Akulov · CSS-Minsk-JS 2018
• 01h 03mSpeed up your Web ApplicationSebastian Springer · W-JAX 2018
• 37mAdapting to the Mobile Web F̶u̶t̶u̶r̶e̶ PresentAlex Russell · Polymer Summit 2016
• 46mWeb Performance in 2018Jad Joubran · Mobile Era 2018
• 35mDesigning Great Progressive Web AppsNicole Saidy · NDC Sydney 2017
• 32mPractical Performance Tips Building Progressive Web AppsNarendra Shetty · React Amsterdam 2017
• 28mPractical PerformancePaul Irish, Sam Saccone · Polymer Summit 2016
• 51mOutrun the 🐻! Performance Optimizations for Progressive Web AppsChris Lorenzo · Windcity DevFest 2019