Presupuesto de Rendimiento Web: Métricas, Límites e Integración CI/CD

¿Qué es el Presupuesto de Rendimiento?

El presupuesto de rendimiento son los valores máximos definidos para las métricas de rendimiento de la página web. Tamaño de página, tamaño de bundle JavaScript, tiempo de LCP, etc.

Propósito: Prevenir regresiones de rendimiento. Prevenir la degradación del rendimiento al agregar nuevas funciones.

Exceso de presupuesto: Fallo de build o advertencia. Verificación de rendimiento en el pipeline de CI/CD.

Presupuestos de ejemplo: JS bundle < 200KB, CSS < 50KB, LCP < 2.5s, tamaño total de página < 1MB.

Métricas de Rendimiento

Tamaño de bundle: Tamaños de archivo de JavaScript y CSS. Analizar con webpack bundle analyzer.

LCP (Largest Contentful Paint): Tiempo de carga del elemento de contenido más grande. Objetivo < 2.5s.

CLS (Cumulative Layout Shift): Desplazamientos en el diseño de la página. Objetivo < 0.1.

INP (Interaction to Next Paint): Tiempo de respuesta a la interacción del usuario. Objetivo < 200ms.

TTFB (Time to First Byte): Tiempo de respuesta del servidor. Objetivo < 600ms.

Peso total de la página: Tamaño total de la página. Objetivo < 1-2MB (para móvil).

Creación del Presupuesto

Mida el rendimiento actual: Cree la línea base con Lighthouse, WebPageTest.

Establezca objetivos: Basado en el análisis de competidores y las expectativas del usuario. Presupuesto más estricto para móvil.

Archivo de presupuesto: Defina métricas y límites con performance-budget.json.

Ajuste gradual: Comience con un presupuesto cercano al rendimiento actual. Ajuste gradualmente.

Aceptación del equipo: Todo el equipo debe adoptar el presupuesto de rendimiento. El rendimiento es responsabilidad de todos.

Integración CI/CD

Lighthouse CI: Auditoría de Lighthouse en cada PR. Verificación del umbral de puntuación de rendimiento. Fallo de build si se excede el presupuesto.

WebPageTest: Integración de WebPageTest en el pipeline de CI/CD. Comparación de filmstrip y waterfall.

Verificación de tamaño de bundle: Verificación del tamaño del bundle con webpack-bundle-analyzer o bundlesize.

GitHub Actions: Prueba de rendimiento automática con la acción de Lighthouse CI. Informe de resultados como comentario de PR.

Configuración de umbral: Niveles de advertencia y error. Advertencia: 90% del presupuesto. Error: 100% del presupuesto.

Monitoreo e Informes

RUM (Real User Monitoring): Datos de rendimiento de usuarios reales. CrUX, Datadog, New Relic.

Synthetic monitoring: Pruebas de rendimiento periódicas. WebPageTest, Pingdom, GTmetrix.

Dashboard: Visualice las tendencias de rendimiento. Dashboard de Grafana, Datadog.

Alerting: Alerta cuando se excede el presupuesto. Notificación de Slack, email.

Informes: Informe de rendimiento semanal/mensual. Análisis de tendencias y recomendaciones de mejora.

Mejores Prácticas

Performance champion: Asigne la responsabilidad de rendimiento en el equipo. Extienda la cultura de rendimiento.

Revisión del presupuesto: Revise el presupuesto al final de cada sprint. Ajuste el presupuesto para nuevas funciones.

Trade-off: Nueva función vs rendimiento. Cada función trae un costo de rendimiento. Tome una decisión consciente.

Documentación: Documente el presupuesto de rendimiento y la justificación. Para el onboarding del equipo.

Mejora continua: Ajuste gradualmente el presupuesto de rendimiento. Objetivo de mejora del 10%.