Mit Lighthouse Bot ein Leistungsbudget festlegen

Sie haben hart daran gearbeitet, Ihre Website schneller zu machen. Sorgen Sie jetzt dafür, dass sie auch so bleibt, indem Sie Leistungstests mit dem Lighthouse-Bot automatisieren.

Lighthouse stuft Ihre App in fünf Kategorien ein, darunter die Leistung. Sie können sich zwar vornehmen, bei jeder Codebearbeitung die Leistungsänderungen mit den DevTools oder der Lighthouse-Befehlszeile zu beobachten, aber das ist nicht zwingend erforderlich. Tools können die mühsamen Aufgaben für Sie erledigen. Travis CI ist ein hervorragender Dienst, mit dem jedes Mal, wenn Sie neuen Code per Push übertragen, automatisch Tests für Ihre App in der Cloud ausgeführt werden.

Lighthouse Bot ist in Travis CI eingebunden. Die Funktion für das Leistungsbudget sorgt dafür, dass Sie nicht versehentlich ungewollt die Leistung herabsetzen. Sie können Ihr Repository so konfigurieren, dass das Zusammenführen von Pull-Anfragen nicht möglich ist, wenn die Lighthouse-Werte unter den von Ihnen festgelegten Grenzwert fallen (z.B. < 96/100).

Fehlgeschlagene Lighthouse-Bot-Prüfungen auf GitHub
Lighthouse-Bot-Prüfungen auf GitHub

Auch wenn Sie die Leistung auf localhost testen können, schneidet Ihre Website auf Live-Servern häufig anders ab. Um ein realistischeres Bild zu erhalten, sollten Sie Ihre Website auf einem Staging-Server bereitstellen. Sie können jeden beliebigen Hostingdienst verwenden. In diesem Leitfaden wird Firebase Hosting vorgestellt.

1. Einrichtung

Diese einfache App hilft Ihnen, drei Zahlen zu sortieren.

Klonen Sie das Beispiel aus GitHub und fügen Sie es als Repository in Ihrem GitHub-Konto hinzu.

2. In Firebase bereitstellen

Sie benötigen zuerst ein Firebase-Konto. Erstellen Sie dann in der Firebase Console ein neues Projekt, indem Sie auf „Projekt hinzufügen“ klicken:

In Firebase bereitstellen

Sie benötigen die Firebase CLI, um die App bereitzustellen. Auch wenn Sie sie bereits installiert haben, sollten Sie sie regelmäßig mit diesem Befehl auf die neueste Version aktualisieren:

npm install -g firebase-tools

Führen Sie folgenden Befehl aus, um die Firebase CLI zu autorisieren:

firebase login

Initialisieren Sie jetzt das Projekt:

firebase init

Während der Einrichtung werden Ihnen auf der Konsole eine Reihe von Fragen gestellt:

  • Wählen Sie dann „Hosting“ aus.
  • Wählen Sie für das Firebase-Standardprojekt das Projekt aus, das Sie in der Firebase Console erstellt haben.
  • Geben Sie „public“ als öffentliches Verzeichnis ein.
  • Geben Sie „N“ (Nein) ein, um die App als Single-Page-Anwendung zu konfigurieren.

Dadurch wird im Stammverzeichnis Ihres Projektverzeichnisses eine firebase.json-Konfigurationsdatei erstellt.

Die Bereitstellung ist nun abgeschlossen. Ausführen:

firebase deploy

Im Handumdrehen haben Sie eine Live-App.

3. Travis einrichten

Sie müssen ein Konto bei Travis registrieren und dann die GitHub Apps-Integration im Bereich „Einstellungen“ Ihres Profils aktivieren.

GitHub Apps-Integration in Travis CI

Sobald Sie ein Konto haben

Rufen Sie unter Ihrem Profil die Einstellungen auf, klicken Sie auf die Schaltfläche „Konto synchronisieren“ und prüfen Sie, ob Ihr Projekt-Repository bei Travis aufgeführt ist.

Für die Continuous Integration benötigen Sie zwei Dinge:

  1. Eine .travis.yml-Datei im Stammverzeichnis
  2. Einen Build durch einen regulären Git-Push auslösen

Das lighthouse-bot-starter-Repository enthält bereits eine .travis.yml-YAML-Datei:

language: node_js
node_js:
  - "8.1.3"
install:
  - npm install
before_script:
  - npm install -g firebase-tools
script:
  - webpack

Die YAML-Datei weist Travis an, alle Abhängigkeiten zu installieren und Ihre App zu erstellen. Jetzt ist es an der Zeit, die Beispiel-App in Ihr eigenes GitHub-Repository zu übertragen. Führen Sie ggf. den folgenden Befehl aus:

git push origin main

Klicken Sie in Travis unter „Settings“ (Einstellungen) auf Ihr Repository, um das Travis-Dashboard Ihres Projekts aufzurufen. Wenn alles in Ordnung ist, wird der Status des Builds innerhalb weniger Minuten von gelb auf grün wechseln. 🎉

4. Firebase-Bereitstellung mit Travis automatisieren

In Schritt 2 haben Sie sich in Ihrem Firebase-Konto angemeldet und die App über die Befehlszeile mit firebase deploy bereitgestellt. Damit Travis Ihre App in Firebase bereitstellen kann, müssen Sie sie autorisieren. Wie gehen Sie vor? Mit einem Firebase-Token 🗝️🔥

