7.1 KiB
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 - Auditorías completas
- GTmetrix - Perspectivas de rendimiento y optimización
- WebPageTest - Condiciones reales de prueba
- Pingdom - Monitoreo global de rendimiento
Herramientas especializadas de análisis:
- Bundle Analyzer - Análisis del tamaño de paquetes JavaScript
- Herramientas de optimización de imágenes - Oportunidades para optimización de activos
- Análisis de cabeceras de seguridad - Impacto en rendimiento de seguridad
Formato de entregables
Crea un informe profesional (2-3 páginas) que incluya:
- Resumen ejecutivo - Hallazgos clave y visión general de recomendaciones
- Metodología - Herramientas usadas y enfoque de pruebas
- Evaluación actual del rendimiento - Métricas de referencia y mediciones
- Problemas identificados - Análisis detallado con datos de soporte
- Recomendaciones - Estrategias de mejora priorizadas
- 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. 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.