Performance
Priority: P1 (HIGH)
Principles
- OnPush: Always use ChangeDetectionStrategy.OnPush on all components. Components should only update when Signals for state change or Inputs change.
- Deferrable Views: Use @defer (on viewport) to lazy load heavy components/chunks below the fold. Use triggers: on interaction, on idle, when condition. @defer creates a separate lazy-loaded chunk automatically. Use @placeholder { <Spinner /> } for loading states.
- Images: Import NgOptimizedImage and replace <img src='...'> with <img ngSrc='...' width='800' height='600'>. Add priority attribute for LCP images. This enables lazy loading, responsive srcset, and preconnect hints automatically.
Guidelines
- Zoneless: Prepare for Zoneless Angular by avoiding Zone.runOutsideAngular hacks. Use Signals for all reactive state instead. Opt into provideExperimentalZonelessChangeDetection().
- TrackBy: Always provide a stable unique identifier in loops using @for (item of items; track item.id) — the track expression replaces trackBy. This prevents Angular from destroying and recreating DOM nodes.
Anti-Patterns
- No function calls in template: {{ calculate() }} re-evaluates on every change detection cycle. Use a computed() signal or pure pipes to avoid per-cycle re-evaluation as it caches until dependencies change.
- No logic in constructor: Initialize state in
ngOnInitor signal effects instead.