Ein neues Tool von Google testet und gibt Ihnen Empfehlungen zur Verbesserung von Leistung, SEO, Sicherheit, Best Practices und Barrierefreiheit.

Google hat vor kurzem Lighthouse auf den Markt gebracht, ein Open-Source-Tool zur manuellen und automatischen Überprüfung Ihrer Website.

Welche Metriken werden von Google Lighthouse getestet?

Es gibt mehr als 75 Metriken, die es testet und Ihnen eine Gesamtbewertung gibt. Als Website-Besitzer, SEO-Analyst und Webmaster interessieren Sie sich vielleicht für einige der folgenden beliebten Metriken.

  • Leistung – Zeit bis zur Interaktivität, Latenz, Geschwindigkeitsindex, Ressourcenoptimierung, TTFB, Asset-Lieferung, Ausführungszeit von Skripts, DOM-Größe usw.
  • SEO – Mobilfreundlichkeit, Meta, Crawling, kanonisch, Struktur, usw.
  • Best Practices – Bildoptimierung, JS-Bibliotheken, Browser-Fehlerprotokollierung, Zugriff über HTTPS, bekannte JS-Schwachstellen, usw
  • Barrierefreiheit – Seitenelemente, Sprache, ARIA-Attribute, usw.
  • PWA (Progressive Webanwendung) – Umleitung von HTTP auf HTTPS, Response Code ok, schnelles Laden auf 3G, Splash Screen, Viewport usw.

Es ist ein fantastisches Tool, das Sie auf vielfältige Weise nutzen können.

Das ist richtig – auf so viele Arten. Wenn Sie Entwickler sind, können Sie Node.js verwenden, um einen Test programmatisch auszuführen. Es gibt bereits einige Tools auf dem Markt, die von Lighthouse unterstützt werden und eine kontinuierliche Überwachung der Website-Performance bieten.

Lassen Sie uns herausfinden, wie Sie den Lighthouse-Test mit Ihrer Website durchführen.

Beginnen Sie mit der einfachsten Variante.

Messen Sie mit web.dev

Google hat web.dev vor ein paar Monaten veröffentlicht und sich großer Beliebtheit erfreut. Online zu testen ist ganz einfach.

Gehen Sie auf die Seite Measure und geben Sie die URL ein, um die Prüfung durchzuführen. Es dauert nur ein paar Sekunden und Sie sollten die detaillierte Berichterstattung mit der Gesamtbewertung sehen.

Die Ergebnisse zeigen auch die Erfolgskennzahlen, die Sie für die bestandenen Audits testen und an denen Sie arbeiten müssen.

Verbringen Sie nicht zu viel Zeit damit, 100 zu erreichen. Nicht einmal die Google-Seiten erreichen diese Punktzahl.

Betrachten Sie sie als Richtlinien und versuchen Sie, sich so weit wie möglich zu verbessern.

Hinweis: web.dev emuliert einen Test mit einem mobilen Gerät, und während ich dies schreibe, sehe ich keine Option für einen Test mit einem Desktop.

Chrome

Wussten Sie, dass Lighthouse in Ihrem Chrome-Browser verfügbar ist? Und die gute Nachricht ist, dass Sie wählen können, ob Sie mit einem Mobilgerät oder einem Desktop-Gerät testen möchten, und dass es in den Entwicklertools verfügbar ist.

  • Öffnen Sie den Chrome-Browser
  • Rufen Sie Ihre zu testende Website auf
  • Öffnen Sie die Entwicklertools (drücken Sie F12, wenn Sie Windows verwenden) oder klicken Sie mit der rechten Maustaste auf die Seite und dann auf Prüfen.
  • Wechseln Sie auf die Registerkarte Überprüfungen.

Wie Sie oben sehen können, haben Sie die Möglichkeit, auszuwählen, was Sie testen möchten. So können Sie sich auf Ihr Ziel konzentrieren und erhalten die Prüfergebnisse schneller.

Die Ergebnisse von Chome und web.dev sehen fast gleich aus.

Aber wenn Sie genau hinsehen, gibt es hier eine zusätzliche Metrikgruppe – Progressive Web App. Ein weiterer Grund also, Chrome für das Audit zu verwenden.

Geekflare Lighthouse API

