Practical Performance Tips Building Progressive Web Apps
summary
Built a mobile-web Uber clone using React and Mapbox GL and measured improvements with Lighthouse: first meaningful paint drops from 19 seconds to 4 seconds after code‑splitting, to 900 ms with server‑side rendering, and to 546 ms after gzipping and further tweaks; repeat visits fall to ~300 ms using service worker toolbox caching. Uses Webpack route/intent splitting, Express SSR, preload/prefetch strategies, and notes tradeoffs for prefetch, prerender and HTTP/2.
AI-written summary · about
chapters (21)
- 0:00Introduction
- 2:23Slides
- 2:36Motivation
- 3:10Alibaba
- 3:57Housing
- 6:27Google
- 7:06Google Lighthouse
- 10:11Round Based Chunk
- 10:34Route Syntax
- 11:41Integrity
- 12:52Innovation
- 13:13Serverside Rendering
- 14:29Improved Performance
- 17:01Caching
- 18:50Browser Cache
- 19:27Preloading Assets
- 23:43HTML Streaming
- 25:10HTTP
- 26:31My Blog
- 26:49My repo
- 27:08Twitter handle
related talks
25mDesigning High Performance React Applications
21mMaking Your React Apps Perform At Scale
39mFrom make it work to make it fast: quick wins to boost your application
23mPerformance Optimizations for Progressive Web Apps
34mOptimizing Performance in Large-Scale React & Node.js Applications
06mHow to React in the Slow Lane
26mLightning Fast React Apps
42mBuilding quick apps in 2018