© Vik Y/Shutterstock.com
Google Lighthouse als Nachfolger von Google PageSpeed

Der Leuchtturm weist den Weg


Jahrelang haben Webentwickler den Google-PageSpeed-Score genutzt, um ihre Webseiten schneller und besser zu machen und ihren Chefs und anderen Verantwortlichen von ihren Fortschritten zu berichten. Das Ende des Jahres 2018 war auch das Ende des Scores. Google stoppte die Weiterentwicklung an PageSpeed. Glücklicherweise bieten sie aber ein neues, viel mächtigeres Tool an: Google Lighthouse.

Wer Google PageSpeed verwendet hat, weiß, dass es sich hierbei nicht um ein Tool handelt, das tatsächlich die Geschwindigkeit der Webseite misst. Es überprüft vielmehr technische Eigenschaften einer Seite, auf die man als Webentwickler achten sollte. So wurden zum Beispiel große Bilder oder zu geringe Cachezeiten bei statischen Elementen moniert. Ob die Seite dadurch langsam ist, wurde nicht bewertet. Vielmehr wurde das Potenzial aufgezeigt, das noch in der Seite steckt. Genauso ist es mit Google Lighthouse. Es ist ein Werkzeug, das HTML-Seiten auf technische Eigenschaften untersucht und Verbesserungsvorschläge macht. Diese beziehen sich dann auf die Bereiche Performance, Progressive Web Apps, SEO, Accessibility und Best Practices.

Google Lighthouse ist ein Open-Source-Projekt, an dem jeder mitentwickeln kann (siehe GitHub Repository [1]). Die Installation ist dabei denkbar einfach, da es sich in den meisten Fällen bereits auf dem Computer befindet; jeder aktuelle Chrome-Browser bringt Lighthouse mit. Zu finden ist es in der Entwicklerkonsole im Reiter Audits. Dort sieht man sofort den Leuchtturm, den sich das Projekt als Metapher zu eigen gemacht hat: „lighthouse: a tool containing a beacon light to warn or guide web developers“ [1].

Wer keinen Google-Browser nutzt, muss aber nicht auf die Audits verzichten. Google hat seinen alten Pa geSpeed Service so angepasst, dass er die Daten von Lighthouse generieren lässt [2], [3]. Lighthouse as a Service ist also bereits nutzbar. Das Entwicklerteam stellt ebenfalls ein sehr einfach zu verwendendes npm-Paket zur Verfügung, das auf jedem Rechner läuft. Dafür muss Node.js installiert sein. Der große Vorteil hierbei ist, dass man Lighthouse lokal laufen lassen und es somit in jegliche Continuous-Integration-Umgebungen eingebunden werden kann, um kontinuierlich die Frontend-Qualität seiner Webprojekte testen zu lassen. Dies war mit dem PageSpeed-Score erst möglich, wenn die Seite öffentlich erreichbar war.

Das Audittool rückt also noch einen Schritt näher an die Entwickler und deren Workflows heran. Ursprünglich wurde Lighthouse vom Google-Team für Progressive Web Apps entwickelt, um Entwicklern Richtwerte/-linien zu geben, welche Kriterien eine Webseite mindestens erfüllen muss, um sich eine vollwertige PWA nennen zu dürfen. Da sich allerdings viele der Kriterien mit Themenfeldern wie Performance, Accessibility und Best Practices überschneiden, wurde Lighthouse recht schnell zu einem allumfassenden Allestester.

Egal mit welcher der drei Möglichen man arbeitet, um Lighthouse Reports zu generieren, ist es wichtig zu verstehen, dass eine Bewertung besonders im Performancebereich immer nur ein Richtwert ist, der stark variieren kann. Viel zu viele äußere Einflüsse existieren, wenn man im Web unterwegs ist. So kann eine Webseite in dem einen Moment bereits nach einer Sekunde geladen sein, der nächste Aufruf aber drei Sekunden dauern. Aus diesem Grund ist es sinnvoll, die Audits häufiger auszuführen, um ein Gefühl für den Durchschnitt zu bekommen.

Es ist wichtig zu erwähnen, dass Lighthouse nicht nur für Standarddesktopseiten einzusetzen ist. Es kann entschieden werden, ob Desktop- oder Mobile-Werte analysiert werden sollen, zusätzlich kann eine nicht optimale Datenverbindung (Throttling) simuliert werden. Es wird also auch in die Bewertung einbezogen, wie sich eine Webseite unterwegs auf einem Handy verhält.

Inhaltlich konzentriert sich Lighthouse auf fünf Bereiche (Abb. 1), die in diesem Artikel genauer beschrieben werden. Jeder dieser Bereiche wird im Tool einzeln und autark behandelt [4].

langner_gregory_leuchtturm_1.tif_fmt1.jpgAbb. 1: Die fünf Kategorien in Lighthouse: Performance, PWA, Accessibility, Best Practices, SEO

Performance

Wenn man vor zwei oder drei Jahren von Performance gesprochen hat, dann waren zwei Metriken immer relevant: „Time to first Byte“, also die Zeit, die es dauert, bis der Server eine Antwort liefert, und „Time to load“, also die Zeit, die der Browser braucht, bis er die Seite als geladen ansieht und den Lade-Spinner aus dem Tab entfernt. Wie sich herausgestellt hat, sind diese beiden Zeiten zwar nicht irrelevant, doch es gibt bessere Werte, um die Geschwindigkeit zu bewerten. Besonders, da es eine gefühlte Geschwindigkeit beim Nutzer gibt, die durch diese alten Metriken nicht gemessen wi...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang