So führen Sie lokale Leistungstests mit Lighthouse durch (Update 2022)

Veröffentlicht: 2022-12-10

Update, Dez 2022: Aufgrund der neuesten Verbesserungen in PageSpeed ​​Insights (PSI) wurde der Artikel um Informationen zur Durchführung von Lighthouse-Audits mit PSI und der Chrome-Erweiterung erweitert.

Google liebt Websites, die schnell geladen werden und ein außergewöhnliches Nutzererlebnis bieten.

Und wie können Sie Ihre Website besser anhand der Leistungsanforderungen von Google testen als mit einem eigenen Tool?

In diesem Artikel erfahren Sie alles, was Sie über Lighthouse wissen müssen, wie Sie Audits durchführen und erhalten Antworten auf die häufigsten Fragen.

Lass uns anfangen!

Springen Sie mit NitroPack direkt zum „Nachher“ Ihrer Site-Geschwindigkeit →

Was ist Google Lighthouse?

Lighthouse ist ein kostenloses, vollständig automatisiertes Open-Source-Tool, mit dem Sie die Geschwindigkeit, Leistung und allgemeine Benutzererfahrung Ihrer Website verbessern können.

Sie können es auf jeder Webseite ausführen und bieten Audits für Leistung, Zugänglichkeit, Best Practices, SEO und progressive Web-Apps.

Neben der Rückgabe eines Berichts mit den berechneten Werten für jede Metrik bietet Google Lighthouse eine Liste mit spezifischen Verbesserungsvorschlägen, um Ihre Ergebnisse zu verbessern.

Die nahtlose Benutzeroberfläche von Lighthouse eignet sich nicht nur für erfahrene Entwickler, sondern für jeden Eigentümer, der die Leistung seiner Website im Auge behalten möchte.

Warum Sie Google Lighthouse verwenden sollten

Aus zwei Gründen:

Erstens wirkt sich die Geschwindigkeit Ihrer Website auf den Datenverkehr, die Absprungraten, das Ranking, die Benutzererfahrung und die Conversions aus. Durch regelmäßiges Nachverfolgen der Leistung können Sie Verbesserungen rechtzeitig anwenden. So garantieren Sie Ihrem Unternehmen zufriedene Besucher und höhere Umsätze.

Zweitens ist Lighthouse ein von Google entwickeltes Tool. Wenn Sie also sicherstellen möchten, dass Ihre Website die neuesten Webleistungs-, Zugänglichkeits- und SEO-Standards von Google erfüllt, ist Lighthouse die ideale Lösung zum Testen.

Sehen wir uns an, wie Sie Audits mit Lighthouse durchführen können.

So verwenden Sie Google Lighthouse

Sie können aus vier verschiedenen Möglichkeiten wählen, um Lighthouse-Audits durchzuführen:

  • Chrome-Entwicklungstools
  • PageSpeed-Einblicke
  • Chrome-Erweiterung

Der letzte erfordert die Installation und Ausführung des Node-Befehlszeilentools. Es wird ein bisschen technisch, deshalb gehen wir in diesem Artikel nicht weiter darauf ein. Wenn Sie es jedoch ausprobieren möchten, lesen Sie die offizielle Dokumentation von Google.

Gehen wir nun die einfachen Optionen durch:

Führen Sie lokale Lighthouse-Audits über Chrome DevTools aus

Laden Sie Google Chrome für Desktop herunter (falls Sie es noch nicht haben).

1. Öffnen Sie in Google Chrome die Seiten-URL, die Sie prüfen möchten.

2. Wählen Sie im Hauptmenü von Chrome More Tools und dann Developer Tools (oder klicken Sie direkt mit der rechten Maustaste auf die Seite und wählen Sie Inspect):

Oder

3. Klicken Sie auf >> und dann auf die Registerkarte Leuchtturm.

4. Wählen Sie Modus, Gerät und Kategorien aus. (Google schlägt vor, alle Kategorien aktiviert zu lassen).

5. Klicken Sie auf Seitenlast analysieren .

6. Nach 10 Sekunden gibt Ihnen Lighthouse einen Bericht auf der Seite.

Wie Sie sehen können, ist der Prozess ziemlich einfach.

Die einzige Frage, die sich beim Ausführen eines Audits über Chrome DevTools stellen könnte, könnte lauten:

