# Angular Performance

> >

- **Type:** Skill
- **Install:** `agentstack add skill-gentleman-programming-gentleman-skills-performance`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [Gentleman-Programming](https://agentstack.voostack.com/s/gentleman-programming)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [Gentleman-Programming](https://github.com/Gentleman-Programming)
- **Source:** https://github.com/Gentleman-Programming/Gentleman-Skills/tree/main/curated/angular/performance

## Install

```sh
agentstack add skill-gentleman-programming-gentleman-skills-performance
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

## NgOptimizedImage (REQUIRED for images)

```typescript
import { NgOptimizedImage } from '@angular/common';

@Component({
  imports: [NgOptimizedImage],
  template: `
    
    
    
    
    
    
    
    
    
    
    
  `
})
```

### Rules
- ALWAYS set `width` and `height` (or `fill`)
- Add `priority` to LCP (Largest Contentful Paint) image
- Use `ngSrc` not `src`
- Parent of `fill` image must have `position: relative/fixed/absolute`

---

## @defer - Lazy Components

```html
@defer (on viewport) {
  
} @placeholder {
  Placeholder shown immediately
} @loading (minimum 200ms) {
  
} @error {
  Failed to load
}
```

### Triggers

| Trigger | When to Use |
|---------|-------------|
| `on viewport` | Below the fold content |
| `on interaction` | Load on click/focus/hover |
| `on idle` | Load when browser is idle |
| `on timer(500ms)` | Load after delay |
| `when condition` | Load when expression is true |

```html

@defer (on viewport; on interaction) {
  
}

@defer (when showComments()) {
  
}
```

---

## Lazy Routes

```typescript
// Single component
{
  path: 'admin',
  loadComponent: () => import('./features/admin/admin').then(c => c.AdminComponent)
}

// Feature with child routes
{
  path: 'users',
  loadChildren: () => import('./features/users/routes').then(m => m.USERS_ROUTES)
}
```

---

## SSR & Hydration

```typescript
bootstrapApplication(AppComponent, {
  providers: [
    provideClientHydration()
  ]
});
```

| Scenario | Use |
|----------|-----|
| SEO critical (blog, e-commerce) | SSR |
| Dashboard/Admin | CSR |
| Static marketing site | SSG/Prerender |

---

## Slow Computations

| Solution | When |
|----------|------|
| Optimize algorithm | First choice always |
| Pure pipes | Cache single result |
| Memoization | Cache multiple results |
| `computed()` | Derived signal state |

**NEVER** trigger reflows/repaints in lifecycle hooks (`ngOnInit`, `ngAfterViewInit`).

---

## Resources

- https://angular.dev/guide/image-optimization
- https://angular.dev/guide/defer
- https://angular.dev/best-practices/runtime-performance
- https://angular.dev/guide/ssr

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [Gentleman-Programming](https://github.com/Gentleman-Programming)
- **Source:** [Gentleman-Programming/Gentleman-Skills](https://github.com/Gentleman-Programming/Gentleman-Skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-gentleman-programming-gentleman-skills-performance
- Seller: https://agentstack.voostack.com/s/gentleman-programming
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.