# Performance

> - OnPush: Always use ChangeDetectionStrategy.OnPush. Components should only update when Inputs change or Signals fire.

- Skill: `majiayu000/performance-13` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/performance-13`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/performance-13/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/performance-13

---


---
name: Performance
description: Optimization techniques including OnPush, @defer, and Image Optimization.
metadata:
  labels: [angular, performance, optimization, onpush]
  triggers:
    files: ['**/*.ts', '**/*.html']
    keywords: [ChangeDetectionStrategy.OnPush, @defer, NgOptimizedImage, runOutsideAngular]
---

# Performance

## **Priority: P1 (HIGH)**

## Principles

- **OnPush**: Always use `ChangeDetectionStrategy.OnPush`. Components should only update when Inputs change or Signals fire.
- **Deferrable Views**: Use `@defer` to lazy load heavy components/chunks below the fold.
- **Images**: Use `NgOptimizedImage` (`ngSrc`) for LCP optimization.

## Guidelines

- **Zoneless**: Prepare for Zoneless Angular by avoiding `Zone.runOutsideAngular` hacks. Use Signals.
- **TrackBy**: Always provide a tracking function in loops (`@for (item of items; track item.id)`).

## Anti-Patterns

- **Functions in Template**: `{{ calculate() }}` causes re-evaluation on every change detection cycle. Use `computed()` signals or pure pipes.
- **Heavy Constructors**: Keep constructors empty. Use `ngOnInit` or effects.

## References

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