NgOptimizedImage (REQUIRED for images) import { NgOptimizedImage } from '@angular/common';
@Component({
imports: [NgOptimizedImage],
template: `
<!-- 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
@defer (on viewport) {
Placeholder shown immediately
} @loading (minimum 200ms) {
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
@defer (on viewport; on interaction) {
@defer (when showComments()) {
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 https://angular.dev/guide/image-optimization https://angular.dev/guide/defer https://angular.dev/best-practices/runtime-performance https://angular.dev/guide/ssr