Angular Performance

NgOptimizedImage (REQUIRED for images)

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

@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 |

@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

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
• Source: Gentleman-Programming/Gentleman-Skills
• License: MIT

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