Initial commit
This commit is contained in:
Zhongwei Li
168
commands/analyze-performance.md
Normal file
168
commands/analyze-performance.md
Normal file
@@ -0,0 +1,168 @@
|
||||
## 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
|
||||
|
||||
```text
|
||||
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
|
||||
|
||||
```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 |
|
||||
| **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
|
||||
|
||||
```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
|
||||
Reference in New Issue
Block a user