Lighthouse-Audits und Bewertung
Führen Sie Lighthouse in DevTools oder CI aus, lesen Sie den Performance-Score und die Diagnosen und priorisieren Sie die Optimierungsmöglichkeiten mit den größten Einsparungen.
Lighthouse-Audits und Bewertung ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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.
Was ist Lighthouse?
Lighthouse ist Googles Open-Source-Audit-Tool. Es simuliert das Laden einer Seite und bewertet sie in den Kategorien Performance, Barrierefreiheit, Best Practices, SEO und PWA. Lighthouse ist in die Chrome DevTools integriert und kann über die CLI oder in der CI ausgeführt werden.
Lighthouse in den DevTools ausführen
Öffnen Sie die DevTools, klicken Sie auf den Tab Lighthouse, wählen Sie Kategorien und Gerät (mobil/Desktop) aus und klicken Sie auf „Analyze page load“. Der simulierte Test dauert etwa 30 Sekunden.
Aufschlüsselung des Performance-Scores
Der Performance-Score (0–100) ist ein gewichteter Durchschnitt aus: LCP (25 %), Total Blocking Time (30 %), CLS (25 %), FCP (10 %) und Speed Index (10 %). Die Messlatte liegt hoch – ab 90 gilt der Wert als „Good“.
First Contentful Paint (FCP)
FCP bezeichnet den Zeitpunkt, zu dem das erste Inhaltselement (Text oder Bild) gerendert wird. Die Messgröße unterscheidet sich von LCP: FCP berücksichtigt irgendeinen Inhalt, LCP das größte Element. Gut: unter 1,8 s.
Total Blocking Time (TBT)
TBT misst, wie lange der Hauptthread durch JavaScript-Tasks blockiert ist, die länger als 50 ms dauern. Ein hoher TBT-Wert bedeutet, dass sich die Seite nicht reaktionsfähig anfühlt, selbst wenn sie bereits fertig aussieht.
Den Abschnitt „Opportunities“ lesen
Lighthouse führt unter „Opportunities“ Optimierungsmöglichkeiten mit geschätzten Einsparungen auf, z. B. „Eliminate render-blocking resources: 1.2s“. Sortieren Sie nach Einsparung und beheben Sie zuerst die größten Punkte, um die maximale Wirkung zu erzielen.
Häufige Optimierungsmöglichkeiten
Häufige Maßnahmen sind: nicht kritische Skripte mit defer/async laden, kritisches CSS inline einfügen, wichtige Requests vorladen, ein CDN verwenden, Textkomprimierung (Brotli/gzip) aktivieren und moderne Bildformate ausliefern.
Lighthouse CLI
Führen Sie Lighthouse über die Kommandozeile aus, um automatisierte Audits zu erstellen.
npm install -g lighthouse
lighthouse https://example.com \
--output html \
--output-path ./report.html \
--chrome-flags="--headless"Lighthouse CI in GitHub Actions
Führen Sie bei jedem Pull Request Audits aus und lassen Sie den Build fehlschlagen, wenn die Scores unter festgelegte Grenzwerte fallen.
# .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.jsonLighthouse-Konfiguration: Score-Assertions
Definieren Sie Assertions in lighthouserc.json, damit Pull Requests mit verschlechterten Scores fehlschlagen.
{
"ci": {
"assert": {
"assertions": {
"categories:performance": ["error", { "minScore": 0.9 }],
"categories:accessibility": ["error", { "minScore": 0.95 }],
"largest-contentful-paint": ["error", { "maxNumericValue": 2500 }]
}
}
}
}Drosselung und Gerätesimulation
Lighthouse simuliert standardmäßig ein langsames 4G-Netzwerk und eine mobile CPU der mittleren Leistungsklasse. Das ist beabsichtigt: Nutzer in der Produktion verwenden echte Geräte, die langsamer sind als Ihr Entwicklungsrechner.
Score-Schwankungen – warum die Werte variieren
Lighthouse-Scores schwanken zwischen den Durchläufen, weil das Timing von JavaScript variieren kann. Führen Sie Audits 3–5 Mal aus und verwenden Sie den Median. Mit numberOfRuns von Lighthouse CI können Sie den Median automatisch berechnen lassen.
Schnelltest
Welche Lighthouse-Metrik misst, wie lange der Hauptthread durch lange JavaScript-Tasks blockiert ist?
Zusammenfassung: Lighthouse
Lighthouse prüft Performance, Barrierefreiheit, Best Practices, SEO und PWA. Der Performance-Score ist ein gewichteter Durchschnitt aus LCP, TBT, CLS, FCP und Speed Index. Der Abschnitt „Opportunities“ ordnet Optimierungen nach den geschätzten Einsparungen. Führen Sie Lighthouse über die DevTools, die CLI oder in der CI mit treosh/lighthouse-ci-action aus. Bei schwankenden Scores sollten Sie den Median mehrerer Durchläufe verwenden.
Häufig gestellte Fragen
Ist die Lektion „Lighthouse-Audits und Bewertung“ kostenlos?
Ja — der vollständige Text von „Lighthouse-Audits und Bewertung“ 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 „Lighthouse-Audits und Bewertung“?
Führen Sie Lighthouse in DevTools oder CI aus, lesen Sie den Performance-Score und die Diagnosen und priorisieren Sie die Optimierungsmöglichkeiten mit den größten Einsparungen. 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 2 von 4.
Wie lange dauert die Lektion „Lighthouse-Audits und Bewertung“?
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
- Core Web Vitals: LCP, FID, CLS
- Lighthouse-Audits und Bewertung
- Bildoptimierung: Lazy Loading und WebP-Formate
- Code Splitting und Lazy Routes