angular-performance

Optimize Angular 21+ applications for change detection, lazy loading, and bundle size.

6|1|Updated Feb 18, 2026
One-click install
npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-performance-oguzhan18
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: angular-performance
Source: https://github.com/oguzhan18/angular-ecosystem-skills/tree/main/skills/angular-performance
Command: npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-performance-oguzhan18

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Helps developers optimize Angular applications for runtime performance, change detection efficiency, bundle size, and load-time behavior by translating Angular 21 features and best practices into actionable guidance.

Core Features & Use Cases

  • Change Detection Optimization: Guidance for adopting OnPush, selective ChangeDetectorRef usage, and avoiding function calls in templates to reduce unnecessary checks.
  • Bundle and Load-Time Reduction: Recommendations for lazy loading with loadComponent, @defer deferrable views, standalone components, and bundle analysis workflows to shrink initial downloads.
  • Zoneless & Signal-based Patterns: Advice for migrating to zoneless change detection, using signals for reactivity, and using afterNextRender and runOutsideAngular for third-party integrations.
  • Use Case: Audit a slow dashboard to identify change-detection hot spots, enable lazy loading for heavy components, and produce a prioritized plan to reduce bundle size and improve interactivity.

Quick Start

Audit my Angular 21 application and produce a prioritized list of performance improvements focused on change detection, lazy loading, and bundle size reduction.

Frequently Asked Questions about angular-performance

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I optimize Angular change detection for better performance?

Optimize Angular change detection by adopting OnPush strategy, using signals for reactivity, and avoiding function calls in templates to reduce unnecessary checks. Selective ChangeDetectorRef usage further minimizes redundant cycles.

What is the best way to reduce Angular bundle size?

Reduce Angular bundle size by lazy loading with loadComponent, applying @defer for deferrable views, and using standalone components. Bundle analysis workflows identify heavy imports to shrink initial downloads effectively.

How do I migrate to zoneless change detection in Angular?

Migrate to zoneless change detection by adopting signal-based reactivity and using afterNextRender for initialization. Use runOutsideAngular for third-party integrations to prevent triggering unnecessary cycles.

Does this Angular performance optimization guidance apply to older versions?

This guidance targets Angular 21+ projects specifically. It leverages newer framework features like deferrable views, loadComponent, and signal-based reactivity patterns for optimal web app performance.

How do I audit a slow Angular dashboard for performance hot spots?

Audit a slow Angular dashboard by identifying change-detection hot spots, enabling lazy loading for heavy components, and producing a prioritized plan to reduce bundle size and improve interactivity.