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
1---2name: performance3description: Performance4---56# Performance78## **Priority: P1 (HIGH)**910## Principles1112- **OnPush**: Always use `ChangeDetectionStrategy.OnPush`. Components should only update when Inputs change or Signals fire.13- **Deferrable Views**: Use `@defer` to lazy load heavy components/chunks below the fold.14- **Images**: Use `NgOptimizedImage` (`ngSrc`) for LCP optimization.1516## Guidelines1718- **Zoneless**: Prepare for Zoneless Angular by avoiding `Zone.runOutsideAngular` hacks. Use Signals.19- **TrackBy**: Always provide a tracking function in loops (`@for (item of items; track item.id)`).2021## Anti-Patterns2223- **Functions in Template**: `{{ calculate() }}` causes re-evaluation on every change detection cycle. Use `computed()` signals or pure pipes.24- **Heavy Constructors**: Keep constructors empty. Use `ngOnInit` or effects.2526## References2728- [Defer Usage](references/defer-usage.md)
Run npx skillmds@latest add fierzone/performance in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Performance It is listed under Coding & Dev Tools on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
fierzone (@fierzone) published this skill. Their other Agent Skills are listed on their SkillMD profile.
fierzone