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 fold. Use triggers: on interaction, on idle, when condition. @defer creates separate lazy-loaded chunk automatically. Use @placeholder { } for loading states.
- Images: Import NgOptimizedImage and replace 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 stable unique identifier in loops using @for (item of items; track item.id) — 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 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.
References
Canonical response anchors
When this skill applies, preserve the following domain terminology or equivalent concrete examples in the answer when relevant:
-
caches until dependencies change
-
computed() signal
-
priority attribute
-
re-evaluates on every change detection
-
replaces trackBy
-
srcset
-
Additional task-grounded exact anchors: Signals for state; @for (item of items; track item.id); stable unique identifier
