Google Lighthouse ist ein Webseiten-Analysetool, das anhand von verschiedenen KPIs die Geschwindigkeit und Qualität einer Homepage bewertet. Darüber hinaus gibt es nützliche Hinweise, wie diese Kennzahlen verbessert werden können.

Kürzer Rückblick zum Testen mit Google Lighthouse

In unserer Serie zum Testen mit Google Lighthouse hatten wir uns zunächst angeschaut, in welchen Kategorien Google Lighthouse seinen Lighthouse Score berechnet, welche Faktoren sich dahinter verbergen und was diese für die Qualität und Geschwindigkeit der Homepage konkret bedeuten.

Der zweite Teil beschäftigte sich mit den verschiedenen Umgebungen (Browser, Seiteninspektor, Node.JS Konsolen), in denen Google Lighthouse verfügbar ist, wie Ihr diese findet und zum Testen verwendet. Dabei wurde der letzte Teil des Google Lighthouse Scores, nämlich Progressive Web Apps, bisher eher außer Acht gelassen. Das holen wir in diesem Beitrag nach.

Was ist eine Progressive Web App?

Einfach gesagt ist eine Progressive Web App (PWA) eine Homepage, die auf Mobilgeräten so dargestellt wird, dass sie wie eine Native App funktioniert. Für NutzerInnen gibt es also keine oder kaum Unterschiede zwischen der Bedienung der Homepage als PWA-Version im Browser ihres Smartphones oder der Nutzung einer nativen App.

Technisch gesehen ist dies aber mit viel Aufwand verbunden, denn die verschiedenen Informationen und Unterseiten müssen als eine Oberfläche erscheinen und unter der Hauptseite reibungslos neugeladen werden. Hinzukommen einzelne Prozesse wie Einkaufswagen, Accountmanagement, Bezahlprozess, Produktkataloge und mehr.

Vorteil von PWAs: Progressive Web Apps haben den großen Vorteil, dass sie, sobald abgerufen und installiert, auch offline zur Verfügung stehen und Inhalte aus dem Cache (zum Beispiel Bilder oder Artikel) wiedergeben können.

Testen von Progressive Web Apps mit Google Lighthouse

Wenn Ihr Eure Progressive Web App mit Google Lighthouse testet, werdet Ihr wahrscheinlich zunächst verwirrt sein, warum kein Score angezeigt wird – diesen gibt es nämlich nicht. Stattdessen werden lediglich verschiedene Faktoren angezeigt, die verbessert oder eingerichtet werden sollten, damit die Seite als Progressive Web App gilt. Google Lighthouse hat nämlich einen eigene Anforderungsliste, um zu definieren, was überhaupt eine Progressive Web App ist.

Es zeigt dementsprechend fehlende oder vorhandene Kriterien an. Erfüllt eine mobile Homepage im Browser all diese, dann handelt es sich nach der Definition von Google Lighthouse um eine Progressive Web App. Diese Bedingungen können aus verschiedenen Gründen oft nicht erfüllt werden. Anstelle eines Scores gibt es eine „Auszeichnung“, den Google Lighthouse PWA Badge, wenn alle diese Bedingungen erfüllt sind.

Wichtig zu wissen: Service Worker und Manifest

Bevor wir uns die einzelnen Kriterien anschauen, gilt es noch kurz nachzuvollziehen, was Lighthouse meint, wenn es Service Worker, start_url und Manifest nennt.

Der Service Worker ist ein Proxy-JavaScript, das als „Man in the Middle“ zwischen Server und Webbrowser agiert. Es wird durch den Browser abgerufen und installiert. Einmal installiert, kann es Daten aus dem Cache unabhängig vom Browser speichern und so die Funktionalität einer PWA auch ohne Internetverbindung gewährleisten, Push-Mitteilungen senden, Updates unabhängig vom Browser empfangen oder Daten im Hintergrund synchronisieren.

Das Manifest ist ein JSON-File, das dem Browser erklärt, wie sich die PWA nach Installation verhalten soll, welchen Zweck Sie hat und auf welche Daten sie zurückgreift, an welcher Stelle sie eingelesen werden (DOM). Einen genaueren Überblick über Manifeste gibt es hier.

Durch die start_url Variable wird bestimmt welches die URL der Hauptseite ist. Es legt also den Ursprung fest, unter welcher URL der „Bauplan“ liegt, der für den Endnutzer später als „App-Screen“ erscheint. In diese fixe Struktur werden die HTML-Daten der Unterseiten der Homepage in „App-Form“ geparsed.

Faktoren für die Progressive Web App in Google Lighthouse

Google Lighthouse hat die folgenden Kategorien und Faktoren:

  1. „Fast and reliable“ (schnell und zuverlässig)

Hierunter fällt die vorhandene SSL-Zertifizierung für jede Seite und Unterseite sowie die „HTTP 200“-Response – also eine positive Antwort – wenn der User offline ist. Weiterhin überprüft Lighthouse ob ein start_url für die Startseite im Service Worker (korrekt) hinterlegt ist.

  1. „Installable“ (installierbar)

    Unter dieser Kategorie untersucht Lighthouse, ob die Seite HTTPS nutzt und ob ein Service Provider die Kontrolle über die Seite und die start_url hat.

  2. „PWA optimized“ (optimiert für Progressive Web App).

    Der erste Faktor ist der Splash Screen. Für gewöhnlich sieht ein User beim Laden der PWA eine Blank Page (eine leere weiße Seite). Der Splash Screen kann mit einem Bild befüllt werden, der diese Wartezeit füllt, zum Beispiel mit dem Logo des Unternehmens.

    Weiterhin kann im Manifest ein Color Theme für die Browser-Adressen-Zeile definiert werden, welches das Color Theme der PWA aufnimmt. Damit wird das Browser Fenster noch besser dem Erscheinungsbild der App angepasst.

    Die Content Size, also die Dimensionen der vom Service Worker gelieferten Inhalte, muss der Größe des View Ports Der Viewport ist der Teil des Browsers, der den Content anzeigt.

    Zuletzt werden durch das Manifest auch Icons definiert und wie sich Elemente mit Icons verhalten sollen, wenn diese nicht heruntergeladen wurden. Weiterführende Informationen und ein Gesamtüberblick zur Kategorie „installable“ findet Ihr auf dieser Seite.

Fazit: Die PWA testen und den Lighthouse PWA Badge erhalten

Den Google Lighthouse PWA Badge zu erhalten, ist eine komplexe Aufgabe, die von Entwickler*innen und Tester*innen gemeinsam angegangen werde sollte. Dabei ist natürlich zu beachten, dass es nicht immer ganz einfach ist, alle Kriterien auch zu realisieren. Wenn einige der Kriterien erfüllt sind, ist das schon ein guter Anfang. Das macht die Seite bereits relevanter für die Google-Suche und bietet Usern eine nahtlose Erfahrung in der Nutzung der PWA.

Bei Appmatics beraten wir Euch dazu wie Ihr zum Lighthouse PWA Badge kommt oder welche Kriterien ihr auf jeden Fall erfüllen sollet. Darüber testen wir Eure Homepage als Desktopversion und in Ihrer Form als Progressive Web App mit echten Menschen auf einer Vielzahl von Geräten und Betriebssystemen. Wendet Euch gerne an uns.