Introducción: El Rendimiento Como Requisito, No Como Opcional
El rendimiento web no es un aspecto para optimizar “cuando haya tiempo”. Cada milisegundo de retraso en la carga se traduce en usuarios perdidos. Los performance budgets transforman el rendimiento de un objetivo vago a una restricción medible y automatizada en el pipeline CI/CD.
Qué Aprenderás en Este Artículo
- Qué son los performance budgets y por qué son importantes
- Cómo configurar los budgets en
angular.json - Cómo instalar y configurar Lighthouse CI (lhci)
- Cómo integrar Lighthouse CI con GitHub Actions
- Cómo rastrear los puntajes en el tiempo
- Cómo monitorear el tamaño del bundle
- Cómo hacer fallar el build en caso de regresiones
1. Qué Son los Performance Budgets
Métricas de Performance Budget
| Métrica | Descripción | Budget Recomendado |
|---|---|---|
| Bundle size | Tamaño total de archivos JS y CSS | JS inicial < 300 KB (gzip) |
| LCP | Largest Contentful Paint | < 2.5 segundos |
| FID/INP | Interaction to Next Paint | < 200 ms |
| CLS | Cumulative Layout Shift | < 0.1 |
| FCP | First Contentful Paint | < 1.8 segundos |
| TTI | Time to Interactive | < 3.8 segundos |
2. Performance Budgets en angular.json
Angular ofrece un sistema de budgets integrado que controla los tamaños del bundle durante el build.
3. Setup de Lighthouse CI
Lighthouse CI (LHCI) es la herramienta oficial de Google para automatizar auditorías Lighthouse en pipelines CI/CD.
Diferencia entre Error y Warn en las Assertions
Las assertions con nivel error hacen fallar el build. Las de nivel warn generan un aviso pero no bloquean el pipeline.
4. Integración con GitHub Actions
5. Rastrear los Puntajes en el Tiempo
6. Monitoreo del Tamaño del Bundle
7. Comparación con Herramientas Alternativas
Herramientas de Performance Monitoring
| Herramienta | Tipo | Costo | Integración CI | Ideal para |
|---|---|---|---|---|
| Lighthouse CI | Open source | Gratuito | Nativa | Todos los proyectos |
| SpeedCurve | SaaS | Desde $20/mes | API | Monitoreo continuo |
| Calibre | SaaS | Desde $45/mes | API | Equipos enterprise |
| Bundlewatch | Open source | Gratuito | GitHub App | Solo bundle size |
8. Hacer Fallar el Build en Regresiones
Estrategia de Implementación Gradual
- Semana 1: Ejecutar Lighthouse CI en modo
warnpara recopilar una línea base - Semana 2: Establecer umbrales basados en la línea base (media - 5%)
- Semana 3: Pasar las métricas críticas (LCP, CLS) a
error - Semana 4: Activar las branch protection rules para requerir el check de Lighthouse
Conclusión
Hemos construido un sistema completo de monitoreo de rendimiento en el pipeline CI/CD.
En el último artículo abordaremos el monitoreo y alertas para aplicaciones web.