gh-wasabeef-claude-code-cookbook-plugins-es/commands/analyze-performance.md

Analyze Performance

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

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

⏱️ Core Web Vitals
├─ LCP (carga): 2.3 seg [Bueno] Objetivo<2.5 seg ✅
├─ FID (respuesta): 95ms [Bueno] Objetivo<100ms ✅
├─ 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

# 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

# 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

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
FID (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

# 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

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

Frontend

# 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