Rendimiento y mantenimiento

Performance budget: qué es y por qué toda web lo necesita

Un performance budget es un conjunto de límites numéricos que define el rendimiento máximo aceptable de tu sitio web antes de que la experiencia del usuario se vea afectada.

Close-up of a digital interface showcasing futuristic graphs and data analytics in low light.

Un performance budget (presupuesto de rendimiento) es un conjunto de límites numéricos que tu equipo acuerda no superar: tiempo de carga, peso de página, cantidad de peticiones, puntuaciones de Core Web Vitals. Si una nueva funcionalidad rompe esos límites, no se publica hasta corregirla.

En pocas palabras: es la regla que evita que tu sitio se vuelva lento cada vez que alguien agrega un plugin, una imagen de 3 MB o un script de analítica sin revisar.

¿Por qué importa el rendimiento de una página web?

Google utiliza métricas de velocidad —especialmente los Core Web Vitals— como señal de posicionamiento desde 2021. Un sitio lento no solo pierde visitas: pierde ventas.

  • El 53 % de los usuarios móviles abandona una página que tarda más de 3 segundos en cargar (Google/SOASTA, 2016; la tendencia se mantiene).
  • Cada segundo adicional de carga puede reducir las conversiones entre un 7 % y un 20 %.
  • Amazon estimó que un retraso de 100 ms costaba el 1 % de sus ventas.

Sin un performance budget, cada ciclo de desarrollo suma kilobytes y milisegundos hasta que el problema es demasiado grande para ignorarlo — y demasiado caro para resolverlo rápido.

Tipos de métricas que conforman un performance budget

Un buen presupuesto cubre tres categorías:

Métricas de cantidad

  • Peso total de la página (KB / MB): recomendación habitual ≤ 1.5 MB en móvil.
  • Número de peticiones HTTP: cada recurso externo suma latencia.
  • Peso de imágenes: suelen ser el mayor ofensor; se recomienda ≤ 500 KB total.
  • Peso de JavaScript: ≤ 300 KB comprimido es un límite razonable para la mayoría de sitios.

Métricas de tiempo

  • Time to First Byte (TTFB): ≤ 800 ms (Google recomienda ≤ 600 ms en lab).
  • Largest Contentful Paint (LCP): ≤ 2.5 s para "bueno".
  • Total Blocking Time (TBT): ≤ 200 ms.
  • Interaction to Next Paint (INP): ≤ 200 ms.

Puntuaciones de herramientas

  • Lighthouse Performance: muchos equipos exigen ≥ 85 en móvil.
  • PageSpeed Insights: separar datos de lab (simulado) de datos de campo (CrUX).
Métrica Objetivo "bueno" Límite de alerta
LCP ≤ 2.5 s > 4 s
INP ≤ 200 ms > 500 ms
CLS ≤ 0.1 > 0.25
TTFB ≤ 800 ms > 1.8 s
Peso JS (gzip) ≤ 300 KB > 500 KB
Peso total ≤ 1.5 MB > 3 MB

Cómo definir tu primer performance budget en 4 pasos

1. Mide tu estado actual

Usa PageSpeed Insights, WebPageTest o Lighthouse CLI para obtener una línea base. Sin datos actuales, cualquier límite que fijes será arbitrario.

2. Analiza a tu competencia

Si tu competidor directo carga en 1.8 s y tú en 3.5 s, ya tienes una meta: superar ese 1.8 s. Herramientas como elenlace.com pueden auditar tu sitio y el de tu competencia en el mismo reporte.

3. Fija límites por tipo de métrica

No pongas un único número. Define límites para peso de página, peso de imágenes, JS, y las métricas de tiempo que más impactan a tu negocio (e-commerce → LCP e INP; blogs → LCP y CLS).

4. Integra el presupuesto en tu flujo de trabajo

El performance budget solo tiene valor si bloquea despliegues que lo rompen. Intégralo en tu pipeline de CI/CD con herramientas como Lighthouse CI, Bundlesize o webpack-bundle-analyzer.

Errores comunes al aplicar un performance budget

  • Definirlo y olvidarlo: revísalo cada trimestre; tus necesidades cambian y los estándares de la industria también.
  • Medir solo en desktop: el 70 % del tráfico web en México es móvil en redes 4G variables. Siempre mide en condiciones móviles.
  • No involucrar al equipo de diseño: una imagen hero de 5 MB arruina cualquier presupuesto. El límite debe acordarse antes de diseñar, no después.
  • Ignorar los scripts de terceros: analytics, chat en vivo, píxeles de anuncios — cada uno suma. Ponles límite también.

Si quieres profundizar en las métricas individuales, revisa los demás artículos de nuestra sección de optimización y rendimiento web.

Conclusiones clave

  • Un performance budget es un acuerdo de equipo: define qué tan lento nunca debe estar tu sitio.
  • Cubre métricas de cantidad (peso, peticiones), tiempo (LCP, TTFB, INP) y puntuaciones de herramientas (Lighthouse).
  • Definirlo en 4 pasos: medir el estado actual, analizar a la competencia, fijar límites por categoría e integrarlos en CI/CD.
  • Sin automatización que lo haga cumplir, el presupuesto es papel mojado.
  • Revísalo cada trimestre y siempre incluye condiciones móviles en tus pruebas.

¿Tu sitio ya tiene un performance budget o no sabes por dónde empezar? En elenlace.com hacemos auditorías de rendimiento y te ayudamos a definir límites realistas para tu negocio — contáctanos hoy.

Preguntas frecuentes

¿Un performance budget es lo mismo que un presupuesto económico?

No. El "presupuesto" aquí es una analogía: igual que no puedes gastar más de lo que tienes en dinero, no puedes "gastar" más kilobytes o milisegundos de los que tu sitio puede permitirse sin degradar la experiencia.

¿Qué herramienta uso para monitorear mi presupuesto de rendimiento?

Lighthouse CI es la más popular para integrarse en GitHub Actions o GitLab CI. Para monitoreo continuo en producción, SpeedCurve o Calibre son opciones robustas. Para proyectos pequeños, una revisión semanal con PageSpeed Insights es un buen punto de partida.

¿Cuánto debe pesar una página web según el performance budget?

No hay un número universal, pero la referencia habitual es ≤ 1.5 MB en móvil para la mayoría de sitios. Para e-commerce con muchas imágenes, se puede llegar a 2 MB si las imágenes están optimizadas (WebP, lazy loading) y el JS es mínimo.

¿Con qué frecuencia debo revisar mi performance budget?

Como mínimo, cada trimestre y siempre antes de lanzar una funcionalidad grande. También es útil revisarlo cuando Google actualiza sus recomendaciones de Core Web Vitals o cuando añades nuevas integraciones de terceros.

Para saber más

Otros proveedores y guías que vale la pena comparar:

← Todos