0Pricing
Frontend Academy · Lektion

Automatisierte Lighthouse-Prüfungen

Fügen Sie die Lighthouse-CI-GitHub-Action hinzu, legen Sie Schwellenwerte für Performance- und Accessibility-Scores fest und verhindern Sie Merges, die die Core Web Vitals verschlechtern.

Automatisierte Lighthouse-Prüfungen ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum Lighthouse automatisieren?

Manuelle Lighthouse-Läufe erkennen Performance-Regressionen zu spät – meist erst, nachdem sich ein echter Benutzer beschwert. Automatisierte Lighthouse-CI-Läufe werden bei jedem PR ausgeführt, lassen Builds bei Rückschritten in wichtigen Metriken fehlschlagen und verfolgen Punktzahlen über die Zeit. Behandeln Sie Performance wie eine Testsuite.

Lighthouse CI

Das Open-Source-Toolset Lighthouse CI (lhci) von Google: führt Lighthouse mehrfach aus, nimmt den Median, prüft Schwellenwerte und lädt Ergebnisse hoch.

npm install -D @lhci/cli

# Run locally:
npx lhci autorun

lighthouserc.json — Konfiguration

Konfigurieren Sie zu testende URLs, die Anzahl der Läufe und Assertions.

// lighthouserc.json
{
  "ci": {
    "collect": {
      "url": [
        "http://localhost:3000",
        "http://localhost:3000/blog",
        "http://localhost:3000/pricing"
      ],
      "numberOfRuns": 5,
      "startServerCommand": "npm run start"
    },
    "assert": {
      "assertions": {
        "categories:performance":   ["error", { "minScore": 0.9 }],
        "categories:accessibility": ["error", { "minScore": 0.95 }],
        "categories:seo":            ["warn", { "minScore": 0.9 }],
        "largest-contentful-paint":  ["error", { "maxNumericValue": 2500 }],
        "total-blocking-time":       ["error", { "maxNumericValue": 200 }],
        "cumulative-layout-shift":   ["error", { "maxNumericValue": 0.1 }]
      }
    },
    "upload": {
      "target": "temporary-public-storage"
    }
  }
}

Integration mit GitHub Actions

Die offizielle treosh/lighthouse-ci-action führt lhci bei jedem PR aus und veröffentlicht einen Statuscheck.

# .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
        with: { node-version: '20', cache: 'npm' }
      - run: npm ci && npm run build
      - uses: treosh/lighthouse-ci-action@v11
        with:
          configPath: ./lighthouserc.json
          uploadArtifacts: true
          temporaryPublicStorage: true

Median mehrerer Durchläufe

Lighthouse-Werte unterscheiden sich zwischen den Läufen aufgrund von Messrauschen. numberOfRuns: 5 nimmt den Median – stabil genug für Assertions. Weniger als 3 Läufe führen zu instabilen Ergebnissen.

Performance-Budgets

Legen Sie zusätzlich zu Punktzahlen feste Budgets für Ressourcengrößen und -anzahlen fest. Der Build schlägt fehl, wenn Budgets überschritten werden.

// budget.json
[
  {
    "resourceSizes": [
      { "resourceType": "script", "budget": 300 },
      { "resourceType": "image", "budget": 100 }
    ],
    "resourceCounts": [
      { "resourceType": "third-party", "budget": 10 }
    ]
  }
]

// lighthouserc.json:
"collect": {
  "settings": { "budgetsPath": "./budget.json" }
}

Lighthouse-CI-Server

Hosten Sie den LHCI-Server selbst, um historische Daten zu speichern, Trenddiagramme zu sehen und Branches über die Zeit zu vergleichen. Oder verwenden Sie temporären öffentlichen Speicher für einmalige PR-Ergebnisse.

Authentifizierte Seiten testen

Verwenden Sie Puppeteer-Skripte, um sich anzumelden, bevor Lighthouse ausgeführt wird.

// lighthouserc.json
"collect": {
  "puppeteerScript": "./lighthouse-login.js",
  "url": ["http://localhost:3000/dashboard"]
}

// lighthouse-login.js
module.exports = async (browser, context) => {
  const page = await browser.newPage();
  await page.goto('http://localhost:3000/login');
  await page.fill('#email', 'test@example.com');
  await page.fill('#password', 'test123');
  await page.click('button[type=submit]');
  await page.waitForNavigation();
};

Slack-/Discord-Benachrichtigungen

Leiten Sie LHCI-Ergebnisse in den Team-Chat weiter – Performance-Regressionen verdienen dieselbe Aufmerksamkeit wie fehlgeschlagene Tests.

Mobilgerät vs. Desktop

Lighthouse verwendet standardmäßig Mobilgeräte (langsames 4G + CPU der mittleren Leistungsklasse). Für Desktop setzen Sie preset: 'desktop'. Die meisten Produktions-Apps sollten beides prüfen – separate Jobs in CI.

Schwellenwerte kalibrieren

Beginnen Sie mit den aktuellen Werten als Baselines. Lassen Sie PRs am ersten Tag nicht fehlschlagen – protokollieren Sie zunächst nur und geben Sie Warnungen aus. Sobald Ihr Team an den Workflow gewöhnt ist, verschärfen Sie die Schwellenwerte schrittweise.

Über Lighthouse hinaus

Lighthouse liefert Labordaten. Kombinieren Sie es mit Real User Monitoring (RUM): Das npm-Paket web-vitals plus Ihre Analytics oder Dienste wie SpeedCurve und Calibre liefern echte Performance-Trends.

Kurzer Check

Warum nimmt Lighthouse CI typischerweise den Median mehrerer Läufe (z. B. 5) statt eines einzelnen Laufs?

Zusammenfassung: Automatisiertes Lighthouse

lhci autorun lässt sich in CI integrieren. Konfigurieren Sie in lighthouserc.json: URLs, Läufe (5+), Assertions für Kategorien und Metriken sowie Performance-Budgets. treosh/lighthouse-ci-action für GitHub. Hosten Sie den LHCI-Server selbst für Trends. Verwenden Sie Puppeteer-Skripte für authentifizierte Seiten. Prüfen Sie Mobilgerät und Desktop. Beginnen Sie mit Warnungen; verschärfen Sie die Schwellenwerte im Lauf der Zeit. Kombinieren Sie es mit RUM für ein vollständiges Bild.

Häufig gestellte Fragen

Ist die Lektion „Automatisierte Lighthouse-Prüfungen“ kostenlos?

Ja — der vollständige Text von „Automatisierte Lighthouse-Prüfungen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Automatisierte Lighthouse-Prüfungen“?

Fügen Sie die Lighthouse-CI-GitHub-Action hinzu, legen Sie Schwellenwerte für Performance- und Accessibility-Scores fest und verhindern Sie Merges, die die Core Web Vitals verschlechtern. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Automatisierte Lighthouse-Prüfungen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. GitHub Actions für Frontends: Linting, Tests und Build
  2. Bereitstellung auf Vercel, Netlify und Cloudflare Pages
  3. Umgebungsvariablen in CI
  4. Automatisierte Lighthouse-Prüfungen
← Zurück zu Frontend Academy