Profiling Bootstrap Performance of Angular Apps
summary
Shows concrete wins and methods: measures with Lighthouse under fast 3G and 4× CPU slowdown and profiles with Chrome DevTools Performance tab, then fixes a real app (Angular) using prerender-at-build, lazy routes, source-map-explorer to trim bundles, font-display:swap, Brotli compression and CI audits with PWmetrics. First contentful paint drops from ~30.6s to ~1.92s in a day of tuning, interactivity shifts predictably, and tradeoffs are documented so each change links to the metric it affects.
AI-written summary · about
chapters (25)
- 0:00Intro
- 0:57Overview
- 2:12Performance
- 3:56WAOH
- 5:27Understand
- 5:56Write
- 8:36Audit
- 8:55Lighthouse
- 10:34Audits
- 12:35Baseline Audit
- 13:02Separate Audit from Analysis
- 13:47Analysis Process
- 14:25Prerendering
- 15:49Performance tab
- 16:34Screenshot
- 17:00Content
- 17:25Document
- 17:44Hypothesis
- 18:36Lighthouse Audit
- 19:32Bundles
- 19:43Source Map Explorer
- 21:29Additional Optimizations
- 22:53Iterating
- 23:13Recap
- 24:17Performance Checklist
related talks
26mProfiling Angular apps like a Shark
40mNon-trivial optimization techniques in Angular
31mAngular Performance: Your App at the Speed of Light
20mTools for Fast Angular Applications
17mRethinking Angular Architecture & Performance
42mLazy, but Fast: How Taking It Slow Can Speed Up Your App!
17mAchieving Highly Performant Angular Apps
45mOptimized Angular apps: smaller, faster, better