# Angular Performance

> 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)

- Skill: `hoangnguyen0403/angular-performance-2` (Agent Skill)
- Install (CLI): `npx skillmds@latest add hoangnguyen0403/angular-performance-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/hoangnguyen0403/angular-performance-2/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: HoangNguyen0403 (https://skillmd.com/u/hoangnguyen0403)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/hoangnguyen0403/angular-performance-2

---


# 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 `ngOnInit` or signal effects instead.

## References

- [Defer Usage](references/defer-usage.md)