Audits mit AutoWebPerf automatisieren

Ein neues modulares Tool, mit dem sich Leistungsdaten automatisch aus mehreren Quellen erfassen lassen.

Gilberto Cocchi
Gilberto Cocchi

Was ist AutoWebPerf (AWP)?

AutoWebPerf (AWP) ist ein modulares Tool, das die automatische Erhebung von Leistungsdaten aus mehreren Quellen ermöglicht. Derzeit gibt es viele Tools, mit denen die Websiteleistung für unterschiedliche Bereiche (Lab- und Feldtests) gemessen werden kann, z. B. Chrome UX Report, PageSpeed Insights oder WebPageTest. AWP bietet eine einfache Einrichtung und die Einbindung verschiedener Analysetools, damit Sie die Websiteleistung an einem Ort kontinuierlich im Blick behalten können.

Mit der Veröffentlichung der Richtlinien für Web Vitals wird die genaue und aktive Überwachung von Webseiten immer wichtiger. Die Entwickler hinter diesem Tool führen seit Jahren Leistungsprüfungen durch und haben AWP entwickelt, um einen manuellen, wiederkehrenden und zeitaufwendigen Teil ihrer täglichen Aktivitäten zu automatisieren. Heute ist AWP ausgereift und kann weithin geteilt werden, damit alle von der Automatisierung profitieren können.

Das Tool ist im öffentlichen AutoWebPerf-Repository auf GitHub verfügbar.

Wozu dient AWP?

Obwohl mehrere Tools und APIs für das Monitoring der Leistung von Webseiten verfügbar sind, werden in den meisten von ihnen Daten zu einem bestimmten Zeitpunkt erfasst. Wir empfehlen, Core Web Vitals kontinuierlich im Laufe der Zeit zu messen und Trends zu beobachten, um eine Website angemessen zu überwachen und eine gute Leistung wichtiger Seiten aufrechtzuerhalten.

AWP vereinfacht dies, da es eine Engine und vorgefertigte API-Integrationen bietet, die programmatisch konfiguriert werden können, um wiederkehrende Abfragen an verschiedene APIs zur Leistungsüberwachung zu automatisieren.

Mit AWP können Sie beispielsweise einen täglichen Test auf Ihrer Startseite einrichten, um die Felddaten aus der CrUX API und die Lab-Daten aus einem Lighthouse-Bericht aus PageSpeed Insights zu erfassen. Diese Daten können im Zeitverlauf geschrieben und gespeichert werden, z. B. in Google Tabellen, und dann im Data Studio-Dashboard visualisiert. AWP automatisiert den zeitaufwendigen Teil des gesamten Prozesses und ist daher eine hervorragende Lösung, um Trends in Labor- und Praxistests im Zeitverlauf zu verfolgen. Weitere Informationen finden Sie unten im Abschnitt Audit-Ergebnisse in Data Studio visualisieren.

Architektur

AWP ist eine modulare Bibliothek mit drei verschiedenen Arten von Modulen:

  • der Motor
  • Anschlussmodule
  • gatherer-Module

Die Engine nimmt eine Liste von Tests aus einem Connector (z. B. aus einer lokalen CSV-Datei) auf, führt Leistungsaudits über ausgewählte Aggregatoren (z. B. PageSpeed Insights) aus und schreibt die Ergebnisse in den Ausgabe-Connector (z. B. Google Tabellen).

Ein Diagramm der Architektur von AWP.

AWP bietet eine Reihe vorimplementierter Aggregatoren und Connectors:

Audits mit AWP automatisieren

AWP automatisiert die Leistungsaudits über Ihre bevorzugten Analyseplattformen wie PageSpeed Insights, WebPageTest oder CrUX API. Mit AWP können Sie festlegen, wo die Liste der Tests geladen und wo die Ergebnisse geschrieben werden sollen.

Sie können beispielsweise Audits für eine Liste von Tests ausführen, die in einer Google-Tabelle gespeichert sind, und die Ergebnisse mit dem folgenden Befehl in eine CSV-Datei schreiben:

PSI_APIKEY=<YOUR_KEY> SHEETS_APIKEY=<YOUR_KEY> ./awp run sheets:<SheetID> csv:output.csv

Wiederkehrende Prüfungen

