Tipps und Tricks zu SEO

Tipps und Tricks zu SEO

LighthouseLighthouse ist ein Tool, mit dem man die Performance und die Nutzerfreundlichkeit von Progressive Web Apps testen kann. Aber auch herkömmliche Webseiten kann man damit einer genaueren Betrachtung unterziehen. Der größte Vorteil von Lighthouse gegenüber vielen anderen Tools für die Performancemessung liegt in den flexibel anpassbaren und damit realistischeren Testbedingungen.

Progressive Web Apps (PWAs) erfreuen sich einer zunehmenden Beliebtheit. PWAs sind Webseiten, die sich dynamisch wie Apps verhalten und ihre Funktionalität auf einer Seite konzentrieren. Das Laden von Inhalten und die Funktionsaufrufe werden per JavaScript durchgeführt. 

Um dem Verhalten einer installierten App möglichst nahe zu kommen, muss eine PWA über eine gute Performance verfügen und besonders nutzerfreundlich sein. All das lässt sich mit Hilfe eines neuen Tools testen, das bei Google entwickelt wurde: Lighthouse.

Das folgende Video zeigt die Präsentation von Lighthouse auf der Google I/O 2017:

 

Lighthouse: Präsentation auf der Google I/O 2017

 

Lighthouse steht als Open Source zur Verfügung. Man kann Lighthouse entweder als Chrome-Extension installieren oder über die Kommandozeile aufrufen. Letztere Variante bietet zusätzliche Konfigurationsmöglichkeiten. Dazu muss man allerdings zuvor node.js auf dem Rechner installieren.

Wenn man sich für die Chrome-Extension entscheidet, ruft man für eine Analyse im Browser einfach die URL der zu testenden Webseite auf und klickt danach auf das Icon der Extension. Danach prüft Lighthouse die verschiedenen Kriterien der App und stellt im Anschluss einen ausführlichen Bericht zur Verfügung:

 

Lighthouse: Testergebnis 

 

Lighthouse deckt die folgenden Bereiche ab:

  • Progressive Web App
  • Performance
  • Accessibility
  • Best Practices

Für jeden dieser Bereiche werden Detailinformationen angezeigt und Hinweise gegeben, wie die PWA bzw. die Webseite verbessert werden kann. Bezüglich der Performance wird unter anderem dargestellt, wie lange es gedauert hat, bis erste Elemente der Seite im Browser sichtbar waren und nach welcher Zeit die Seite genutzt werden konnte. Diese Werte sind für mobile Webseiten und Apps sehr wichtig, weil deren Nutzer besonders ungeduldig sind.

 

Lighthouse: Performance-Auswertung

 

Detaillierte Informationen gibt es für die Entwickler von PWAs. Hier gibt es beispielsweise Empfehlungen zum Einsatz von HTTPS, HTTP/2 oder den Gebrauch von Service Workern, um der PWA auch Offline-Funktionalität zu verleihen.

Lighthouse prüft außerdem die Nutzbarkeit der Webseite oder PWA für Menschen mit Beeinträchtigungen, so zum Beispiel, ob alle wichtigen Elemente wie Buttons oder Links ausreichend beschrieben sind und dass Bilder beispielsweise über ein Alt-Attribut verfügen.

Alle Resultate münden in jeweils einen Punktwert, der von Null bis Hundert reichen kann - eine solche Skala kennt man zum Beispiel aus Google PageSpeed Insights.

 

Nutzung von Lighthouse per Kommandozeile

Die wahre Flexibilität von Lighthouse offenbart sich, wenn man das Tool per Kommandozeile nutzt, denn dann steht eine Reihe von Optionen und Konfigurationsmöglichkeiten zur Verfügung, die es in der Chrome-Extension nicht gibt. Nachfolgend sind beispielhaft einige der wichtigsten Optionen aufgeführt:

  • --blocked-url-patterns: Damit lässt sich jeglicher Netzwerk-Traffic ausschließen, der an URLs mit einem bestimmten Muster geht.
  • --disable-device-emulation: Standardmäßig emuliert Lighthouse ein Nexus 5X. Das lässt sich mit dieser Option deaktivieren.
  • --disable-cpu-throttling: Wenn man diese Option aktiviert, gibt es keine Begrenzung der CPU-Performace im Test. Das ist zum Beispiel dann sinnvoll, wenn die Nutzer der Zielgruppe eher auf leistungsstarker Hardware unterwegs sind.
  • --disable-network-throttling: Wählt man diese Option, so wird sich das Tool so verhalten, als stehe eine (fast) unbegrenzte Netzwerkbandbreite zur Verfügung.

