Angular Performance

A practical guide to making Angular apps fast. Two domains: initial load (how fast the first meaningful paint and interactivity arrive) and runtime (how smoothly the app reacts once loaded). Each fix follows Problem → Identify → Fix → Verify (re-measure) – always confirm each win against the numbers, never assume it landed.

Targets Angular v17+ and a standalone + signals + OnPush codebase. Module-based notes are marked (legacy) for apps not yet migrated.

0. Measure first – never guess

Optimize what the tools flag, not what you assume is slow.

• Initial load / Core Web Vitals (LCP, CLS, INP): Lighthouse, PageSpeed Insights, WebPageTest.
• Bundle composition: ng build budget warnings; a source-map/import-graph visualizer to see why code lands in the main chunk.
• Change detection cost: Angular DevTools profiler (flame chart of CD cycles) and the Chrome DevTools Performance panel (Angular-aware, color-coded).
• Agent-driven measurement: this repo ships the chrome-devtools MCP – drive a real trace with performance_start_trace → interact with the page → performance_stop_trace → performance_analyze_insight, and lighthouse_audit for LCP/CLS/INP. Use it to establish the baseline and to re-measure after each fix.
• Quick CD smell test: a console.log() in ngDoCheck – if it fires on unrelated interactions, you have out-of-bound CD.