Testing, Performance & Deployment
Angular Performance Optimization
Angular performance work concentrates on four things: change detection scope, bundle size, list rendering, and avoiding work in templates. Each has a specific, well-understood fix.
What is Performance Optimization in Angular?
Angular performance work concentrates on four things: change detection scope, bundle size, list rendering, and avoiding work in templates. Each has a specific, well-understood fix.
Key points to remember
- Run ng build --stats-json and analyse the bundle before guessing.
- A function called in a template runs on every change detection cycle.
- The CDK ScrollingModule provides virtual scroll for very long lists.
- Signals plus zoneless is the largest structural improvement available.
Symptom to fix
| Symptom | Fix |
|---|---|
| Whole app re-checks constantly | OnPush change detection, or signals |
| Large initial bundle | lazy-loaded routes and @defer blocks |
| Long lists stutter | trackBy / track, and virtual scrolling from the CDK |
| Template feels slow | stop calling functions and getters in bindings |
| Repeated identical requests | shareReplay(1), or a cache in the service |
| Slow initial paint | server-side rendering with Angular Universal |
Common mistakes with Performance Optimization
- Adding OnPush without switching to immutable data, so views silently stop updating.
- Optimising before measuring with the Angular DevTools profiler.
Angular Performance Optimization— Interview Questions & FAQs
What is the fastest way to speed up an Angular app?+
Lazy-load routes to cut the initial bundle, then switch hot components to OnPush and add trackBy to long lists. Those three changes cover most real-world slowness.