Sie können die Web-Performance-Daten auch mit der Geekflare Lighthouse API abrufen. Diese extrahiert die Lighthouse-Metriken für Mobilgeräte oder Desktops mit nur einem Klick im HTML-, JSON- oder CSV-Format.

geekflare lighthouse api

Sie können den Bericht auch individuell anpassen, indem Sie das Ausgabeformat ändern und/oder sich auf eine bestimmte Metrik wie SEO konzentrieren.

{
  "Parameter": [
      "--output=html",
      "--only-categories=seo",
  ],
  "url": "beispiel.de"
}

Und zum Glück gibt es eine kostenlose Stufe, die 3000 API-Aufrufe pro Monat umfasst. Die kostenpflichtigen Versionen bieten jedoch zusätzlich Unterstützung für mehrere Standorte, einen Residential Proxy und höhere Abfrageraten, und das bereits ab 5 $ pro Monat.

Node.js

Lighthouse ist als Node-Modul verfügbar. Sie können es auf Ihrem Server installieren und programmatisch oder über die Kommandozeile verwenden. Sehen wir uns kurz an, wie Sie Lighthouse installieren, um einige Tests durchzuführen.

Installation von Lighthouse auf Ubuntu 18.x

Das Folgende habe ich auf dem DigitalOcean-Server getestet. Lighthouse erfordert Node LTS 8.9 oder höher, und ich nehme an, dass Sie es bereits installiert haben. Falls nicht, lesen Sie diese Node.js Installationsanleitung.

Sie benötigen außerdem einen Chromium-Browser, der auf dem Server installiert sein muss. Ich habe die Installationsanleitung hier beschrieben.

Die Installation von Lighthouse ist einfach, wie die anderer Module auch.

  • Melden Sie sich bei Ihrem Server an
  • Führen Sie den folgenden Befehl zur Installation aus
npm install -g lighthouse

Ich verwende hier -g, damit es als globales Modul installiert wird.

root@geekflarelab:~# npm install -g lighthouse
/usr/bin/lighthouse -> /usr/lib/node_modules/lighthouse/lighthouse-cli/index.js
/usr/bin/chrome-debug -> /usr/lib/node_modules/lighthouse/lighthouse-core/scripts/manual-chrome-launcher.js

> axe-core@3.1.2 postinstall /usr/lib/node_modules/lighthouse/node_modules/axe-core
> node build/utils/postinstall.js

  lighthouse@4.0.0
179 Pakete von 119 Mitwirkenden in 10.094s hinzugefügt
root@geekflarelab:~#

Führen Sie nach der Installation den Befehl lighthouse aus, um sicherzustellen, dass das Paket korrekt installiert wurde.

root@geekflarelab:~# lighthouse
Bitte geben Sie eine Url an

Geben Sie --help für die verfügbaren Optionen an
root@geekflarelab:~#

Gut, der Leuchtturm ist bereit, die Prüfung durchzuführen. Lassen Sie uns einige Testoptionen ausprobieren.

So führen Sie einen Test mit einem Headless-Browser aus

lighthouse URL --chrome-flags="--headless"

Sie müssen eine absolute URL angeben, einschließlich HTTP oder HTTPS.

Beispiel:

