Optimizador de Performance

Optimize Angular 19+ applications with lazy loading, virtual scrolling, and OnPush change detection.

Updated Mar 2, 2026
One-click install
npx skills add https://github.com/RodrigoVeraCandia/Template_verona --skill optimizador-de-performance
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: Optimizador de Performance
Source: https://github.com/RodrigoVeraCandia/Template_verona/tree/main/.github/skills/Optimizador_de_performance
Command: npx skills add https://github.com/RodrigoVeraCandia/Template_verona --skill optimizador-de-performance

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses slow-loading and unresponsive Angular applications by implementing advanced performance optimization techniques.

Core Features & Use Cases

  • Lazy Loading: Significantly reduces initial load times by deferring the loading of non-critical modules and components.
  • Virtual Scrolling: Enables smooth rendering of large datasets in tables and lists, preventing UI freezes.
  • Change Detection Optimization: Improves rendering performance by using OnPush and Signals.
  • Bundle Size Reduction: Analyzes and optimizes the application's build size for faster downloads.
  • Use Case: If your Angular dashboard with thousands of transactions is slow to load and interact with, this Skill can implement virtual scrolling and OnPush change detection to make it fluid and responsive.

Quick Start

Apply lazy loading to the 'products' route and implement OnPush change detection for the 'ProductsComponent'.

Frequently Asked Questions about Optimizador de Performance

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

FAQPage Schema
How do I optimize Angular performance for a dashboard with large datasets?

To optimize Angular performance for large datasets, implement virtual scrolling to render lists smoothly and apply OnPush change detection to reduce unnecessary rendering cycles. This combination prevents UI freezes during data interactions.

What is the best way to reduce initial load times in Angular applications?

The best way to reduce initial load times in Angular is to implement lazy loading for non-critical modules and components. This defers loading until needed, significantly decreasing the initial bundle size and download time.

How does OnPush change detection improve Angular rendering performance?

OnPush change detection improves Angular rendering performance by checking components only when their input references change or events fire. Combined with Signals, it minimizes digest cycles and boosts UI fluidity.

Can I use virtual scrolling to fix slow rendering in Angular tables?

Yes, you can use virtual scrolling to fix slow rendering in Angular tables. It enables smooth rendering of large datasets by only displaying the DOM elements currently visible, preventing browser freezes.

Does this Angular optimization approach work with Angular 19 and newer versions?

Yes, this optimization approach works with Angular 19 and newer versions. It leverages specific Angular routing configurations, component strategies, and modern Signals to achieve performance improvements.

Why should I analyze bundle size when optimizing Angular application speed?

You should analyze bundle size when optimizing Angular application speed because large bundles slow downloads and execution. Bundle size analysis identifies heavy dependencies, enabling targeted optimization for faster loads.