Analyze Performance

---
description: 'Análisis de rendimiento basado en Core Web Vitals. Se activa con "analizar rendimiento", "mejorar velocidad", "verificar Core Web Vitals".'
allowed-tools:
  - Read
  - Grep
  - Glob
  - Bash
---

# Análisis de rendimiento basado en Core Web Vitals

Analiza el rendimiento de la aplicación desde la perspectiva de la experiencia del usuario y cuantifica las mejoras de velocidad percibida mediante optimizaciones. Calcula puntajes UX basados en Core Web Vitals y propone estrategias de optimización priorizadas.

## Puntaje de Rendimiento UX

```text
Puntaje de Experiencia de Usuario: B+ (78/100)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

⏱️ Core Web Vitals
├─ LCP (carga): 2.3 seg [Bueno] Objetivo<2.5 seg ✅
├─ INP (respuesta): 95ms [Bueno] Objetivo<200ms ✅
├─ CLS (estabilidad): 0.08 [Bueno] Objetivo<0.1 ✅
├─ FCP (primer dibujo): 1.8 seg [Bueno] Objetivo<1.8 seg ✅
├─ TTFB (servidor): 450ms [Necesita trabajo] Objetivo<200ms ⚠️
└─ TTI (interactivo): 3.5 seg [Necesita trabajo] Objetivo<3.8 seg ⚠️

📊 Velocidad Percibida del Usuario
├─ Visualización inicial: 2.3 seg [Promedio industria: 3.0 seg]
├─ Transición de página: 1.1 seg [Promedio industria: 1.5 seg]
├─ Mostrar resultados búsqueda: 0.8 seg [Promedio industria: 1.2 seg]
├─ Envío de formulario: 1.5 seg [Promedio industria: 2.0 seg]
└─ Carga de imágenes: lazy loading implementado ✅

😊 Predicción de Satisfacción del Usuario
├─ Predicción tasa abandono: 12% (promedio industria: 20%)
├─ Predicción tasa finalización: 78% (objetivo: 85%)
├─ NPS recomendado: +24 (promedio industria: +15)
└─ Tasa retorno: 65% (objetivo: 70%)

📊 Impacto en Experiencia del Usuario
├─ Acortar visualización 0.5 seg → tasa abandono -7%
├─ Reducir tasa abandono 5% → duración sesión +15%
├─ Mejorar búsqueda → tiempo permanencia +15%
└─ Mejora UX integral: +25%

🎯 Efectos Esperados de Mejora (orden de prioridad)
├─ [P0] Mejora TTFB (introducir CDN) → LCP -0.3 seg = velocidad percibida +15%
├─ [P1] Optimización bundle JS → TTI -0.8 seg = tiempo interactivo -20%
├─ [P2] Optimización imágenes (WebP) → volumen transferencia -40% = tiempo carga -25%
└─ [P3] Estrategia caché → 50% más rápido en visitas repetidas
```

## Uso

```bash
# Análisis integral del puntaje UX
find . -name "*.js" -o -name "*.ts" | xargs wc -l | sort -rn | head -10
「Calcular puntaje de rendimiento UX y evaluar Core Web Vitals」

# Detección de cuellos de botella de rendimiento
grep -r "for.*await\|forEach.*await" . --include="*.js"
「Detectar cuellos de botella de procesamiento asíncrono y analizar impacto en experiencia del usuario」

# Análisis de impacto en experiencia del usuario
grep -r "addEventListener\|setInterval" . --include="*.js" | grep -v "removeEventListener\|clearInterval"
「Analizar el impacto de problemas de rendimiento en la experiencia del usuario」
```

## Ejemplos Básicos

```bash
# Tamaño de bundle y tiempo de carga
npm ls --depth=0 && find ./public -name "*.js" -o -name "*.css" | xargs ls -lh
"Identificar puntos de mejora en tamaño de bundle y optimización de assets"

# Rendimiento de base de datos
grep -r "SELECT\|findAll\|query" . --include="*.js" | head -20
"Analizar puntos de optimización de consultas de base de datos"

# Impacto de rendimiento de dependencias
npm outdated && npm audit
"Evaluar el impacto de dependencias antiguas en el rendimiento"
```

## Perspectivas de Análisis

### 1. Problemas a Nivel de Código

