# Performance

> Performance

- Skill: `fierzone/performance` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add fierzone/performance`
- Raw SKILL.md: https://api.skillmd.com/api/skills/fierzone/performance/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: fierzone (https://skillmd.com/u/fierzone)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/fierzone/performance

---


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