chandan@geekflarelab:~$ lighthouse https://geekflare.com/de --chrome-flags="--headless"
  ChromeLauncher Wartet auf den Browser.  0ms
  ChromeLauncher Wartet auf den Browser...  1ms
  ChromeLauncher Wartet auf den Browser.....  511ms
  ChromeLauncher Wartet auf den Browser.....✓ 2ms
  status Verbinden mit Browser 176ms
  status Zurücksetzen des Status mit about:blank 24ms
  status Benchmarking Maschine 30ms
  status Initialisierung... 508ms
  status Seite laden & warten auf onload Scripts, CSSUsage, Viewport, ViewportDimensions, ThemeColor, Manifest, RuntimeExceptions, ChromeConsoleMessages, ImageUsage, Accessibility, LinkElements, AnchorsWithNoRelNoopener, AppCacheManifest, Doctype, DOMStats, JSLibraries, OptimizedImages, PasswordInputsWithPreventedPaste, ResponseCompression, TagsBlockingFirstPaint, MetaDescription, FontSize, CrawlableLinks, MetaRobots, Hreflang, EmbeddedContent, Canonical, RobotsTxt 27ms
  status Abrufen von in-page: Skripte 2s
  status Abrufen von in-page: CSSUsage 0ms
  status Abrufen von in-page: Ansichtsfenster 0ms
  status Abrufen von in-page: ViewportDimensions 0ms
  status Abrufen von in-page: ThemeColor 0ms
  status Abruf von in-page: Manifest 0ms
  status Abrufen von in-page: RuntimeExceptions 0ms
  status Abrufen von in-page: ChromeConsoleMessages 0ms
  status Abrufen von in-page: ImageUsage 0ms
  status Abrufen der Seite: Barrierefreiheit 0ms
  status Abrufen von in-page: LinkElemente 0ms
  status Abrufen von in-page: AnchorsWithNoRelNoopener 1ms
  status Abrufen von in-page: AppCacheManifest 0ms
  status Abrufen von in-page: Doctype 0ms
  status Abrufen der Seite: DOMStats 0ms
  status Abrufen von Seiteninfos: JSLibraries 0ms
  status Abrufen von in-page: OptimizedImages 0ms
  status Abrufen von in-page: PasswordInputsWithPreventedPaste 0ms
  status Abrufen der Seite: Antwortkomprimierung 0ms
  status Abrufen von in-page: TagsBlockingFirstPaint 0ms
  status Abrufen von in-page: MetaDescription 0ms
  status Abruf von in-page: FontSize 0ms
  status Abrufen von in-page: CrawlableLinks 0ms
  status Abrufen von in-page: MetaRobots 0ms
  status Abrufen von in-page: Hreflang 0ms
  status Abrufen von Seiteninhalten: EingebetteterInhalt 0ms
  status Abrufen von Seiteninhalten: Kanonisch 0ms
  status Abrufen von in-page: RobotsTxt 0ms
  status Abrufen von Trace 1ms
  status Abrufen von devtoolsLog & Netzwerkaufzeichnungen 110ms
  status Abrufen von: Skripte 27ms
  status Abruf von: CSSUsage 53ms
  status Abrufen: Ansichtsfenster 192ms
  status Abrufen: ViewportDimensions 5ms
  status Abrufen: ThemeColor 13ms
  status Abrufen: Manifest 2ms
  status Abrufen: RuntimeExceptions 295ms
  status Abrufen: ChromeConsoleMessages 1ms
  status Abrufen: ImageUsage 2ms
  status Abrufen: Barrierefreiheit 22ms
  status Abrufen: LinkElemente 526ms
  status Abrufen: AnchorsWithNoRelNoopener 10ms
  status Abrufen: AppCacheManifest 6ms
  status Abrufen: Doctype 20ms
  status Abrufen: DOMStats 4ms
  status Abrufen: JSLibraries 50ms
  status Abrufen: OptimizedImages 25ms
  status Abrufen: PasswordInputsWithPreventedPaste 234ms
  status Abrufen: Antwortkomprimierung 3ms
  status Abrufen: TagsBlockingFirstPaint 7ms
  status Abrufen: MetaBeschreibung 6ms
  status Abrufen: FontSize 7ms
  status Abrufen: CrawlableLinks 245ms
  status Abrufe: MetaRobots 6ms
  status Abrufen: Hreflang 2ms
  status Abrufen: EingebetteterInhalt 2ms
  status Abrufen: Kanonisch 3ms
  status Abrufen: RobotsTxt 6ms
  status Zurücksetzen des Status mit about:blank 19ms
  status Seite laden & warten auf onload ServiceWorker, Offline, StartUrl 24ms
  status Abruf von in-page: ServiceWorker 59ms
  status Abrufen von in-page: Offline 0ms
  status Abrufen der Seite: StartUrl 1ms
  status Abrufen von devtoolsLog & Netzwerkaufzeichnungen 0ms
  status Abrufen: ServiceWorker 2ms
  status Abrufen: Offline 1ms
  status Abrufen: StartUrl 1ms
  status Zurücksetzen des Status mit about:blank 5ms
  status Seite laden & warten auf onload HTTPRedirect, HTMLWithoutJavaScript 48ms
  status Abruf von in-page: HTTPRedirect 260ms
  status Abruf von in-page: HTMLWithoutJavaScript 0ms
  status Abrufen von devtoolsLog & Netzwerkaufzeichnungen 0ms
  status Abrufen: HTTPRedirect 7ms
  status Abruf von: HTMLWithoutJavaScript 12ms
  status Trennen der Verbindung zum Browser...  7ms
  status Analysieren und Ausführen von Audits...  6ms
  status Auswerten: Verwendet HTTPS 3ms
  status Auswerten: Leitet den HTTP-Verkehr auf HTTPS um 24ms
  status Auswerten: Registriert einen Service Worker, der page und start_url kontrolliert 1ms
  status Auswertend: Die aktuelle Seite antwortet mit einem 200, wenn sie offline ist 0ms
  status Auswertend: Hat ein `<meta name="viewport">` Tag mit `width` oder `initial-scale` 1ms
  status Auswerten: Enthält einige Inhalte, wenn JavaScript nicht verfügbar ist 1ms
  status Evaluating: Erstes Contentful Bild 6ms
  status Evaluating: Erstes aussagekräftiges Bild 54ms
  status Auswerten: Das Laden der Seite ist in mobilen Netzwerken schnell genug 10ms
  status Auswerten: Geschwindigkeitsindex 33ms
  status Auswerten: Screenshot-Miniaturansichten 529ms
  status Auswerten: Endgültiger Screenshot 287ms
  status Auswerten: Geschätzte Eingabe-Latenzzeit 2ms
  status Auswerten: Keine Browserfehler auf der Konsole protokolliert 16ms
  status Auswerten: Server-Antwortzeiten sind niedrig (TTFB) 1ms
  status Auswerten: Erste CPU im Leerlauf 1ms
  status Auswerten: Zeit bis zur Interaktivität 30ms
  status Auswerten: Benutzer Timing markiert und misst 0ms
  status Auswerten: Minimierung der Tiefe von kritischen Anfragen 2ms
  status Auswerten: Vermeiden Sie mehrere Seitenumleitungen 3ms
  status Auswerten: Web-App-Manifest erfüllt die Anforderungen an die Installierbarkeit 2ms
  status Auswerten: Für einen benutzerdefinierten Begrüßungsbildschirm konfiguriert 1ms
  status Auswerten: Legt eine Farbe für die Adressleiste fest 0ms
  status Auswerten: Der Inhalt hat die richtige Größe für das Ansichtsfenster 1ms
  status Auswerten: Zeigt Bilder mit korrektem Seitenverhältnis an 0ms
  status Auswerten: Vermeidet veraltete APIs 1ms
  status Auswerten: Minimiert die Arbeit des Haupt-Threads 0ms
  status Auswerten: JavaScript-Ausführungszeit 11ms
  status Auswerten: Schlüsselanfragen vorladen 3ms
  status Auswerten: Vorverbindung zu erforderlichen Ursprüngen 2ms
  status Auswerten: Der gesamte Text bleibt beim Laden von Webfont sichtbar 2ms
  status Auswerten: Netzwerkanfragen 1ms
  status Auswerten: Metriken 2ms
  status Evaluating: start_url antwortet mit einem 200 wenn offline 1ms
  status Auswerten: Website funktioniert browserübergreifend 1ms
  status Auswerten: Seitenübergänge fühlen sich nicht an, als würden sie im Netzwerk blockieren 0ms
  status Auswerten: Jede Seite hat eine URL 0ms
  status Auswerten: die `[aria-*]` Attribute entsprechen ihren Rollen 1ms
  status Auswerten: `[role]`s haben alle erforderlichen `[aria-*]` Attribute 1ms
  status Auswerten: Elemente mit `[role]`, die bestimmte untergeordnete `[role]`s erfordern, sind vorhanden 0ms
  status Auswerten: `[role]`s sind in ihrem erforderlichen Elternelement enthalten 1ms
  status Auswerten: `[role]` Werte sind gültig 1ms
  status Evaluating: `[aria-*]` Attribute haben gültige Werte 0ms
  status Evaluating: `[aria-*]` Attribute sind gültig und nicht falsch geschrieben 1ms
  status Auswerten: `<audio>` Elemente enthalten ein `<track>` Element mit `[kind="captions"]` 1ms
  status Auswerten: Schaltflächen haben einen zugänglichen Namen 1ms
  status Auswerten: Die Seite enthält eine Überschrift, einen Link zum Überspringen oder einen Orientierungsbereich 1ms
  status Auswerten: Hintergrund- und Vordergrundfarben haben ein ausreichendes Kontrastverhältnis 1ms
  status Auswerten: die `<dl>`'s enthalten nur richtig geordnete `<dt>` und `<dd>` Gruppen, `<script>` oder `<template>` Elemente.  1ms
  status Auswerten: Elemente der Definitionsliste sind in `<dl>`-Elemente eingeschlossen 0ms
  status Auswerten: Das Dokument hat ein `<title>`-Element 1ms
  status Evaluating: die `[id]` Attribute auf der Seite sind eindeutig 1ms
  status Auswerten: `<frame>` oder `<iframe>` Elemente haben einen Titel 1ms
  status Auswerten: das `<html>` Element hat ein `[lang]` Attribut 0ms
  status Auswerten: das Element `<html>` hat einen gültigen Wert für sein Attribut `[lang]` 1ms
  status Auswerten: Bildelemente haben `[alt]` Attribute 1ms
  status Evaluating: `<input type="image">` Elemente haben `[alt]` Text 1ms
  status Evaluating: Formularelemente haben zugehörige Labels 0ms
  status Evaluating: Präsentations-<table>`-Elemente vermeiden die Verwendung von `<th>`, `<caption>` oder dem `[summary]`-Attribut.  1ms
  status Auswerten: Links haben einen erkennbaren Namen 1ms
  status Auswerten: Listen enthalten nur `<li>` Elemente und Skript unterstützende Elemente (`<script>` und `<template>`).  1ms
  status Auswerten: Listenelemente (`<li>`) sind in `<ul>` oder `<ol>` übergeordneten Elementen enthalten 1ms
  status Auswerten: Das Dokument verwendet kein `<meta http-equiv="refresh">` 0ms
  status Auswerten: `[user-scalable="no"]` wird nicht im `<meta name="viewport">` Element verwendet und das `[maximum-scale]` Attribut ist nicht kleiner als 5. 1ms
  status Auswerten: `<Objekt>` Elemente haben `[alt]` Text 1ms
  status Auswerten: Kein Element hat einen `[tabindex]` Wert größer als 0 1ms
  status Auswerten: Zellen in einem `<table>`-Element, die das `[headers]`-Attribut verwenden, beziehen sich nur auf andere Zellen der gleichen Tabelle.  1ms
  status Auswerten: `<th>` Elemente und Elemente mit `[role="columnheader"/"rowheader"]` haben Datenzellen, die sie beschreiben.  0ms
  status Auswerten: `[lang]` Attribute haben einen gültigen Wert 1ms
  status Auswerten: `<video>` Elemente enthalten ein `<track>` Element mit `[kind="captions"]` 1ms
  status Auswerten: `<Video>`-Elemente enthalten ein `<Track>`-Element mit `[kind="description"]` 1ms
  status Evaluating: `[accesskey]` Werte sind eindeutig 1ms
  status Auswerten: Benutzerdefinierte Steuerelemente haben zugehörige Bezeichnungen 0ms
  status Evaluating: Benutzerdefinierte Steuerelemente haben ARIA-Rollen 1ms
  status Auswerten: Der Benutzerfokus ist nicht versehentlich in einer Region gefangen 0ms
  status Auswerten: Interaktive Steuerelemente sind über die Tastatur fokussierbar 0ms
  status Auswerten: Überschriften überspringen keine Ebenen 0ms
  status Auswerten: Interaktive Elemente zeigen ihren Zweck und Zustand an 1ms
  status Auswerten: Die Seite hat eine logische Tabulatorreihenfolge 0ms
  status Auswerten: Der Fokus des Benutzers wird auf neue Inhalte auf der Seite gelenkt 1ms
  status Auswerten: Inhalte außerhalb des Bildschirms sind vor Hilfsmitteln verborgen 0ms
  status Auswerten: HTML5 Landmark-Elemente werden verwendet, um die Navigation zu verbessern 0ms
  status Auswerten: Die visuelle Anordnung auf der Seite folgt der DOM-Reihenfolge 0ms
  status Auswerten: Effiziente Cache-Richtlinie für statische Assets 1ms
  status Auswerten: Vermeidet enorme Netzwerk-Payloads 3ms
  status Evaluating: Verschieben von Offscreen-Bildern 1ms
  status Evaluieren: Beseitigen Sie Rendering-blockierende Ressourcen 12ms
  status Evaluieren: CSS verkleinern 28ms
  status Auswerten: JavaScript verkleinern 64ms
  status Auswerten: Ungenutztes CSS zurückstellen 69ms
  status Auswerten: Bilder in Next-Gen-Formaten bereitstellen 12ms
  status Auswerten: Bilder effizienter kodieren 11ms
  status Auswerten: Textkomprimierung aktivieren 6ms
  status Auswerten: Bilder in der richtigen Größe anzeigen 6ms
  status Auswerten: Videoformate für animierte Inhalte verwenden 7ms
  status Auswerten: Vermeidet Anwendungs-Cache 11ms
  status Auswerten: Seite hat den HTML-Doctype 0ms
  status Auswerten: Vermeidet eine übermäßige DOM-Größe 1ms
  status Auswerten: Links zu herkunftsübergreifenden Zielen sind sicher 2ms
  status Auswertend: Vermeidet die Abfrage der Geolocation-Erlaubnis beim Laden der Seite 1ms
  status Auswertend: Vermeidet `document.write()` 0ms
  status Auswertend: Vermeidet Front-End JavaScript-Bibliotheken mit bekannten Sicherheitslücken 0ms
  status Auswerten: Erkannte JavaScript-Bibliotheken 9ms
  status Auswerten: Vermeidet die Abfrage der Benachrichtigungserlaubnis beim Laden der Seite 1ms
  status Auswerten: Erlaubt Benutzern das Einfügen in Passwortfelder 0ms
  status Auswerten: Verwendet HTTP/2 für seine eigenen Ressourcen 0ms
  status Evaluating: Verwendet passive Listener, um die Leistung beim Scrollen zu verbessern 1ms
  status Evaluating: Das Dokument hat eine Meta-Beschreibung 0ms
  status Auswertend: Seite hat einen erfolgreichen HTTP-Statuscode 1ms
  status Auswerten: Das Dokument verwendet lesbare Schriftgrößen 5ms
  status Auswerten: Links haben beschreibenden Text 1ms
  status Auswerten: Die Seite ist nicht für die Indizierung gesperrt 1ms
  status Auswerten: robots.txt ist gültig 2ms
  status Auswerten: Das Dokument hat einen gültigen `hreflang` 1ms
  status Auswerten: Das Dokument vermeidet Plugins 1ms
  status Auswerten: Das Dokument hat ein gültiges `rel=canonical` 0ms
  status Auswerten: Seite ist mobilfreundlich 1ms
  status Auswerten: Strukturierte Daten sind gültig 0ms
  status Generierung der Ergebnisse...  0ms
  ChromeLauncher Töten der Chrome-Instanz 7098 59ms
  Drucker-HTML-Ausgabe nach /home/chandan/geekflare.com/de_2019-01-20_19-29-35.report.html geschrieben 46ms
  CLI-Protip: Führen Sie lighthouse mit `--view` aus, um den HTML-Bericht sofort in Ihrem Browser zu öffnen 1ms

In der vorletzten Zeile können Sie sehen, dass der Pfad zum Bericht ausgegeben wird. Standardmäßig wird ein Bericht im HTML-Format erstellt, den Sie entweder auf Ihren PC herunterladen oder über einen Webserver abrufen können.

Was aber, wenn Sie einen Bericht im JSON-Format erstellen müssen?

Das ist wie folgt machbar.

lighthouse URL --chrome-flags="--headless" --output json --output-path URL.json

Wenn Sie Lighthouse CLI verwenden, haben Sie die volle Kontrolle, um es so zu verwenden, wie Sie es wünschen. Ich empfehle Ihnen dringend, das GitHub-Repository zu besuchen, um mehr über die Verwendung von CLI oder programmatisch zu erfahren.

Fazit

Google Lighthouse scheint ein vielversprechendes Tool zu sein, um einen Kontinuitätstest zur Verbesserung der Website-Performance und der Benutzerfreundlichkeit durchzuführen. Wenn Sie WordPress verwenden und Ihre Website schneller laden möchten, sollten Sie sich Rocket ansehen.