Ytelsesbudsjetter med Lighthouse
Definer og håndhev ytelsesbudsjetter slik at størrelses- og måltallsgrenser kontrolleres automatisk, og hindrer regresjoner før de når produksjon.
Ytelsesbudsjetter med Lighthouse er en gratis leksjon i Optimalisering av webytelse og Lighthouse på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Optimalisering av webytelse og Lighthouse, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Optimalisering av webytelse og Lighthouse inneholder totalt 4 leksjoner.
Hva er et ytelsesbudsjett?
Et ytelsesbudsjett er et sett med avtalte grenser, for eksempel maksimal JavaScript-størrelse eller en minste LCP-verdi, som teamet forplikter seg til å ikke overskride. Det gjør vage mål om til håndhevbare terskler.
Hvorfor budsjetter er viktige
Uten budsjetter forringes ytelsen ubemerket etter hvert som funksjoner legges til. Et budsjett gjør regresjoner synlige og blokkerende, slik at ytelse blir en del av utviklingen fra et tidlig stadium.
To typer budsjetter
- Ressursbudsjetter: byte-størrelse og antall forespørsler per type (skript, bilde, totalt).
- Tidsbudsjetter: terskler for måleverdier som LCP, TBT og CLS.
Filen budget.json
Lighthouse leser en budget.json-fil som beskriver ressurs- og tidsgrenser. Deretter markerer den alle analyserte sider som overskrider grensene.
[{
"resourceSizes": [
{ "resourceType": "script", "budget": 170 },
{ "resourceType": "total", "budget": 500 }
]
}]Legge til tidsbudsjetter
Tidsverdier listes opp sammen med størrelser. Verdiene for tidsmålinger oppgis i millisekunder.
[{
"timings": [
{ "metric": "largest-contentful-paint", "budget": 2500 },
{ "metric": "interactive", "budget": 3800 }
]
}]Kjøre med et budsjett
Send budsjettfilen til Lighthouse CLI. Elementer som overskrider grensene, vises i rapportens Budgets-del.
lighthouse https://example.com --budget-path=./budget.json --output=json --output-path=./report.jsonHåndheving i CI med LHCI
Lighthouse CI (lhci) kan kontrollere budsjetter og feile byggingen når grenser overskrides, slik at regresjoner aldri blir flettet inn.
// lighthouserc.json
{
"ci": {
"assert": {
"assertions": {
"resource-summary:script:size": ["error", { "maxNumericValue": 174080 }]
}
}
}
}Advarsels- og feilnivåer
Kontroller støtter nivåene warn og error. Start nye budsjetter som advarsler for å samle inn data, og oppgrader dem deretter til feil når teamet er trygt på grensene.
Sette realistiske grenser
Basér budsjettene på nåværende målinger pluss en liten margin, eller på referanseverdier fra konkurrenter. Budsjetter som er umulige å overholde, blir ignorert, mens budsjetter som er for romslige, aldri utløses.
Følge utviklingen over tid
LHCI-serveren lagrer historiske resultater, slik at du kan vise trender for måleverdier og størrelser og gradvis stramme inn budsjettene etter hvert som ytelsen forbedres.
Oppsummering av arbeidsflyten
- Definer ressurs- og tidsbudsjetter.
- Kjør dem lokalt via CLI.
- Kontroller dem i CI med LHCI.
- Start som advarsler, og håndhev dem deretter som feil.
Kort kontroll
Du vil at en pull request automatisk skal mislykkes når skriptpakken blir større enn en angitt størrelse. Hva oppnår dette?
Oppsummering
Du har lært å angi budsjetter for ressurser og tidsbruk i budget.json, kjøre dem med Lighthouse CLI og håndheve dem i CI via Lighthouse CI assertions. Start med advarsler, gjør dem om til feil, og følg utviklingen over tid for å hindre at ytelsen forringes.
Lær deg Optimalisering av webytelse og Lighthouse med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 12
- Leksjoner
- 48
Ofte stilte spørsmål
Er leksjonen «Ytelsesbudsjetter med Lighthouse» gratis?
Ja – hele teksten i «Ytelsesbudsjetter med Lighthouse» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Optimalisering av webytelse og Lighthouse-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Optimalisering av webytelse og Lighthouse inneholder totalt 4 leksjoner.
Hva lærer jeg i «Ytelsesbudsjetter med Lighthouse»?
Definer og håndhev ytelsesbudsjetter slik at størrelses- og måltallsgrenser kontrolleres automatisk, og hindrer regresjoner før de når produksjon. Du øver på Optimalisering av webytelse og Lighthouse med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Optimalisering av webytelse og Lighthouse?
Ingen tidligere erfaring er nødvendig. Optimalisering av webytelse og Lighthouse på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.
Hvor lang tid tar leksjonen «Ytelsesbudsjetter med Lighthouse»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Optimalisering av webytelse og Lighthouse-leksjonen?
Ja. Alle Optimalisering av webytelse og Lighthouse-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Lighthouse via CLI og programkode
- Tilpassede revisjoner og påstander
- Integrere Lighthouse i CI/CD
- Ytelsesbudsjetter med Lighthouse