Was ist der Unterschied zwischen den drei Modi im Lighthouse-Audit?

Hier ist, was Google sagt:

  • Der Navigationsmodus analysiert das Laden einer einzelnen Seite.
  • Der Zeitspannenmodus analysiert einen beliebigen Zeitraum, der typischerweise Benutzerinteraktionen enthält.
  • Der Snapshot-Modus analysiert die Seite in einem bestimmten Zustand.

Quelle: github.com

Führen Sie den Lighthouse-Geschwindigkeitstest über PageSpeed ​​Insights (PSI) durch

  1. Öffnen Sie PageSpeed ​​Insights.
  2. URL eingeben.
  3. Klicken Sie auf Analysieren .

Sowohl Chrome DevTools- als auch PageSpeed ​​Insights-Berichte sehen identisch aus.

Mit einem großen Unterschied .

Das PSI liefert sowohl Labor- als auch Felddaten.

Sie werden feststellen, dass Ihr PSI-Bericht mit der Core Web Vitals-Bewertung Ihrer Seite beginnt.

Die Core Web Vitals sind eine Reihe von drei Metriken, die die Ladezeit Ihrer Seite, die visuelle Stabilität und die Seiteninteraktivität messen. Ihre Punktzahlen basieren auf echten Benutzererfahrungsdaten (Felddaten), die vom Chrome User Experience Report (CrUX)-Dataset bereitgestellt werden.

Übergeben Sie Ihre Core Web Vitals auf Autopilot. Sehen Sie Ihre Website mit NitroPack →

Der Rest des Berichts repliziert die Chrome DevTools-Ergebnisseite.

Diese Ergebnisse basieren jedoch auf Labordaten, die in einer kontrollierten Umgebung mit vordefinierten Geräte- und Netzwerkeinstellungen gesammelt wurden.

Mit anderen Worten bedeutet das Erreichen einer Punktzahl von 100/100 nicht unbedingt, dass Sie Ihren Besuchern eine großartige Benutzererfahrung bieten.

Im Allgemeinen sind das Lighthouse-Audit und der Performance-Score großartige Möglichkeiten, um Probleme zu debuggen und die Wirkung der angewendeten Optimierungen zu testen.

Zusätzliche Ressourcen: Wenn Sie neu bei PageSpeed ​​Insights sind, sehen Sie sich unseren PSI-Einsteigerleitfaden an .

Führen Sie Google Lighthouse als Chrome-Erweiterung aus

Laden Sie Google Chrome für Desktop herunter (falls Sie es noch nicht haben).

1. Installieren Sie die Lighthouse Chrome-Erweiterung.

2. Navigieren Sie zu der Seite, die Sie testen möchten.

3. Klicken Sie auf das Leuchtturm-Symbol.

4. Klicken Sie auf Bericht erstellen.

Sie sollten jedoch die folgende Google-Empfehlung berücksichtigen:

„Wenn Sie keinen bestimmten Grund haben, sollten Sie den Chrome DevTools-Workflow anstelle dieses Chrome Extension-Workflows verwenden. Der DevTools-Workflow ermöglicht das Testen lokaler Websites und authentifizierter Seiten, während die Erweiterung dies nicht tut.“

Leuchtturm-Score erklärt

Die meisten Menschen stellen sich, nachdem sie ihre ersten paar Lighthouse-Audits durchgeführt und sich an die Benutzeroberfläche gewöhnt haben, unweigerlich die folgenden drei Fragen:

  • Wie wird mein Performance-Score (auch bekannt als Lighthouse-Score, auch als PageSpeed-Score bezeichnet) berechnet?
  • Warum unterscheidet sich mein Lighthouse-Score von PageSpeed ​​Insights?
  • Warum ist mein Ergebnis bei jedem Test anders?

Hier ist eine kurze Erklärung zu jeder Frage:

Wie wird meine Leistungsbewertung berechnet?

Der Leistungswert ist ein gewichteter Durchschnitt der folgenden sechs Metriken:

  • Erste zufriedene Farbe (FCP)
  • Zeit bis zur Interaktivität (TTI)
  • Geschwindigkeitsindex
  • Gesamtsperrzeit (TBT)
  • Größte zufriedene Farbe (LCP)
  • Kumulative Layoutverschiebung (CLS)

