Optimize Angular 21.x web application performance including Core Web Vitals, bundle size, lazy loading with @defer, NgOptimizedImage, OnPush+Signals, SSR TransferState, and Angular CLI build optimization. Use when diagnosing slow Angular apps, preparing for Lighthouse audits, or reducing bundle size — always measure with profiling tools before making changes.
Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Quelldateien prüfen
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
Optimize Angular 21.x web application performance including Core Web Vitals, bundle size, lazy loading with @defer, NgOptimizedImage, OnPush+Signals, SSR TransferState, and Angular CLI build optimization. Use when diagnosing slow Angular apps, preparing for Lighthouse audits, or reducing bundle size — always measure with profiling tools before making changes.
risk
low
source
community (adapted for Angular 21.x)
date_added
2026-02-27
updated
2026-03-15
last-reviewed
2026-03-15
allowed-tools
Read, Grep, Glob, Bash, Edit, Write
Iron Law
NO PERFORMANCE OPTIMIZATION WITHOUT MEASURING FIRST — run Lighthouse and ng build --stats-json before writing a single optimization
Profile before optimizing. Every change must have a before/after metric. Do not optimize based on guesswork.
Web Performance Optimization — Angular 21.x
Overview
Help developers optimize Angular 21.x SPA performance to improve user experience, SEO rankings, and Core Web Vitals scores. This skill provides systematic approaches to measure, analyze, and improve loading speed, runtime performance, and bundle size — all grounded in Angular-native patterns (signals, @defer, NgOptimizedImage, lazy routes, SSR TransferState).
When to Use This Skill
Angular SPA loads slowly or scores poorly on Lighthouse
Optimizing for Core Web Vitals (LCP, FID/INP, CLS)
Reducing JavaScript bundle size output by ng build
Improving Time to Interactive (TTI) or First Contentful Paint (FCP)
Optimizing images and assets inside Angular templates
Implementing lazy loading via routes or @defer blocks
Debugging Angular change detection performance
Preparing for performance audits on an Angular production build
How It Works
Step 1: Measure Current Performance
Establish baseline metrics before touching any code:
Run Lighthouse audit (Chrome DevTools → Lighthouse tab)
Measure Core Web Vitals: LCP, INP (replaced FID in 2024), CLS
Inspect Angular bundle with ng build --configuration=production --stats-json
Symptoms: Network tab shows the same API call twice (once server, once client)
Solution: Use TransferState — serialize data on the server, read it on the client without re-fetching
Key principle: Measure before optimizing. ng build --stats-json + webpack-bundle-analyzer takes 2 minutes and reveals exactly where your bundle weight is — every other optimization is guesswork without it.
