Web-Dev-For-Beginners/translations/es/5-browser-extension/3-background-tasks-and-performance/assignment.md

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

---

<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**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.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->