CtrlK
BlogDocsLog inGet started
Tessl Logo

angular-performance

Angular performance: NgOptimizedImage, @defer, lazy loading, SSR. Trigger: When optimizing Angular app performance, images, or lazy loading.

Install with Tessl CLI

npx tessl i github:Yoizen/dev-ai-workflow --skill angular-performance
What are skills?

90

Review — 88%

Does it follow best practices?

Validation — 11 / 11 Passed

Validation for skill structure

SKILL.md
Review
Evals

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

@defer (on viewport) {
  <heavy-component />
} @placeholder {
  <p>Placeholder shown immediately</p>
} @loading (minimum 200ms) {
  <spinner />
} @error {
  <p>Failed to load</p>
}

Triggers

TriggerWhen to Use
on viewportBelow the fold content
on interactionLoad on click/focus/hover
on idleLoad when browser is idle
on timer(500ms)Load after delay
when conditionLoad 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()
  ]
});
ScenarioUse
SEO critical (blog, e-commerce)SSR
Dashboard/AdminCSR
Static marketing siteSSG/Prerender

Slow Computations

SolutionWhen
Optimize algorithmFirst choice always
Pure pipesCache single result
MemoizationCache 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
Repository
Yoizen/dev-ai-workflow
Commit

78a194d

Last updated
Created

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.

Claim skill