Lighthouse-HTML-Audit

Lighthouse ist ein automatisiertes Prüfwerkzeug, das in die Chrome DevTools (Tab „Audits“) integriert ist und eine Seite in den Kategorien Performance, Accessibility, Best Practices, SEO und PWA bewertet. Es lädt die geprüfte Seite im Browser, führt Messungen durch und erstellt umsetzbare Verbesserungsvorschläge.

Wechseln Sie in den Chrome DevTools zu Lighthouse, wählen Sie die Kategorien aus, entscheiden Sie sich für Desktop oder Mobile und klicken Sie auf „Analyze page load“. Das Tool lädt die Seite in einer sauberen Umgebung neu und erstellt innerhalb von weniger als einer Minute einen Bericht.

Performance misst die Core Web Vitals und weitere Geschwindigkeitskennzahlen. Accessibility prüft an WCAG ausgerichtete Regeln. Best Practices deckt Sicherheit und moderne Webstandards ab. SEO prüft crawlbares Markup. PWA überprüft Installierbarkeit und Offline-Unterstützung.

Die Accessibility-Prüfung erkennt fehlenden alt-Text, fehlende Formular-Labels, zu geringen Farbkontrast, ein fehlendes Sprachattribut, doppelte ids, fehlende Orientierungspunkte sowie fokussierbare Elemente ohne Tastaturunterstützung. Zu jedem Problem gibt es einen Link zu einer detaillierten Anleitung zur Behebung.

Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), Total Blocking Time (TBT) und Speed Index. Jede Kennzahl wird bewertet und mit einer Gewichtung in den gesamten Performance-Score einbezogen. Lighthouse zeigt, welche DOM-Elemente am meisten zu den einzelnen Kennzahlen beitragen.

Geprüft werden die Verwendung von HTTPS, Konsolenfehler, Seitenverhältnisse von Bildern, veraltete APIs und gemischte Inhalte. Die Best-Practices-Prüfung erkennt eine große Bandbreite veralteter oder unsicherer Muster, die modernisiert werden sollten.

Erkannt werden eine fehlende Meta-Beschreibung, ein fehlendes oder doppeltes <title>, Probleme mit robots.txt, Links ohne beschreibenden Text, ein fehlendes Viewport-Meta-Tag und hreflang-Probleme. Ergänzen Sie Lighthouse SEO durch ein echtes SEO-Prüfwerkzeug (Ahrefs, Screaming Frog) für eine Analyse auf Inhaltsebene.

Geprüft werden alle Voraussetzungen für die Installierbarkeit: HTTPS, ein gültiges Manifest mit den erforderlichen Mindestfeldern, ein registrierter Service Worker, ein Viewport-Tag und Icons. Beheben Sie alle Fehler der PWA-Prüfung, bevor Sie die Anwendung als installierbare App veröffentlichen.

Das Lighthouse CLI und das Tool Lighthouse CI integrieren Prüfungen in CI/CD. Bei jedem PR führt die Action Lighthouse für die bereitgestellte Vorschau aus. Sie schlägt fehl, wenn die Scores unter festgelegte Schwellenwerte fallen. So werden schleichende Regressionen bei Barrierefreiheit, Performance oder SEO verhindert.

Lighthouse-Berichte können als JSON gespeichert und programmgesteuert verglichen werden: Verfolgen Sie den LCP-Score über die Zeit, um Regressionen zu erkennen, vergleichen Sie zwei PRs, um zu sehen, welcher davon welche Kennzahl verändert hat, und lösen Sie bei Überschreitungen von Schwellenwerten Warnungen aus. Die Daten sind für die Verwendung in Tools strukturiert.

Lighthouse ist ein synthetischer Test – er läuft in einer kontrollierten Umgebung und nicht bei echten Nutzern. Kombinieren Sie ihn mit Tools für Real User Monitoring (RUM), die die tatsächliche Nutzererfahrung erfassen. Synthetische Tests erkennen Regressionen früh; RUM bestätigt, dass Nutzer die Verbesserungen tatsächlich wahrnehmen.

Einige Prüfungen melden Muster, die in bestimmten Kontexten unvermeidbar sind. Dokumentieren Sie bewusst in Kauf genommene Ausnahmen, fügen Sie sie der Ignorierliste von Lighthouse CI hinzu und überprüfen Sie sie regelmäßig neu, während sich die Plattform weiterentwickelt. Vermeiden Sie ein pauschales „Alles ignorieren“ – dadurch wird der Zweck automatisierter Prüfungen zunichtegemacht.

Betrachten Sie Lighthouse-Scores als Ziel für kontinuierliche Verbesserung und nicht als einmalige Aufgabe. Etablieren Sie eine Kultur, in der der Score bei jedem PR geprüft, Regressionen sofort behoben und die Ausgangsbasis schrittweise verbessert wird. Die meisten Teams steigern ihre Scores mit dieser Disziplin über mehrere Monate hinweg kontinuierlich.

Warum sollten synthetische Lighthouse-Prüfungen mit Real User Monitoring (RUM) kombiniert werden?

Lighthouse prüft eine Seite in den Kategorien Performance, Accessibility, Best Practices, SEO und PWA. Führen Sie es für einmalige Prüfungen über die Chrome DevTools und für die kontinuierliche Integration über Lighthouse CI aus. Beheben Sie Regressionen bei jedem PR, etablieren Sie eine Kultur der messwertgestützten Verbesserung und kombinieren Sie synthetische Prüfungen mit Real User Monitoring, um zu bestätigen, dass Verbesserungen unter Laborbedingungen auch echten Nutzern zugutekommen.