Optimalisering av webytelse og Lighthouse · leksjon

Lighthouse via CLI og programkode

Lær å kjøre Lighthouse-revisjoner fra kommandolinjen og integrere API-et i tilpassede skript og applikasjoner.

Leksjon 1 av 411 trinn

Lighthouse via CLI og programkode er en gratis leksjon i Optimalisering av webytelse og Lighthouse på CoddyKit. Dette er leksjon 1 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.

Utover nettleseren

De har sannsynligvis brukt Lighthouse i nettleserens DevTools. Men hva om De vil kjøre revisjoner automatisk eller integrere dem i arbeidsflyten?

I denne leksjonen utforsker De hvordan De kan bruke Lighthouse fra kommandolinjen (CLI) for raske kontroller og programmessig via Node.js API for avansert automatisering.

Automatiser og integrer

Ved å kjøre Lighthouse fra CLI eller programmessig får De mange kraftige muligheter:

  • Automatisering: Planlegg regelmessige revisjoner uten manuell inngripen.
  • CI/CD-integrasjon: Oppdag ytelsesforverringer tidlig i utviklingspipen.
  • Tilpassede rapporter: Generer rapporter som er tilpasset Deres spesifikke behov.
  • Testing i stor skala: Revider mange sider effektivt på tvers av et nettsted.

Installer Lighthouse CLI

For å bruke Lighthouse fra kommandolinjen må Node.js være installert på systemet. Når Node.js er klart, kan De installere Lighthouse CLI globalt med npm:

npm install -g lighthouse

Denne kommandoen gjør lighthouse-kommandoen direkte tilgjengelig i terminalen, slik at De kan kjøre revisjoner fra hvilken som helst mappe.

Kjør en grunnleggende CLI-revisjon

Når Lighthouse CLI er installert, er det enkelt å kjøre en revisjon. Oppgi bare URL-en De vil teste. Som standard viser den et sammendrag i konsollen og genererer en HTML-rapport.

lighthouse https://www.example.com

Dette starter en headless Chrome-instans, kjører revisjonen og genererer deretter en HTML-rapportfil i gjeldende mappe, med navn basert på URL-en.

Velg utdataformat

Lighthouse CLI kan generere rapporter i ulike formater. De kan angi utdataformat og -bane ved hjelp av flagg:

  • --output html: Genererer en brukervennlig HTML-rapport (standard).
  • --output json: Gir rå revisjonsdata i JSON-format for analysering.
  • --output csv: Eksporterer et sammendrag av viktige måleverdier som en CSV-fil.

Prøv å kjøre en revisjon og lagre utdataene som JSON:

lighthouse https://www.example.com --output json --output-path ./report.json

Tilpass revisjonen

De kan finjustere revisjonene med ulike alternativer for å simulere forskjellige brukerforhold eller fokusere på bestemte aspekter:

  • --throttling-preset: Simulerer ulike nettverks- og CPU-forhold (f.eks. mobile, desktop).
  • --only-categories: Begrens­er revisjonen til bestemte kategorier (f.eks. performance, accessibility).

Eksempel: Revider bare ytelsen for en skrivebordsbruker:

lighthouse https://www.example.com --throttling-preset desktop --only-categories performance

Lighthouse som API

For dypere integrasjon og mer kontroll tilbyr Lighthouse et Node.js API. Dette gjør det mulig å bygge Lighthouse direkte inn i JavaScript-applikasjoner, slik at De får full kontroll over revisjonsprosessen og tilgang til råresultatene.

Det bruker vanligvis Puppeteer, et Node-bibliotek, til å styre en headless Chrome-nettleserinstans programmessig under revisjonen.

Grunnleggende programmessig revisjon

La oss lage et enkelt Node.js-skript for å kjøre en Lighthouse-revisjon. Sørg først for at lighthouse og chrome-launcher er installert i prosjektet:

npm install lighthouse chrome-launcher

Opprett deretter en .js-fil (f.eks. audit.js) med følgende kode:

const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

async function runLighthouseAudit(url) {
  // Launch a headless Chrome instance
  const chrome = await chromeLauncher.launch({
    chromeFlags: ['--headless']
  });

  // Configure Lighthouse options
  const options = {
    logLevel: 'info',
    output: 'json',
    port: chrome.port // Connect to the launched Chrome instance
  };

  // Run Lighthouse audit
  const runnerResult = await lighthouse(url, options);

  console.log('Audit complete for %s', runnerResult.lhr.finalUrl);
  console.log('Performance score: %s', runnerResult.lhr.categories.performance.score * 100);

  // Kill the Chrome instance
  await chrome.kill();
}

// Call the function with a URL to audit
runLighthouseAudit('https://www.example.com');

Hent ut revisjonsdata

runnerResult-objektet inneholder store mengder data om revisjonen (lhr står for Lighthouse Result). De kan programmessig hente ut poengsummer, detaljer om bestemte revisjoner og mer.

Slik henter De ut ytelsespoengsummen og verdien for First Contentful Paint (FCP) fra resultatene:

const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

async function extractAuditData(url) {
  const chrome = await chromeLauncher.launch({
    chromeFlags: ['--headless']
  });
  const options = {
    port: chrome.port
  };
  const runnerResult = await lighthouse(url, options);

  // Access the overall performance score
  const performanceScore = runnerResult.lhr.categories.performance.score * 100;

  // Access a specific audit result by its ID (e.g., First Contentful Paint)
  const fcpAudit = runnerResult.lhr.audits['first-contentful-paint'];

  console.log(`Performance Score: ${performanceScore}%`);
  console.log(`First Contentful Paint: ${fcpAudit.displayValue}`);

  await chrome.kill();
}

extractAuditData('https://www.example.com');

Når bør De bruke hva?

De har lært om både CLI og programmessig bruk av Lighthouse. Hvilke av følgende er ideelle bruksområder for å bruke Lighthouse programmessig (via Node.js API)?

Oppsummering: Kraften i CLI og API

Godt jobbet! De har utforsket mulighetene i Lighthouse utover nettleseren.

  • Lighthouse CLI passer perfekt for raske revisjoner ved behov og enkel rapportgenerering direkte fra terminalen.
  • Lighthouse Node.js API gir dype integrasjonsmuligheter og muliggjør automatisering, tilpasset rapportering og innbygging av ytelseskontroller i komplekse applikasjoner og arbeidsflyter.

Disse verktøyene er avgjørende for å opprettholde og forbedre webytelsen i stor skala og for å integrere revisjoner i utviklingsprosessen.

Gratis å komme i gang

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 «Lighthouse via CLI og programkode» gratis?

Ja – hele teksten i «Lighthouse via CLI og programkode» 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 «Lighthouse via CLI og programkode»?

Lær å kjøre Lighthouse-revisjoner fra kommandolinjen og integrere API-et i tilpassede skript og applikasjoner. 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 1 av 4.

Hvor lang tid tar leksjonen «Lighthouse via CLI og programkode»?

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

  1. Lighthouse via CLI og programkode
  2. Tilpassede revisjoner og påstander
  3. Integrere Lighthouse i CI/CD
  4. Ytelsesbudsjetter med Lighthouse
← Tilbake til Optimalisering av webytelse og Lighthouse