Sie können wiederkehrende Prüfungen mit täglicher, wöchentlicher oder monatlicher Häufigkeit ausführen. So können Sie beispielsweise täglich Prüfungen für eine Liste von Tests ausführen, die in einer lokalen JSON-Datei definiert sind, z. B. so:

{
  "tests": [
    {
      "label": "web.dev",
      "url": "https://web.dev",
      "gatherer": "psi"
    }
  ]
}

Mit dem folgenden Befehl wird die Liste der Audit-Tests aus der lokalen JSON-Datei gelesen, die Audits auf einem lokalen Computer ausgeführt und die Ergebnisse dann in eine lokale CSV-Datei ausgegeben:

PSI_APIKEY=<YOUR_KEY> ./awp run json:tests.json csv:output.csv

Wenn Sie Prüfungen jeden Tag als Hintergrunddienst kontinuierlich ausführen möchten, können Sie stattdessen den folgenden Befehl verwenden:

PSI_APIKEY=<YOUR_KEY> ./awp continue json:tests.json csv:output.csv

Alternativ können Sie Crontab in einer Unix-ähnlichen Umgebung einrichten, um AWP als täglichen Cronjob auszuführen:

0 0 * * * PSI_APIKEY=<YOUR_KEY> ./awp run json:tests.json csv:output.csv

Weitere Möglichkeiten zur Automatisierung täglicher Audits und der Erfassung von Ergebnissen finden Sie im AWP-GitHub-Repository.

Analyseergebnisse in Data Studio visualisieren

Neben der fortlaufenden Messung der Core Web Vitals ist es wichtig, mithilfe von realen Nutzermesswerten (Real User Metrics, RUM) oder den vom AWP erfassten Daten aus dem Chrome UX Report (CrUX) Trends zu bewerten und potenzielle Regressionen zu erkennen. Der Chrome UX-Bericht (CrUX) ist eine 28-tägige bewegliche Aggregation. Daher wird empfohlen, neben CrUX auch Ihre eigenen RUM-Daten zu verwenden, damit Sie Rückgänge früher erkennen können.

Data Studio ist ein kostenloses Visualisierungstool, in das Sie Leistungsmesswerte ganz einfach laden und Trends als Diagramme darstellen können. In den folgenden Zeitreihendiagrammen sind beispielsweise Core Web Vitals auf Grundlage von Daten aus dem Chrome UX-Bericht zu sehen. Eines der Diagramme zeigt einen Anstieg des kumulativen Layout-Shifts in den letzten Wochen, was auf eine Verschlechterung der Layoutstabilität für bestimmte Seiten hindeutet. In diesem Fall sollten Sie die Analyse der zugrunde liegenden Probleme dieser Seiten priorisieren.

Ein Screenshot der Core Web Vitals-Ergebnisse in Data Studio.

Um den gesamten Prozess von der Datenerfassung bis zur Visualisierung zu vereinfachen, können Sie AWP mit einer Liste von URLs ausführen, um Ergebnisse mit dem folgenden Befehl automatisch nach Google Tabellen zu exportieren:

PSI_APIKEY=<YOUR_KEY> SHEETS_APIKEY=<YOUR_KEY> ./awp run sheets:<SheetID> csv:output.csv

Nachdem Sie tägliche Messwerte in einer Tabelle erfasst haben, können Sie ein Data Studio-Dashboard erstellen, das die Daten direkt aus der Tabelle lädt und die Trends in einem Zeitreihendiagramm darstellt. Im Hilfeartikel Google Tabellen API-Connector finden Sie eine ausführliche Anleitung zum Einrichten von AWP mit Tabellen als Datenquelle, die in Data Studio visualisiert werden sollen.

Nächste Schritte

AWP bietet eine einfache und integrierte Möglichkeit, den Aufwand für die Einrichtung einer kontinuierlichen Monitoring-Pipeline zur Messung der Core Web Vitals und anderer Leistungsmesswerte zu minimieren. Derzeit deckt AWP die häufigsten Anwendungsfälle ab. Wir werden in Zukunft weitere Funktionen hinzufügen, um auch andere Anwendungsfälle zu unterstützen.

Weitere Informationen finden Sie im AutoWebPerf-Repository.