The Evolution of Web Performance
summary
Shows how replacing heavy static imports with dynamic import and enabling webpack module concatenation reduced payloads from about 1 MB to a 12 kB initial chunk and cut scripting time from 286 ms to 17 ms. Demonstrates using source-map-explorer to locate bundle bloat and Grafana+InfluxDB to track bundle size and FPS in production, and recommends prebuffering DOM nodes and animating with transform/opacity (letting the compositor handle frames); mentions Babylon for 3D and a Docker-based performance monitor for automated reporting.
AI-written summary · about
chapters (9)
- 0:00Web performance intro
- 1:28Browser engine history
- 3:38App bundle optimization
- 7:50Production performance monitoring
- 8:13Rendering phases and animations
- 11:48Smooth animation rules
- 13:35FPS and game perf monitoring
- 14:37Web app monitoring tools
- 15:18Future browser features
related talks
21mEvolution of Web Performance
26mWeb Performance in modern JavaScript world
21mMonsters of Web Performance
37mSecret Shortcuts of Loading Web Performance
31mThe Future of Front-End Performance
28mDecoding JavaScript: Loading Performance —
38mSecret Shortcuts of Loading Web Performance
41mHow we make Web Apps lightning fast at Microsoft!