Speeding Up Your Angular App: Techniques for Optimizing Rendering Performance
summary
An Angular page shows a 41s full load and rendering stalls: 29 fields take ~2s, 60 fields ~4s, 100+ fields ~7s because the template expands to ~800, ~1,680 and ~3,000 mat-form-field elements respectively. Profiling with DevTools Performance Monitor and the Performance panel identifies long rendering blocks. The fix streams items with RxJS, using bufferCount + concatMap + delay into an observable consumed by the async pipe so items render in small batches (two at a time), converting one big blocking paint into many short tasks and restoring interactivity.
AI-written summary · about
chapters (11)
- 0:00Introduction
- 2:19Web performance metrics
- 3:47Browser rendering
- 8:58Angular rendering methods
- 13:43Poor rendering symptoms
- 16:33Rendering optimization techniques
- 19:44Log app case study
- 27:16Diagnosing bottlenecks
- 30:12Progressive rendering
- 36:05Performance measurement
- 40:15Conclusion
related talks
19mAngular Performance Patterns
26mProfiling Angular apps like a Shark
34mHigh-Performance Applications with Angular
35mPerformance at Scale
40mNon-trivial optimization techniques in Angular
33mPerceived faster Angular applications
40mOptimizing an Angular application
32mProfiling Bootstrap Performance of Angular Apps