Lighthouse Diff: Vergleich zweier Website-Geschwindigkeitstests
Martin Michálek25.2.20264 Minuten LesenHaben Sie eine neue Version Ihrer Website veröffentlicht und müssen wissen, was sich an der Geschwindigkeit geändert hat? Lighthouse Diff zeigt es Ihnen klar und gebündelt.
Lighthouse Diff ist ein Open-Source-Tool vom Google Chrome-Team, das zwei Lighthouse-Berichte visuell vergleicht und die Unterschiede hervorhebt.
Es funktioniert wie ein „Diff für Geschwindigkeit“ – ähnlich wie Entwickler zwei Versionen von Code vergleichen, vergleichen Sie zwei Versionen der Geschwindigkeit Ihrer Website.
Wofür ist Lighthouse Diff nützlich?
Stellen Sie sich vor, Sie überwachen regelmäßig die Geschwindigkeit Ihrer Website und bemerken eines Tages, dass sich der Lighthouse-Score oder eine andere Metrik erheblich verändert hat.
Was ist eigentlich passiert? Hat sich eine bestimmte Metrik verschlechtert, oder haben sich die Bewertungen in mehreren Bereichen gleichzeitig geändert?
Lighthouse Diff beantwortet diese Fragen, indem es zwei JSON-Berichte des Lighthouse-Tools nimmt und Ihnen zeigt:
- Änderungen im Gesamtscore. Sie sehen, wie sich die Gesamtbewertung der Seitenleistung verschoben hat.
- Unterschiede in den Metriken. Vergleichen Sie spezifische Metriken wie LCP (Ladegeschwindigkeit), CLS (Layoutstabilität) oder TBT (Blockierung des Browsers) und sehen Sie, welche sich verbessert oder verschlechtert haben.
- Änderungen in den Audits. Lighthouse führt Dutzende von Prüfungen (Audits) durch – von der Bildgröße über die richtige Cache-Einstellung bis hin zur JavaScript-Effizienz. Diff zeigt Ihnen, welche spezifischen Prüfungen im Vergleich zu vorherigen Messungen bestanden oder fehlgeschlagen sind.
Warum ist der Vergleich von Tests wichtig?
Ein einmaliger Blick auf das Ergebnis eines Lighthouse-Tests sagt Ihnen, wie es um Ihre Website steht. Aber wenn Sie verstehen wollen, was sich geändert hat und warum, benötigen Sie einen Vergleich.
Lighthouse Diff eignet sich in folgenden Situationen:
- Nach der Veröffentlichung einer neuen Version der Website. Führen Sie einen Test vor und nach der Veröffentlichung durch, und Diff zeigt Ihnen die Auswirkungen der Änderungen. Sie sehen, ob der neue Code die Geschwindigkeit verschlechtert hat.
- Bei der Fehlersuche. Wenn der Wächter auf eine Verschlechterung der Metriken hinweist, hilft Ihnen Diff, das spezifische Problem zu identifizieren – etwa ein neues Skript, das das Rendering blockiert, oder ein größeres Bild auf der Seite.
- Bei der Geschwindigkeitsoptimierung. Möchten Sie sicherstellen, dass Ihre Anpassungen tatsächlich geholfen haben? Vergleichen Sie den Test vor und nach der Optimierung.
- Bei der Teamkommunikation. Diff bietet einen klaren visuellen Beweis für die Änderungen, der sich leichter zwischen Entwicklern, Marketern und der Unternehmensleitung kommunizieren lässt.
Wie funktioniert Lighthouse Diff?
Das Tool arbeitet mit JSON-Dateien, die der Standardausgabe des Lighthouse-Tools entsprechen. Es gibt zwei Möglichkeiten, den Vergleich durchzuführen:
Manueller Vergleich im Online-Tool
- Holen Sie sich zwei JSON-Berichte – zum Beispiel aus dem Detail des Testruns in Ihrem Monitoring, wo Sie sie herunterladen können.
- Öffnen Sie Lighthouse Diff.
- Laden Sie beide Dateien hoch – eine als „Basis“ (Ausgangszustand) und die andere als „Vergleich“ (Zustand zum Vergleich).
- Das Tool zeigt Ihnen sofort die Unterschiede an.
Vergleich direkt im PageSpeed.ONE Monitoring
Ab Version 4.10 ist Lighthouse Diff direkt im PageSpeed.ONE Monitoring integriert. In der Messhistorie öffnen Sie das Detail einer beliebigen Messung und klicken auf den Link Lighthouse Diff – der Vergleich mit der vorherigen Messung öffnet sich automatisch, ohne dass Sie Dateien herunterladen müssen.
Dies funktioniert bei PLUS-Tests, bei denen wir vollständige JSON-Ausgaben aus jedem Testrun zur Verfügung haben.
Auf welche Metriken sollte man achten?
Beim Vergleich zweier Tests empfehlen wir, insbesondere die folgenden Metriken zu beachten, die im oberen Bereich des Diffs angezeigt werden:
| Metrik | Was sie misst | Worauf achten |
|---|---|---|
| LCP | Ladegeschwindigkeit des Hauptinhalts | Änderungen über 200 ms |
| TBT | Blockierung des Hauptthreads | Änderungen über 50 ms |
| CLS | Layoutverschiebungen beim Laden | Änderungen über 0,05 |
| FCP | Erste Darstellung von Inhalten | Änderungen über 100 ms |
Neben den Metriken sollten Sie auch den Bereich mit den Audits beachten. Dort finden Sie die konkreten Ursachen für Änderungen – wie etwa ein neues Bild ohne Lazy Loading, fehlende Kompression oder nicht optimierte Webfonts.
Beachten Sie, dass synthetische Messungen von Lighthouse eine gewisse Variabilität aufweisen. Kleine Unterschiede (bis zu einstelligen Prozentwerten bei den Scores) können durch natürliche Schwankungen verursacht werden, nicht durch reale Änderungen auf der Website. Achten Sie darauf, dass Sie Lighthouse-Berichte aus derselben Umgebung vergleichen.
Zusammenfassung
Lighthouse Diff ist ein praktischer Helfer für jeden, der sich um die Geschwindigkeit einer Website kümmert. Es ermöglicht Ihnen, genau zu sehen, was sich zwischen zwei Tests geändert hat, ohne dass Sie Dutzende von Werten manuell vergleichen müssen.
In Kombination mit Geschwindigkeitsmonitoring und Performance Budgets bildet Lighthouse Diff einen wichtigen Bestandteil des Werkzeugkastens zur Erhaltung und Verbesserung der Geschwindigkeit einer Website. Ab Version 4.10 steht es Ihnen direkt im PageSpeed.ONE Monitoring zur Verfügung.