Integrieren Sie Google Lighthouse in Ihre CICD-Pipeline

Möchten Sie die Qualität und höchstwahrscheinlich auch die Konversionsrate Ihrer Webseiten erhöhen? In diesem Blogbeitrag zeige ich Ihnen, wie Sie Google Lighthouse in eine CICD-Pipeline integrieren können. Lesen Sie weiter.

Wenn Sie eine Webanwendung entwickeln, sind Leistung und Zugänglichkeit wichtige Anforderungen. Da viele den gleichen Weg gegangen sind, gibt es bewährte Verfahren. Wenn Sie diese Webanwendung der Außenwelt zugänglich machen, müssen Sie auch SEO (Search Engine Optimization) berücksichtigen. Wenn Sie diese Anforderungen messen und bewerten würden, ist es umso wahrscheinlicher, dass die Anwendung in den Suchergebnissen von Google weiter oben erscheint(Quelle). Das bedeutet mehr Besucher und wahrscheinlich eine höhere Konversionsrate.
Es gibt ein Tool, das diese Anforderungen misst und bewertet: Lighthouse. Dieses Tool analysiert Ihre Webanwendung und gibt Ihnen wertvolles Feedback zur Verbesserung Ihres Scores.

Nach links schieben

Lighthouse wird oft in einem Post-Deployment-Szenario ausgeführt, um dann festzustellen, dass einige Anforderungen nicht erfüllt sind. Lighthouse ist im Kern ein Tool für Entwickler, d.h. es kann während der Entwicklung ausgeführt werden, um Probleme so schnell wie möglich anzugehen und zu lösen. Also noch bevor wir Google Lighthouse in eine CICD-Pipeline integrieren. Ein Beispiel für einen Lighthouse-Bericht sieht wie folgt aus:

Erste Schritte

In diesem Beispiel verwende ich Angular, um eine Webanwendung zu erstellen, die von Lighthouse angesteuert werden kann. Die Webanwendung wird mit Hilfe der Angular CLI erstellt. Dies ist eine persönliche Vorliebe; jede Webanwendung ist geeignet. Verwenden Sie das Framework/die Bibliothek, mit dem/der Sie sich am wohlsten fühlen. Wenn die Anwendung lokal gehostet wird, sieht sie wie folgt aus:

Wenn wir auf SEO klicken, zeigt uns Lighthouse Folgendes an:

Wenn wir auf den Link klicken, können wir die Lösung für dieses Problem sehen. Nachdem Sie Folgendes zur index.html hinzugefügt haben:

Der resultierende Bericht sieht folgendermaßen aus:

Überprüfen Sie Ihre Bereitstellungen

Die Überprüfung vor Ort ist eine ausgezeichnete Praxis und Sie können Probleme so schnell wie möglich beheben. Schauen wir uns an, was passiert, wenn wir die Anwendung auf einer entfernten URL bereitstellen und den Bericht erneut ausführen:

Die Leistungsbewertung ist unterschiedlich. Das liegt an den Unterschieden in den Hosting-Umgebungen der Anwendung. Es wäre sinnvoll, den Bericht auch für die bereitgestellte Umgebung zu prüfen. Angenommen, wir haben die folgende CICD-Pipeline:

Die Pipeline erstellt ein Artefakt und stellt es in einer Entwicklungsumgebung und in einer Testumgebung bereit. Beide Umgebungen haben eine unterschiedliche URL.
Wo wäre ein guter Ort, um den Bericht anzuzeigen? Es gibt viele Möglichkeiten und ich habe einige ausprobiert. Ich habe mich für Folgendes entschieden:

Bei dieser Lösung können wir die Ergebnisse aus der Entwicklungsumgebung anzeigen, nachdem unsere neueste Version bereitgestellt wurde. Wir können diese Ergebnisse dann mit den Ergebnissen der neuesten Version des Codes in der Testumgebung vergleichen. Wenn die Ergebnisse schlechter sind, beschließen wir, die weitere Bereitstellung in der Testumgebung zu stoppen. Als nächstes wollen wir uns ansehen, was für die Integration von Google Lighthouse in die CICD-Pipeline erforderlich ist.

