Presupuestos de rendimiento con Lighthouse
Defina y haga cumplir presupuestos de rendimiento para comprobar automáticamente los límites de tamaño y de métricas, evitando regresiones antes de que lleguen a producción.
Presupuestos de rendimiento con Lighthouse es una lección gratuita de Web Performance Optimization & Lighthouse en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Web Performance Optimization & Lighthouse, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Web Performance Optimization & Lighthouse incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
What Is a Performance Budget?
A performance budget is a set of agreed limits, such as max JavaScript size or a minimum LCP, that the team commits not to exceed. It turns vague goals into enforceable thresholds.
Why Budgets Matter
Without budgets, performance erodes silently as features pile on. A budget makes regressions visible and blocking, shifting performance left into development.
Two Kinds of Budgets
- Resource budgets: byte size and request counts per type (script, image, total).
- Timing budgets: metric thresholds like LCP, TBT, CLS.
The budget.json File
Lighthouse reads a budget.json describing resource and timing limits. It then flags any audited page that exceeds them.
[{
"resourceSizes": [
{ "resourceType": "script", "budget": 170 },
{ "resourceType": "total", "budget": 500 }
]
}]Adding Timing Budgets
Timings are listed alongside sizes. Values are in milliseconds for time metrics.
[{
"timings": [
{ "metric": "largest-contentful-paint", "budget": 2500 },
{ "metric": "interactive", "budget": 3800 }
]
}]Running with a Budget
Pass the budget file to the Lighthouse CLI. Exceeded items appear in the report's Budgets section.
lighthouse https://example.com --budget-path=./budget.json --output=json --output-path=./report.jsonEnforcing in CI with LHCI
Lighthouse CI (lhci) can assert budgets and fail the build when limits are breached, so regressions never merge.
// lighthouserc.json
{
"ci": {
"assert": {
"assertions": {
"resource-summary:script:size": ["error", { "maxNumericValue": 174080 }]
}
}
}
}Warn vs Error Levels
Assertions support warn and error levels. Start new budgets as warnings to gather data, then promote to errors once the team is confident.
Setting Realistic Limits
Base budgets on current measurements plus a small margin, or on competitor benchmarks. Budgets that are impossible to meet get ignored; budgets that are too loose never fire.
Tracking Over Time
The LHCI server stores historical results so you can chart metric and size trends and tighten budgets gradually as performance improves.
Workflow Summary
- Define resource and timing budgets.
- Run them locally via CLI.
- Assert them in CI with LHCI.
- Start as warnings, then enforce as errors.
Quick Check
You want a pull request to fail automatically when the script bundle grows beyond a set size. What achieves this?
Recap
You learned to set resource and timing budgets in budget.json, run them with the Lighthouse CLI, and enforce them in CI via Lighthouse CI assertions. Start with warnings, promote to errors, and track trends to keep performance from regressing.
Aprende Web Performance Optimization & Lighthouse con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 12
- Lecciones
- 48
Preguntas frecuentes
¿La lección «Presupuestos de rendimiento con Lighthouse» es gratis?
Sí — el texto completo de «Presupuestos de rendimiento con Lighthouse» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Web Performance Optimization & Lighthouse, actualiza a CoddyKit PRO. El curso de Web Performance Optimization & Lighthouse incluye 4 lecciones en total.
¿Qué aprenderé en «Presupuestos de rendimiento con Lighthouse»?
Defina y haga cumplir presupuestos de rendimiento para comprobar automáticamente los límites de tamaño y de métricas, evitando regresiones antes de que lleguen a producción. Practicas Web Performance Optimization & Lighthouse con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Web Performance Optimization & Lighthouse?
No se requiere experiencia previa. Web Performance Optimization & Lighthouse en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Presupuestos de rendimiento con Lighthouse»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Web Performance Optimization & Lighthouse?
Sí. Cada lección de Web Performance Optimization & Lighthouse incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Lighthouse desde la CLI y mediante programación
- Auditorías y aserciones personalizadas
- Integración de Lighthouse en CI/CD
- Presupuestos de rendimiento con Lighthouse