Angular Performance

## NgOptimizedImage (REQUIRED for images)

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

@Component({
  imports: [NgOptimizedImage],
  template: `
    <!-- LCP image: add priority -->
    <img ngSrc="hero.jpg" width="800" height="400" priority>
    
    <!-- Regular: lazy loaded by default -->
    <img ngSrc="thumb.jpg" width="200" height="200">
    
    <!-- Fill mode (parent needs position: relative) -->
    <img ngSrc="bg.jpg" fill>
    
    <!-- With placeholder -->
    <img ngSrc="photo.jpg" width="400" height="300" placeholder>
  `
})
```

### 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) {
  <heavy-component />
} @placeholder {
  <p>Placeholder shown immediately</p>
} @loading (minimum 200ms) {
  <spinner />
} @error {
  <p>Failed to load</p>
}
```

### Triggers

| Trigger | When to Use |
|---------|-------------|
| `on viewport` | Below the fold content |