Jede Metrik hat ein anderes Gewicht in der Gesamtpunktzahl:

Quelle: web.dev

Daher wird es den größten Einfluss auf Ihren Leistungswert haben, wenn Sie sich zuerst mehr Mühe geben, LCP und Total Blocking Time zu optimieren.

Gut zu wissen: Die Gewichtswerte sind nicht in Stein gemeißelt. Google neigt dazu, die Prozentsätze jedes Mal zu überarbeiten, wenn sie die Version von Lighthouse aktualisieren. Achten Sie darauf, regelmäßig nach anstehenden Updates zu suchen.

Erreiche über 90 Punkte im Autopiloten. Sehen Sie Ihre Website mit NitroPack →

Warum unterscheidet sich mein Lighthouse-Score von PageSpeed ​​Insights?

Der Hauptunterschied ergibt sich aus dem Testort.

PageSpeed ​​Insights wählt den Server zum Ausführen des Tests basierend auf Ihrem aktuellen Standort aus. Es hat Server in:

  • UNS
  • Europa
  • Asien

Ihr PSI-Score kann je nach physischer Entfernung zwischen dem Server und Ihrem Standort variieren. Je näher Sie am Testserver sind, desto besser werden Ihre Ergebnisse sein.

Im Gegensatz dazu führen Sie mit Chrome DevTools einen lokalen Test durch. Es werden keine Daten zwischen Servern übertragen, sodass es keine Netzwerklatenz gibt.

Daher zeigen die Endergebnisse immer, wie ein Benutzer an Ihrem Standort die Website erleben würde.

Warum ist mein Ergebnis bei jedem Test anders?

Eine Anomalie, die Sie möglicherweise bemerken, wenn Sie mehrere Tests hintereinander wiederholen, ist der Unterschied in den Ergebnissen.

Es gibt mehrere zugrunde liegende Bedingungen und Variablen, die sich auf Ihren Leistungswert auswirken, darunter:

  • A/B-Tests oder Änderungen in der Anzeigenschaltung
  • Änderungen am Routing des Internetverkehrs
  • Testen auf verschiedenen Geräten (ein leistungsstarker Desktop vs. ein leistungsschwacher Laptop)
  • Browsererweiterungen, die JavaScript einfügen und Netzwerkanforderungen hinzufügen/ändern
  • Antiviren Software

Um tiefer in die technischen Einzelheiten einzutauchen, besuchen Sie die ausführliche Dokumentation von Lighthouse zur Variabilität.

Alles, was Sie über die Durchführung von Lighthouse-Audits wissen sollten (Zusammenfassung)

Wir haben in diesem Artikel viele Themen behandelt, daher hier eine Zusammenfassung der wichtigsten Punkte:

  • Lighthouse ist ein vollständig automatisiertes Open-Source-Tool zum Testen der Webleistung.
  • Mit ihm können Sie die Leistung Ihrer Website überwachen und potenzielle Leistungsprobleme rechtzeitig beheben.
  • Es ist ein von Google entwickeltes Tool, das es zur idealen Lösung für Webleistungstests macht.
  • Es gibt vier verschiedene Möglichkeiten zum Ausführen von Lighthouse-Audits Chrome DevTools, PageSpeed ​​Insights, Chrome Extension und Ausführen des Node-Befehlszeilentools.
  • Ihre Lighthouse-Ergebnisse basieren auf Labordaten.
  • PSI stellt im Core Web Vitals-Widget reale Benutzererfahrungsdaten bereit.
  • Wenn Sie zwischen der Ausführung von Audits über die Chrome-Erweiterung und Chrome DevTools wählen müssen, empfiehlt Google die Verwendung von Letzterem.
  • Ihr Leistungswert ist ein gewichteter Durchschnitt aus sechs Metriken: FCP, TTI, Geschwindigkeitsindex, TBT, LCP und CLS.
  • Die Gewichtswerte können je nach Lighthouse-Version variieren.
  • Der Unterschied zwischen Ihrem PSI- und Chrome DevTools-Score ergibt sich aus dem Teststandort.
  • Wiederholte Audits können aufgrund verschiedener Variabilitätsfaktoren unterschiedliche Bewertungen zurückgeben.