Lighthouse: 100 Punkte in Performance und Accessibility?

Einige Browser verfügen über integrierte Werkzeuge für Entwickler*innen. Vor allem Mozilla Firefox und Google Chrome stechen hier hervor – die Werkzeuge sind sehr reich an Funktionen, mit der Websites untersucht und analysiert werden können. In den beiden genannten Browsern sind die Werkzeuge unter anderem mit der Tastenkombination [STRG] + [⇧] + [I] unter Microsoft Windows beziehungsweise [⌘] + [⌥] + [I] unter Apple OS X zugänglich. Die Konsole, der Debugger oder Netzwerk- und Laufzeitanalyse setzen einige Fachkenntnis voraus.

Mit Lighthouse hat der Chrome-Browser allerdings ein Werkzeug, das sicher auch wegen seiner Anschaulichkeit und Vergleichbarkeit besonders populär ist. Themes für Content-Management-Systeme werben mit hohen »PageSpeed«, Webdesigner*innen bieten die gezielte Optimierung an, Webhosting-Unternehmen betonen damit im Marketing ihre Leistungsfähigkeit – aber was sagen die Werte aus Google Lighthouse überhaupt?

Lighthouse analysiert den Quelltext der Website und simuliert dessen Ausführungen unter verschiedenen Ausgabebedingungen. Dafür nutzt das Werkzeug einige Kriterien, die in »Performance« (Leistung), »Accessibility« (Barrierefreiheit), »Best Practices« (empfohlene Vorgehensweisen) und »SEO« (Suchmaschinenoptimierung) kategorisiert sind. Ermittelt wird dabei für jede Kategorie ein Wert zwischen 0 und 100: Im Bereich von 0 bis 49 Punkten gilt die Website als durchgefallen, 50 bis 89 Punkte gelten als durchschnittlich und 90 bis 100 Punkte lobt Google mit dem Prädikat »gut«. 100 Punkte sind folglich der Höchstwert.

Weil sich die Bedingungen zwischen Desktop-PC und mobilen Geräten unterscheiden, kann auch Lighthouse das entsprechend berücksichtigen. Die Kriterien für mobile Geräte sind eher strenger, weil die Website hierfür beispielsweise auch auf kleinen Bildschirmen und mit schlechten Bandbreiten funktionieren muss. Aber gerade deshalb ist es sinnvoll, sich bei der Optimierung auf die Lighthouse-Werte für mobile Geräte zu konzentrieren.

Die Kriterien sind umfassend und werden beständig weiterentwickelt. Vor allem die Performance wurde in letzten Jahren um verschiedene Metriken erweitert, sodass Lighthouse heute ein sehr umfängliches Bild von der Leistung abgibt:

• First Contentful Paint (FCP): Der FCP ist Zeitpunkt, bis ein zum ersten Mal ein Element im Browser dargestellt wird.
• Speed Index: Entgegen der vielleicht ersten Vorstellung gibt der Speed Index nicht die eindimensionale Ladezeit an, sondern offenbart, wie früh Elemente dargestellt werden können und bezieht sich dabei auf die Ladereihenfolge.
• Largest Contentful Paint (LCP): Der LCP beschreibt die Zeit, die benötigt wird, bis das größte Element im sogenannten »Viewport«, also innerhalb des sichtbaren Bereichs, dargestellt werden kann.
• Time to Interactive (TTI): Die TTI markiert den Zeitpunkt, an dem die Website fertig dargestellt und bereit zur Interaktion ist.
• Total Blocking Time (TBT): Der TBT misst die Gesamtzeit, in der blockiert wurde, dass Anwender*innen mit der Website interagieren.
• Cumulative Layout Shift (CLS): Der CLS gibt, wie sich das Layout der Website während des Ladens oder unmittelbar danach verändert. Was abstrakt klingt, ist sicher vielen Menschen schon einmal negativ aufgestoßen: Schon während die Webseite betrachtet wird, ploppt auf einmal ein Dialog-Fenster auf, das die Sicht auf den Inhalt versperrt oder es schiebt sich weiterer Inhalt dazwischen, weshalb man beim Lesen schnell den Faden verliert.

Sinnvoll sind die Werte aus Google Lighthouse auch zum direkten Vergleich zwischen Themes oder der Website vor und nach einer Optimierung. Es sollte jedoch auch darauf geachtet werden, dass die Inhalte der geprüften Website auch vergleichbar sind. Ich habe kürzlich einen Webhoster gesehen, der mit einer praktisch leeren Demo-Seite und ihrem Performance-Wert 100 die Leistungsfähigkeit seiner Server und Anbindung unterstreichen wollte. Aus technischer Sicht ist das eher wenig aussagekräftig bis irreführend.

Um es kurz zu machen: So einfach ist das nicht. Kein automatisches Werkzeug kann die Barrierefreiheit einer Website zuverlässig prüfen. Der Schwerpunkt dieser Accessibility-Tests liegt auf der technischen Ausführung. So können fehlende Attribute für alternativ-beschreibenden Text für Bilder oder fehlende semantische Elemente schnell ausfindig gemacht werden. Ohne Zweifel sind dies aussagekräftige Indikatoren für die Barrierefreiheit. Aber um die Gliederung oder Bedienbarkeit tiefer gehend zu bewerten, fehlt automatischen Tests ein kontextuelles Verständnis. Unter anderem diese Checkliste für barrierefreies Webdesign gibt einen Ausblick darüber, welche Kriterien für eine Konformität mit den Web Content Accessibility Guidelines (WCAG) ebenso prüfbar und ebenso bedeutsam sind.

Der Gedanke ist naheliegend, dass die Ergebnisse aus dem Google-eigenen Tool Lighthouse in den Algorithmus für die Platzierung auf den Suchergebnisseiten (SERPs) einfließen. Mit genauen Aussagen über den Algorithmus hält sich Google eher zurück, aber man kann sicher davon ausgehen, die Werte keine direkte Auswirkung auf die Platzierung haben. Viele Kriterien dahinter sind aber sehr wohl ausschlaggebend für eine gute Positionierung: So braucht jede Website für eine gute Platzierung eine Meta-Beschreibung, einen validen Canonical-Tag, indexierbare Links und viele andere Elemente. Langsame Webseiten werden wiederum im Ranking abgestraft. Darauf wird die Webseite mit Google Lighthouse beispielsweise auch geprüft. Hinzukommt, dass eine barrierefreie Webseite von Suchmaschinen auch besser verstanden werden kann, weil die »Crawler« von Google & Co. die Webseite ähnlich wie Screenreader oder andere assistive Technologien lesen. Aber selbst ein Wert um 100 Punkte lässt viele Kriterien für eine erfolgreiche Suchmaschinenoptimierung, beispielsweise zur sinnhaften Verwendung von Schlüsselwörtern, außer Acht.

Google Lighthouse ist ein fantastisches Werkzeug des Chrome-Browsers. Es zeigt schnell und verständlich Optimierungspotenzial auf und kann auch zum Vergleich dienen. »Echte« Barrierefreiheit und Suchmaschinenoptimierung ist allerdings weitaus komplexer, als mit vorwiegend technischer Kriterien dargestellt werden könnte. Das sollte bei der Optimierung beachtet werden.

Und ein kleiner Hinweis: Die Startseite von barrierefreies.design hat tatsächlich 100 Punkte in allen Kategorien für Desktops und mobile Geräte erreicht (Stand 23. Juni 2021). Ich betrachte das aber als Momentaufnahme – sobald an den Stellschrauben im Lighthouse-Werkzeug gedreht wird, kann sich das auch wieder ändern.