Budgets de performance avec Lighthouse
Définissez et imposez des budgets de performance afin que les limites de taille et d’indicateurs soient vérifiées automatiquement, empêchant les régressions avant leur mise en production.
Budgets de performance avec Lighthouse est une leçon Web Performance Optimization & Lighthouse gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Web Performance Optimization & Lighthouse, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Web Performance Optimization & Lighthouse comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
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.
Questions Fréquemment Posées
La leçon « Budgets de performance avec Lighthouse » est-elle gratuite ?
Oui — le texte complet de « Budgets de performance avec Lighthouse » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Web Performance Optimization & Lighthouse, passe à CoddyKit PRO. Le cours Web Performance Optimization & Lighthouse comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Budgets de performance avec Lighthouse » ?
Définissez et imposez des budgets de performance afin que les limites de taille et d’indicateurs soient vérifiées automatiquement, empêchant les régressions avant leur mise en production. Tu pratiques Web Performance Optimization & Lighthouse avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Web Performance Optimization & Lighthouse ?
Aucune expérience préalable n'est requise. Web Performance Optimization & Lighthouse sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Budgets de performance avec Lighthouse » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Web Performance Optimization & Lighthouse ?
Oui. Chaque leçon Web Performance Optimization & Lighthouse inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Lighthouse avec CLI et par programmation
- Audits et assertions personnalisés
- Intégrer Lighthouse à l’intégration et au déploiement continus
- Budgets de performance avec Lighthouse