Lighthouse ile Performans Bütçeleri
Boyut ve ölçüm sınırlarının otomatik olarak denetlenmesi için performans bütçeleri tanımlayıp uygulayın; böylece gerilemeler üretime ulaşmadan önlenir.
Lighthouse ile Performans Bütçeleri, CoddyKit'te ücretsiz bir Web Performance Optimization & Lighthouse dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Web Performance Optimization & Lighthouse öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Web Performance Optimization & Lighthouse kursu toplamda 4 dersten oluşur.
Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.
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.
Sıkça Sorulan Sorular
“Lighthouse ile Performans Bütçeleri” dersi ücretsiz mi?
Evet — “Lighthouse ile Performans Bütçeleri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Web Performance Optimization & Lighthouse kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Web Performance Optimization & Lighthouse kursu toplamda 4 dersten oluşur.
“Lighthouse ile Performans Bütçeleri” dersinde ne öğreneceğim?
Boyut ve ölçüm sınırlarının otomatik olarak denetlenmesi için performans bütçeleri tanımlayıp uygulayın; böylece gerilemeler üretime ulaşmadan önlenir. Web Performance Optimization & Lighthouse ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Web Performance Optimization & Lighthouse öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Web Performance Optimization & Lighthouse, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Lighthouse ile Performans Bütçeleri” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Web Performance Optimization & Lighthouse dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Web Performance Optimization & Lighthouse dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- CLI ve Programatik Lighthouse
- Özel Denetimler ve Doğrulamalar
- Lighthouse'u CI/CD'ye Entegre Etme
- Lighthouse ile Performans Bütçeleri