Web Performance Optimization & Lighthouse · Lekcja

Budżety wydajności z Lighthouse

Definiuj i egzekwuj budżety wydajności, aby limity rozmiaru i metryk były sprawdzane automatycznie, co zapobiega regresjom przed ich trafieniem na produkcję.

Budżety wydajności z Lighthouse to bezpłatna lekcja Web Performance Optimization & Lighthouse na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Web Performance Optimization & Lighthouse, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Web Performance Optimization & Lighthouse zawiera 4 lekcji w sumie.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

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.json

Enforcing 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.

Często zadawane pytania

Czy lekcja „Budżety wydajności z Lighthouse” jest bezpłatna?

Tak — pełny tekst „Budżety wydajności z Lighthouse” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Web Performance Optimization & Lighthouse, przejdź na CoddyKit PRO. Kurs Web Performance Optimization & Lighthouse zawiera 4 lekcji w sumie.

Co nauczysz się w „Budżety wydajności z Lighthouse”?

Definiuj i egzekwuj budżety wydajności, aby limity rozmiaru i metryk były sprawdzane automatycznie, co zapobiega regresjom przed ich trafieniem na produkcję. Ćwiczysz Web Performance Optimization & Lighthouse z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Web Performance Optimization & Lighthouse?

Nie wymagamy żadnego doświadczenia. Web Performance Optimization & Lighthouse w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Budżety wydajności z Lighthouse”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Web Performance Optimization & Lighthouse?

Tak. Każda lekcja Web Performance Optimization & Lighthouse zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Web Performance Optimization & Lighthouse