angular-performance

name	angular-performance
description	Optimization techniques including OnPush, @defer, and Image Optimization. Use when optimizing Angular rendering, deferring blocks, or improving Core Web Vitals. (triggers: ChangeDetectionStrategy.OnPush, @defer, NgOptimizedImage, runOutsideAngular, OnPush)

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 { } 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 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 ngOnInit or signal effects instead.

References

• Defer Usage