Folgender Befehl führt Lighthouse aus und deaktiviert die CPU- und die Netzwerkdrosselung. Gleichzeitig wird die Emulation von Nexus 5X unterbunden: https://example.com/seite1 --disable-device-emulation --disable-cpu-throttling --disable-network-throttling --view

 

Vorteile von Lighthouse

Lighthouse überzeugt vor allem durch seine Flexibilität. Je nach angestrebtem Szenario kann man das Tool konfigurieren, um verschiedene Nutzerumgebungen abzubilden. Zielt man zum Beispiel auf Nutzer mit schnellen Mobilgeräten und einer großzügigen Internetanbindung ab, so kann man die vorgegebenen Drosselungen deaktivieren. 

Darin liegt der größte Vorteil von Lighthouse, wenn man das Tool mit anderen Lösungen wie zum Beispiel webpagetest vergleicht. Webpagetest liefert für PWAs oftmals nur ein mäßiges Ergebnis, was daran liegt, dass die vom Tool zur Messung verwendeten Virtual Machines (VMs) recht lange zum Laden und Ausführen des JavaScript-Codes benötigen. Hier sind die Ergebnisse von Lighthouse deutlich aussagekräftiger.

Schön ist auch, dass das Tool sowohl von Einsteigern als auch von Fortgeschrittenen und Profis sinnvoll genutzt werden kann. Für Einsteiger wird vermutlich in den meisten Fällen die Chrome-Extension genügen. Entwickler können dagegen auf das Kommandozeilen-Tool zugreifen, das sich flexibel konfigurieren lässt.

Und nicht zuletzt kann man mit Lighthouse nicht nur PWAs, sondern auch normale Webseiten testen. Die Verbesserungsvorschläge hinsichtlich der Performance und der Accessibility sind nämlich nicht auf PWAs beschränkt.

 


Christian Kunz

Von Christian Kunz

SEO-Experte.
Sie benötigen Beratung für Ihre Webseite? Klicken Sie hier


Anzeige

SEO-Vergleich


Verwandte Beiträge

Das Laden von Elementen per Lazy Load im oberen Seitenbereich kann den LCP einer Webseite erhöhen. Deshalb warnt Google Lighthouse jetzt vor einer solchen Verwendung. Außerdem...

Google Lighthouse berücksichtigt bei den Empfehlungen zur Optimierung von Websites neben weiteren modernen Bildformaten jetzt auch AVIF, mit dem sich besonders große Einsparungen...

Google verwendet die Punktzahlen aus Lighthouse nicht für die Rankings in der Suche. Plugins, die eine Manipulation der Lighthouse-Ergebnisse ermöglichen, sind schon aus diesem...

SEO-Newsletter bestellen

Im monatlichen SEO-Newsletter erhaltet Ihr eine Übersicht der jeweils zehn wichtigsten SEO-Meldungen des Monats. Mit dem SEO-Newsletter bleibt Ihr auf dem Laufenden.
Ich bin mit den Nutzungsbedingungen einverstanden

Anzeige

rnkeffect

Premium-Partner (Anzeige)


Anzeigen sedo

SEO Agentur aus Darmstadt

SEO-Vergleich

Online Solutions Group


Onsite-Optimierung

Onsite-Optimierung

 

Sprecher auf

SEO- und Suchmaschinenblogs

SEO-FAQ

Bild © FM2 - Fotolia.com

SEO selber machen

SEO selber machen

Bekannt aus

Website Boosting


Internet World Business

SEO United


The SEM Post


Webselling

Jetzt vernetzen

SEO-Glossar

SEO-Glossar

 

SEO im Ohr, der Podcast von SEO Südwest: aktuell Folge

SEO-Beratung

Wir bringen gemeinsam Ihre Webseite in Google nach vorne. Profitieren Sie von jahrelanger SEO-Erfahrung.

Social Networks und RSS-Feed

Auszeichnungen

seo19 sieger sichtbarkeit 2020 200x200px