Firebase autorisieren

Führen Sie zum Generieren des Tokens diesen Befehl aus:

firebase login:ci

In einem Browserfenster wird ein neuer Tab geöffnet, damit Firebase Ihre Identität bestätigen kann. Anschließend sehen Sie in der Konsole Ihr frisch erzeugtes Token. Kopieren Sie ihn und kehren Sie zu Travis zurück.

Klicken Sie im Travis-Dashboard Ihres Projekts auf Weitere Optionen > Einstellungen > Umgebungsvariablen.

Fügen Sie das Token in das Wertfeld ein, geben Sie der Variablen den Namen FIREBASE_TOKEN und fügen Sie sie hinzu.

Bereitstellung zur Travis-Einrichtung hinzufügen

Mit den folgenden Zeilen weisen Sie Travis an, die App nach jedem erfolgreichen Build bereitzustellen. Fügen Sie sie am Ende der Datei .travis.yml hinzu. 🔚

after_success:
  - firebase deploy --token $FIREBASE_TOKEN --non-interactive

Übertragen Sie diese Änderung auf GitHub und warten Sie auf die erste automatische Bereitstellung. Wenn Sie sich Ihr Travis-Log ansehen, sollte bald die Meldung ✔️ Bereitstellung abgeschlossen! angezeigt werden.

Jedes Mal, wenn Sie Änderungen an Ihrer App vornehmen, werden sie automatisch in Firebase bereitgestellt.

5. Lighthouse-Bot einrichten

Der freundliche Lighthouse-Bot informiert Sie über die Lighthouse-Bewertungen Ihrer App. Es ist nur eine Einladung zu Ihrem Repository erforderlich.

Rufen Sie in GitHub die Einstellungen Ihres Projekts auf und fügen Sie „lighthousebot“ als Mitbearbeiter hinzu (Einstellungen > Mitbearbeiter):

Status des Lighthouse-Bot-Mitarbeiters

Die Genehmigung dieser Anfragen erfolgt manuell und dauert daher nicht immer sofort. Bevor Sie mit dem Testen beginnen, muss LighthouseBot den Status „Mitbearbeiter“ genehmigt haben. In der Zwischenzeit müssen Sie den Umgebungsvariablen Ihres Projekts auf Travis einen weiteren Schlüssel hinzufügen. Geben Sie hier Ihre E-Mail-Adresse ein. Sie erhalten dann einen Lighthouse-Bot-Schlüssel in Ihrem Posteingang. 📬

Fügen Sie diesen Schlüssel in Travis als Umgebungsvariable hinzu und nennen Sie sie LIGHTHOUSE_API_KEY:

Lighthouse-Bot zum Projekt hinzufügen

Fügen Sie als Nächstes Lighthouse Bot Ihrem Projekt hinzu:

npm i --save-dev https://github.com/ebidel/lighthousebot

Fügen Sie package.json Folgendes hinzu:

"scripts": {
  "lh": "lighthousebot"
}

Lighthouse-Bot zur Travis-Konfiguration hinzufügen

Als letzten Trick sollten Sie die Leistung der App nach jeder Pull-Anfrage testen.

Fügen Sie in .travis.yml unter „after_success“ einen weiteren Schritt hinzu:

after_success:
  - firebase deploy --token $FIREBASE_TOKEN --non-interactive
  - npm run lh -- https://staging.example.com

Es wird eine Lighthouse-Analyse für die angegebene URL ausgeführt. Ersetzen Sie https://staging.example.com daher durch die URL Ihrer App (also „your-app-123.firebaseapp.com“).

Legen Sie hohe Standards fest und passen Sie die Einrichtung so an, dass keine Änderungen an der App akzeptiert werden, die den Leistungsbewertungswert unter 95 Punkte senken:

- npm run lh -- --perf=95 https://staging.example.com

Pull-Anfrage senden, um den Lighthouse-Bot-Test auf Travis auszulösen

Lighthouse Bot testet nur Pull-Requests. Wenn Sie jetzt auf den Hauptzweig pushen, wird in Ihrem Travis-Protokoll nur die Meldung „Dieses Script kann nur auf Travis-PR-Anfragen ausgeführt werden“ angezeigt.

So lösen Sie den Lighthouse-Bot-Test aus:

  1. Neue Filiale bezahlen
  2. An GitHub übertragen
  3. Pull-Anfrage stellen

Warten Sie auf der Seite des Pull-Requests, bis der Lighthouse-Bot singt. 🎤

Bestehen der Lighthouse-Bewertung

GitHub-Prüfungen bestehen

Die Leistungsbewertung ist hervorragend, die App liegt unter dem Budget und die Prüfung ist erfolgreich.

Weitere Lighthouse-Optionen

Weißt du noch, wie Lighthouse fünf verschiedene Kategorien testet? Sie können Bewertungen für alle Seiten mit Lighthouse-Bot-Flags erzwingen:

--perf  # performance
--pwa   # progressive web app score
--a11y  # accessibility score
--bp    # best practices score
--seo   # SEO score

Beispiel:

npm run lh -- --perf=93 --seo=100 https://staging.example.com

In diesem Fall wird die PR als nicht bestanden eingestuft, wenn der Leistungswert unter 93 oder der SEO-Wert unter 100 fällt.

Mit der Option --no-comment können Sie auch festlegen, dass Sie keine Kommentare von Lighthouse-Bot erhalten.