- **Algoritmos O(n²)**: Detección de operaciones de array ineficientes
- **I/O síncrono**: Identificación de procesos bloqueantes
- **Procesamiento duplicado**: Eliminación de cálculos y requests innecesarios
- **Fugas de memoria**: Gestión de event listeners y timers

### 2. Problemas a Nivel de Arquitectura

- **Consultas N+1**: Patrones de acceso a base de datos
- **Falta de caché**: Cálculos repetidos y llamadas API
- **Tamaño de bundle**: Librerías innecesarias y división de código
- **Gestión de recursos**: Uso de connection pools y threads

### 3. Impacto de Deuda Técnica

- **Código legacy**: Degradación de rendimiento por implementaciones antiguas
- **Problemas de diseño**: Alto acoplamiento por falta de distribución de responsabilidades
- **Falta de pruebas**: Falta de detección de regresiones de rendimiento
- **Falta de monitoreo**: Sistema de detección temprana de problemas

## Matriz ROI de Mejora de Rendimiento

```text
ROI de mejora = (efecto reducción tiempo + mejora calidad) ÷ horas implementación
```

| Prioridad                             | Mejora Experiencia Usuario | Dificultad Implementación | Efecto Reducción Tiempo | Ejemplo Concreto       | Horas | Efecto         |
| ------------------------------------- | -------------------------- | ------------------------- | ----------------------- | ---------------------- | ----- | -------------- |
| **[P0] Implementar inmediatamente**   | Alta                       | Baja                      | > 50%                   | Introducir CDN         | 8h    | Respuesta -60% |
| **[P1] Implementar pronto**           | Alta                       | Media                     | 20-50%                  | Optimizar imágenes     | 16h   | Carga -30%     |
| **[P2] Implementar planificadamente** | Baja                       | Alta                      | 10-20%                  | División código        | 40h   | Inicial -15%   |
| **[P3] Retener/observar**             | Baja                       | Baja                      | < 10%                   | Optimizaciones menores | 20h   | Parcial -5%    |

### Criterios de Determinación de Prioridad

- **P0 (implementar inmediatamente)**: Mejora UX "Alta" × Dificultad "Baja" = ROI máximo
- **P1 (implementar pronto)**: Mejora UX "Alta" × Dificultad "Media" = ROI alto
- **P2 (planificadamente)**: Mejora UX "Baja" × Dificultad "Alta" = ROI medio
- **P3 (retener)**: Mejora UX "Baja" × Dificultad "Baja" = ROI bajo

## Correlación entre Métricas de Rendimiento y Mejora UX

| Métrica               | Rango Mejora | Mejora Velocidad Percibida | Satisfacción Usuario     | Horas Implementación |
| --------------------- | ------------ | -------------------------- | ------------------------ | -------------------- |
| **LCP (carga)**       | -0.5 seg     | +30%                       | Tasa abandono -7%        | 16h                  |
| **INP (respuesta)**   | -50ms        | +15%                       | Estrés -20%              | 8h                   |
| **CLS (estabilidad)** | -0.05        | +10%                       | Operación errónea -50%   | 4h                   |
| **TTFB (servidor)**   | -200ms       | +25%                       | Velocidad percibida +40% | 24h                  |
| **TTI (interactivo)** | -1.0 seg     | +35%                       | Tasa finalización +15%   | 32h                  |
| **Tamaño bundle**     | -30%         | +20%                       | Primera visita +25%      | 16h                  |

## Medición y Herramientas

### Node.js / JavaScript

```bash
# Profiling
node --prof app.js
clinic doctor -- node app.js

# Análisis de bundle
npx webpack-bundle-analyzer
lighthouse --chrome-flags="--headless"
```

### Base de Datos

```sql
-- Análisis de consultas
EXPLAIN ANALYZE SELECT ...
SHOW SLOW LOG;
```

### Frontend

```bash
# Rendimiento React
grep -r "useMemo\|useCallback" . --include="*.jsx"

# Análisis de recursos
find ./src -name "*.png" -o -name "*.jpg" | xargs ls -lh
```

## Mejora Continua

- **Auditoría regular**: Ejecutar pruebas de rendimiento semanales
- **Recolección de métricas**: Seguimiento de tiempo de respuesta y uso de memoria
- **Configuración de alertas**: Notificación automática cuando se superan umbrales
- **Compartir con equipo**: Documentación de casos de mejora y antipatrones