Google Lighthouse ist ein Audit-Tool, das ursprünglich dazu entwickelt wurde Progressive Web Apps zu testen. Seit seiner Version 2.0 ist Lighthouse auch dazu in der Lage die Performance von gewöhnlichen Websites zu erheben. Seit 2018 und Version 3.0 kommt Lighthouse mit neuem Layout und einer bequemen Extension für Google Chrome. In unserer dreiteiligen Serie zu Google Lighthouse erklären wir Euch, was das Tool alles kann, angefangen mit den Metriken, die hinter dem Lighthouse Score stecken.
Der Google Lighthouse Score im Detail
Der Google Lighthouse Score wird in den vier Kategorien Performance, Accessibility, Best Practices und SEO errechnet, die jeweils verschiedene Metriken beinhalten. Es gibt dementsprechend nicht den einen Lighthouse Score sondern vier. Die Performance Eurer Website könnt Ihr hier oder mit Hilfe der Chrome DevTools testen.
Performance
Hier geht es vor allem um die Ladegeschwindigkeit der Seite. Schnelle Ladezeiten sind von größter Wichtigkeit, besonders weil die mobile Nutzung immer mehr zunimmt. Deshalb simuliert Lighthouse das Laden der Seite mit dem 3G-Netzwerk auf einem nicht aktuellen Smartphone. Der Score errechnet sich dann aus diesen Metriken:
1. Die Zeit, die benötigt wird, den ersten Inhalt zu laden – First Contentful Paint
2. Die Zeit, die benötigt wird, die Hauptinhalte der Seite zu laden – First Meaningful Paint
3. Die Zeit, die benötigt wird, damit alle visuellen Inhalte sichtbar zu werden – Speed Index
4. Die Zeit, die benötigt wird, bis die Seite tatsächlich interaktiv nutzbar wird – Time to Interactive
5. Die Zeit, die die Seite von Drittanbieter Cookies geblockt wird – Total Blocking Time
6. Die Zeit, die benötigt wird, bis der größte (Datengröße in KB) Inhalt geladen wurde – Largest Contentful Paint
Accessibility
Wie zugänglich eine Seite ist, wird durch den Accessibility Score angegeben. Dabei gibt Lighthouse aber auch gleich zu, dass es nicht alle Dinge berücksichtigen kann und manuelle Tests unerlässlich sind. Zur Accessibility gehören vor allem Struktur und bestimmte Informationen, die es Usern leichter machen die Seite zu verstehen, darunter:
1. Navigation: Sind Überschriften (H1, H2, H3, H4 …) in absteigender Reihenfolge geordnet oder wiederholen sich Überschriften-Formate in unverständlicher Weise?
Anmerkung: In der Theorie von Homepages sind Überschriften zum Gliedern von Inhalten, Über- und Unterkategorien gedacht. In der Praxis werden sie aber oft aufgrund ihrer visuellen Eigenschaften von Editoren ausgewählt.
2. Internationalization and Localization: Hier geht es schlichtweg um das Language-Attribut im HTML Dokument – [lang]. Mit diesem wird klar gemacht, um welche Sprache es sich bei der Homepage handelt.
3. Names and Labels: Besonders wichtig für Menschen mit Sehbeeinträchtigung sind die [alt]-Attribute bei Bildern, in denen zusammengefasst ist, was auf dem Bild zu sehen ist. Google Lighthouse überprüft allerdings nur, ob sie vorhanden sind, nicht ob Bildbeschreibung und Bild auch übereinstimmen.
4. Weitere Items, die manuell zu überprüfen sind. Hier gehört eine ganze Reihe von überprüfbaren Größen dazu, z.B. ob sich die Seite vollständig mit dem Keyboard steuern lässt, ob die DOM Order (Die Reihenfolge von Objekten im Code) auch der visuellen Reihenfolge entspricht, ob neue Inhalte auf der Seite auch als solche angezeigt werden und mehr. Besonderes Augenmerk sollten Entwickler auf die ARIA-Roles, bei Kontrollelementen wie Buttons, Checkboxen oder anderen legen, indem sie sie per HTML-Code „role=“ definieren.
Best Practices
Bei der Best Practice im Webdevelopment geht es vor allem darum, wie bestimmte Mechaniken so gestaltet werden, dass sie die Seite nicht angreifbar machen und fehlerhaften Code für Dritte uneinsehbar machen. Diese Kategorie umfasst also vor allem die Sicherheit der Seite. Hier werden zum Beispiel Sicherheitsrisiken in den Scripts analysiert und bewertet. Ist eine JavaScript Library zu alt oder sind bekannte Sicherheitsrisiken damit verknüpft, wirkt sich das negativ auf den Score aus. Weiterhin geht es bei diesem Score ums Error Log und die Nutzung des Browser Caches. Besonders für Webdeveloper ist diese Kategorie ausschlaggebend, um ihre Seite von anderen Seiten qualitativ abzuheben.
Search Engine Optimization (SEO)
Suchmaschinenoptimierung findet nicht nur, aber vor allem aufseiten der Inhalte statt. Hierzu gehören sogenannter Spaghetti-Code, überflüssiges CSS und die klare Strukturierung durch HTML-Tags (Headlines, Paragraphen, etc.) sowie die Beschreibung von Bildern durch [alt]-Attribute. Auf der Textebene geht es hier um Keywordabdeckung, Lesbarkeit der Texte, Satzstrukturen, Backlinks, interne Links und andere Faktoren. Da SEO ein ganz eigenes Thema ist, fassen wir uns an dieser Stelle etwas kürzer.
Die letzte Kategorie: PWA – Progressive Web App
Progressive Web Apps sind Onepager-Homepages, die mithilfe von JavaScript alle Interaktionen auf einer einzelnen Landingpage ermöglichen. Diese Seiten werden oft wie Mobile Apps gestaltet und ermöglichen einen einfachen Zugang zu Services eines Unternehmens ohne den Download einer App. Da es sich hier um ein Spezialthema handelt, kommen wir im dritten Teil unserer Google Lighthouse Serie noch einmal genauer hierzu.
Fazit: Vorteile von Google Lighthouse & Ressourcen für Tester
Google Lighthouse integriert die Page Speed Insights von Google und macht Metriken, die jahrelang eher schwer zu begreifen waren, leicht verständlich zugänglich. Das Beste an Google Lighthouse sind aber die konkreten Vorschläge, die Entwickler umsetzen können. Und wenn Ihr mal nicht wisst, welche Parameter wie funktionieren, leitet Euch Lighthouse per Link weiter zu web.dev wo alle Fragen in Tiefe beantwortet werden. Im nächsten Beitrag erklären wir Euch, wie Ihr Google Lighthouse am besten installiert und in Eure Developer Tools integriert.
Wenn Ihr noch Fragen habt, bleibt gespannt auf unsere nächsten zwei Beiträge. Wenn Ihr Eure Homepage auf Herz und Nieren testen wollt, dann stehen wir Euch ebenfalls wie immer mit Rat und Tat zur Seite. Bei uns testen wir all die Dinge manuell, die Google Lighthouse vorschlägt und mehr – wie immer mit echten Tester*innen auf echten Geräten, unterschiedlichen Screensizes, Betriebssystemen, Mobile oder Desktop.