YAML

Vollständiger YAML-Gist

Ich werde mich zu Demonstrationszwecken auf den SEO-Score konzentrieren. Die Lighthouse-Vergleichsstufe sieht folgendermaßen aus:

Ich werde den ersten Schritt auslassen. Ich erkläre dies in meinem anderen Blogbeitrag. Wir müssen Abhängigkeiten installieren, weil wir das Lighthouse-Knotenmodul aufrufen werden. Ich werde das später noch genauer erklären.
Lighthouse muss geräuschlos ausgeführt werden, um nur einen Wert auszugeben. Wenn wir nicht --silent hinzufügen, wird es zusätzliche Protokollierung ausgeben. Wir wollen eine saubere Zahl für den Vergleich. Wir speichern die Werte vorübergehend in einer dev- und test-Variablen.
Als nächstes führen wir einen Vergleich zwischen diesen beiden Variablen durch. Für den Vergleich verwenden wir den Befehl "node -e" (evaluate). Die Bash in Linux ist nicht in der Lage, zwei Dezimalzahlen (z.B. 0,8 und 0,9) ohne den Einsatz einer Bibliothek zu vergleichen. Mit console.error können wir unserer Pipeline signalisieren, dass ein stderr aufgetreten ist, falls das Ergebnis in der Testumgebung besser ist als in der Entwicklungsumgebung. Um die Pipeline anzuhalten, setzen wir failOnStderr auf true.

Leuchtturm-Code

Vollständiger Leuchtturm-Code Gist

Ich habe den folgenden Ausschnitt aus der Readme-Datei im Lighthouse-Repository auf Github verwendet:

Ich habe die Optionen wie folgt geändert:

Wenn wir die Option headless nicht angeben, zeigt der Agent während des Pipeline-Laufs den folgenden Fehler an:

Der Standardwert für emulatedFormFactor ist mobile, d.h. der Bericht wird für mobile Geräte ausgeführt:

Es wäre sinnvoll, den Leuchtturm mit einer URL aufzurufen, wie in der YAML-Datei zuvor gezeigt.

Die Funktion Aufrufen sieht wie folgt aus:

Da wir results.lhr verwenden, können wir direkt auf den SEO-Score zugreifen. Dadurch erhalten wir ein hohes Maß an Granularität. Der Befehl console.log gibt eine Ziffer aus, die für den Vergleich verwendet wird. Möglicherweise möchten Sie ein Objekt mit mehreren Eigenschaften zurückgeben, um auch Zugriff auf andere Bewertungen zu haben. Zuletzt fügen wir in der package.json im Abschnitt scripts den Befehl lighthouse hinzu:

Zusammengebunden

Lassen Sie uns sehen, was passiert, wenn wir ein Bild ohne Alt-Attribut in die Datei index.html einfügen:

Fazit

Google Lighthouse hilft Ihnen in hohem Maße bei der Analyse und Verbesserung der Qualität Ihrer Webseiten. Die ausführliche und umfassende Dokumentation macht die Verbesserung Ihrer Qualitätsergebnisse zu einem Kinderspiel. Darüber hinaus bietet es Entwicklern eine Vielzahl von Funktionen. Dies macht es einfach, Google Lighthouse in Ihre CICD-Pipeline zu integrieren. Sobald Sie die Integration abgeschlossen haben, können Sie jede beliebige Methode wählen, um die Qualität Ihrer Webseiten während der Bereitstellung Ihrer Webanwendung zu gewährleisten.

Ihre Meinung

Danke, dass Sie meinen Blogbeitrag gelesen haben. Wenn Sie glauben, dass etwas unklar oder falsch ist, lassen Sie es mich bitte wissen. Ich habe immer ein offenes Ohr für Feedback und bin bestrebt, meine Erklärungen und meinen Wissensaustausch zu verbessern.