Frontend Academy · Lektion

Lighthouse-audits og scoring

Kør Lighthouse i DevTools eller CI, læs performance-scoren og diagnostikken, og prioritér mulighederne med de største besparelser.

Lektion 2 af 414 trin

Lighthouse-audits og scoring er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad er Lighthouse?

Lighthouse er Googles open source-værktøj til audits, som simulerer en sideindlæsning og giver point inden for kategorierne Performance, Accessibility, Best Practices, SEO og PWA. Det er indbygget i Chrome DevTools og kan køres fra CLI eller CI.

Kørsel af Lighthouse i DevTools

Åbn DevTools, klik på fanen Lighthouse, vælg kategorier og enhed (mobil/computer), og klik på 'Analysér sideindlæsning'. Den simulerede test tager omkring 30 sekunder.

Opdeling af ydelsesscoren

Ydelsesscoren (0–100) er et vægtet gennemsnit af: LCP (25 %), Total Blocking Time (30 %), CLS (25 %), FCP (10 %) og Speed Index (10 %). Kravene er høje — 90 eller derover er 'Godt'.

First Contentful Paint (FCP)

FCP angiver, hvornår det første stykke indhold (tekst eller billede) rendereres. Det er forskelligt fra LCP — FCP handler om hvad som helst, mens LCP handler om det største element. Godt: under 1,8 sekunder.

Total Blocking Time (TBT)

TBT måler, hvor længe hovedtråden er blokeret af JavaScript-opgaver, der varer længere end 50 ms. Høj TBT betyder, at siden føles ufølsom, selv om den ser ud til at være klar.

Læsning af sektionen Opportunities

Lighthouse viser 'Muligheder' med estimerede besparelser (f.eks. 'Fjern ressourcer, der blokerer rendering: 1,2 sek.'). Sortér efter besparelse — løs de største problemer først for at få størst mulig effekt.

Almindelige muligheder

Hyppige løsninger: udskyd ikke-kritiske scripts eller indlæs dem asynkront, indsæt kritisk CSS direkte, forudindlæs vigtige forespørgsler, brug et CDN, aktivér tekstkomprimering (Brotli/gzip), og lever moderne billedformater.

Lighthouse CLI

Kør Lighthouse fra kommandolinjen for at udføre automatiserede audits.

npm install -g lighthouse

lighthouse https://example.com \
  --output html \
  --output-path ./report.html \
  --chrome-flags="--headless"

Lighthouse CI i GitHub Actions

Kør audits ved hver pull request, og lad buildet fejle, hvis scorerne falder under grænseværdierne.

# .github/workflows/lighthouse.yml
name: Lighthouse CI
on: [pull_request]
jobs:
  audit:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
      - run: npm ci && npm run build
      - uses: treosh/lighthouse-ci-action@v11
        with:
          configPath: ./lighthouserc.json

Lighthouse-konfiguration: Scorekontroller

Definér kontroller i lighthouserc.json, så pull requests, der forringer scorerne, fejler.

{
  "ci": {
    "assert": {
      "assertions": {
        "categories:performance": ["error", { "minScore": 0.9 }],
        "categories:accessibility": ["error", { "minScore": 0.95 }],
        "largest-contentful-paint": ["error", { "maxNumericValue": 2500 }]
      }
    }
  }
}

Begrænsning og enhedssimulering

Lighthouse simulerer som standard et langsomt 4G-netværk og en mobil-CPU i mellemklassen. Det er med vilje — brugere i produktion på rigtige enheder er langsommere end din udviklingsmaskine.

Variation i score — hvorfor den svinger

Lighthouse-scorer varierer mellem kørsler på grund af variationer i JavaScript-timing. Kør audits 3-5 gange, og brug medianen. Brug Lighthouse CI's numberOfRuns til automatisk beregning af medianen.

Hurtigt tjek

Hvilken Lighthouse-måling viser, hvor længe hovedtråden er blokeret af lange JavaScript-opgaver?

Besvar den i den interaktive lektion

Opsummering: Lighthouse

Lighthouse udfører audits af Performance, Accessibility, Best Practices, SEO og PWA. Ydelsesscoren er et vægtet gennemsnit af LCP, TBT, CLS, FCP og Speed Index. Sektionen Opportunities rangerer løsninger efter estimeret besparelse. Kør Lighthouse med DevTools, CLI eller i CI med treosh/lighthouse-ci-action. Ved variation i scoren skal du bruge medianen af flere kørsler.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 41
Lektioner: 163

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Lighthouse-audits og scoring” gratis?

Ja — hele teksten til “Lighthouse-audits og scoring” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Lighthouse-audits og scoring”?

Kør Lighthouse i DevTools eller CI, læs performance-scoren og diagnostikken, og prioritér mulighederne med de største besparelser. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Frontend Academy?

Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Lighthouse-audits og scoring”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Frontend Academy-lektion?

Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Core Web Vitals: LCP FID CLS
Lighthouse-audits og scoring
Billedoptimering: lazy loading og formater som WebP
Code splitting og lazy routes

← Tilbage til Frontend Academy