Angular Performance

If you're working on Angular apps and tired of sluggish image loading, this skill pushes NgOptimizedImage as the standard approach. It covers the essentials: priority loading for LCP images, automatic lazy loading for everything else, and fill mode for backgrounds. The "REQUIRED for images" in the title is opinionated but not wrong. Angular's built-in image directive genuinely handles most of the performance work you'd otherwise do manually with srcset and loading attributes. This is a solid reference if you're trying to hit Core Web Vitals targets or just want your Angular app to feel snappier without wrestling with image optimization yourself.

skills.sh installs: 353
GitHub stars: 665
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add gentleman-programming/gentleman-skills --skill angular-performance --agent claude-code

Installs into .claude/skills of the current project.

Files

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