## 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