NgOptimizedImage (REQUIRED for images)
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 |
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 |
<!-- Multiple triggers -->
@defer (on viewport; on interaction) {
<comments />
}
<!-- Conditional -->
@defer (when showComments()) {
<comments />
}
Lazy Routes
// 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
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
