# Analizar un sitio para rendimiento ## Resumen de la tarea El análisis de rendimiento es una habilidad crítica para los desarrolladores web modernos. En esta tarea, llevarás a cabo una auditoría de rendimiento completa de un sitio web real, utilizando tanto herramientas basadas en navegadores como servicios de terceros para identificar cuellos de botella y proponer estrategias de optimización. Tu tarea es proporcionar un informe detallado de rendimiento que demuestre tu comprensión de los principios de rendimiento web y tu capacidad para usar herramientas profesionales de análisis de manera efectiva. ## Instrucciones de la tarea **Elige un sitio web** para analizar - selecciona una de las siguientes opciones: - Un sitio web popular que uses con frecuencia (sitio de noticias, redes sociales, comercio electrónico) - Un sitio web de proyecto de código abierto (páginas de GitHub, sitios de documentación) - Un sitio web de negocio local o portafolio - Tu propio proyecto o trabajo anterior **Realiza un análisis con múltiples herramientas** usando al menos tres enfoques diferentes: - **DevTools del navegador** - Usa la pestaña Rendimiento en Chrome/Edge para un perfil detallado - **Herramientas de auditoría en línea** - Prueba Lighthouse, GTmetrix o WebPageTest - **Análisis de red** - Examina la carga de recursos, tamaños de archivos y patrones de solicitud **Documenta tus hallazgos** en un informe completo que incluya: ### Análisis de métricas de rendimiento - **Mediciones de tiempo de carga** desde múltiples herramientas y perspectivas - **Puntuaciones Core Web Vitals** (LCP, FID, CLS) y sus implicaciones - **Desglose de recursos** mostrando qué activos contribuyen más al tiempo de carga - **Análisis waterfall de red** identificando recursos que bloquean ### Identificación de problemas - **Cuellos de botella específicos de rendimiento** con datos que los respalden - **Análisis de la causa raíz** explicando por qué ocurre cada problema - **Evaluación del impacto para el usuario** describiendo cómo afectan los problemas a los usuarios reales - **Clasificación por prioridad** de problemas según severidad y dificultad de solución ### Recomendaciones de optimización - **Mejoras específicas y accionables** con impacto esperado - **Estrategias de implementación** para cada cambio recomendado - **Buenas prácticas modernas** que podrían aplicarse (carga diferida, compresión, etc.) - **Herramientas y técnicas** para monitoreo continuo del rendimiento ## Requisitos de investigación **No dependas solo de herramientas de navegador** - amplía tu análisis usando: **Servicios de auditoría de terceros:** - [Google Lighthouse](https://developers.google.com/web/tools/lighthouse) - Auditorías completas - [GTmetrix](https://gtmetrix.com/) - Perspectivas de rendimiento y optimización - [WebPageTest](https://www.webpagetest.org/) - Condiciones reales de prueba - [Pingdom](https://tools.pingdom.com/) - Monitoreo global de rendimiento **Herramientas especializadas de análisis:** - [Bundle Analyzer](https://bundlephobia.com/) - Análisis del tamaño de paquetes JavaScript - [Herramientas de optimización de imágenes](https://squoosh.app/) - Oportunidades para optimización de activos - [Análisis de cabeceras de seguridad](https://securityheaders.com/) - Impacto en rendimiento de seguridad ## Formato de entregables Crea un informe profesional (2-3 páginas) que incluya: 1. **Resumen ejecutivo** - Hallazgos clave y visión general de recomendaciones 2. **Metodología** - Herramientas usadas y enfoque de pruebas 3. **Evaluación actual del rendimiento** - Métricas de referencia y mediciones 4. **Problemas identificados** - Análisis detallado con datos de soporte 5. **Recomendaciones** - Estrategias de mejora priorizadas 6. **Hoja de ruta de implementación** - Plan paso a paso para optimización **Incluye evidencia visual:** - Capturas de pantalla de herramientas y métricas de rendimiento - Gráficos o diagramas que muestren datos de rendimiento - Comparaciones antes/después donde sea posible - Gráficos waterfall de red y desgloses de recursos ## Rúbrica | Criterios | Excelente (90-100%) | Adecuado (70-89%) | Necesita mejorar (50-69%) | | --------- | ------------------- | ----------------- | ------------------------ | | **Profundidad del análisis** | Análisis completo usando 4+ herramientas con métricas detalladas, análisis de causa raíz y evaluación del impacto en usuarios | Buen análisis con 3 herramientas con métricas claras y identificación básica de problemas | Análisis básico con 2 herramientas, poca profundidad y mínima identificación de problemas | | **Diversidad de herramientas** | Usa herramientas de navegador + 3+ servicios de terceros con análisis comparativo e insights de cada uno | Usa herramientas de navegador + 2 servicios de terceros con algo de análisis comparativo | Usa herramientas de navegador + 1 servicio de terceros con comparación limitada | | **Identificación de problemas** | Identifica 5+ problemas específicos de rendimiento con análisis detallado de causa raíz y impacto cuantificado | Identifica 3-4 problemas con buen análisis y algo de medición del impacto | Identifica 1-2 problemas con análisis básico | | **Recomendaciones** | Proporciona recomendaciones específicas, accionables con detalles de implementación, impacto esperado y mejores prácticas modernas | Proporciona buenas recomendaciones con cierta guía de implementación y resultados esperados | Proporciona recomendaciones básicas con detalles limitados de implementación | | **Presentación profesional** | Informe bien organizado con estructura clara, evidencia visual, resumen ejecutivo y formato profesional | Buena organización con algo de evidencia visual y estructura clara | Organización básica con mínima evidencia visual | ## Resultados de aprendizaje Al completar esta tarea, demostrarás tu capacidad para: - **Aplicar** herramientas y metodologías profesionales de análisis de rendimiento - **Identificar** cuellos de botella de rendimiento usando análisis basado en datos - **Analizar** la relación entre calidad de código y experiencia de usuario - **Recomendar** estrategias específicas y accionables de optimización - **Comunicar** hallazgos técnicos en un formato profesional Esta tarea refuerza los conceptos de rendimiento aprendidos en la lección mientras desarrolla habilidades prácticas que utilizarás a lo largo de tu carrera en desarrollo web. --- **Aviso legal**: Este documento ha sido traducido utilizando el servicio de traducción automática [Co-op Translator](https://github.com/Azure/co-op-translator). Aunque nos esforzamos por la precisión, tenga en cuenta que las traducciones automatizadas pueden contener errores o inexactitudes. El documento original en su idioma nativo debe considerarse la fuente autorizada. Para información crítica, se recomienda la traducción profesional realizada por humanos. No nos hacemos responsables por malentendidos o interpretaciones erróneas derivadas del uso de esta traducción.