Audits mit AutoWebPerf automatisieren

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

AutoWebPerf (AWP) ist ein modulares Tool, mit dem Leistungsdaten automatisch aus mehreren Quellen erfasst werden können. 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 dieses Tools führen seit Jahren Leistungsaudits 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 Repository AutoWebPerf auf GitHub verfügbar.

Wozu dient AWP?

Es gibt zwar mehrere Tools und APIs zur Überwachung der Leistung von Webseiten, die meisten davon geben jedoch Daten an, die zu einem bestimmten Zeitpunkt erfasst wurden. Um eine Website angemessen zu überwachen und die Leistung wichtiger Seiten aufrechtzuerhalten, sollten Sie die Core Web Vitals kontinuierlich messen und Trends beobachten.

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 beispielsweise in Google Tabellen geschrieben und gespeichert und dann im Data Studio-Dashboard visualisiert werden. AWP automatisiert den zeitaufwendigen Teil des gesamten Prozesses und ist daher eine hervorragende Lösung, um Trends im Labor und im Feld im Zeitverlauf zu verfolgen. Weitere Informationen finden Sie unten im Abschnitt Auditergebnisse in Data Studio visualisieren.

Architektur

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

  • der Motor
  • Connector-Module
  • gatherer-Module

Die Engine nimmt eine Liste von Tests aus einem Connector (z. B. aus einer lokalen CSV-Datei) auf, führt Leistungsanalysen ü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.

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

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

Regelmäßige Prüfungen

Sie können wiederkehrende Prüfungen mit täglicher, wöchentlicher oder monatlicher Häufigkeit ausführen. Sie können beispielsweise tägliche 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 Analysetests aus der lokalen JSON-Datei gelesen, die Analysen auf einem lokalen Computer ausgeführt und die Ergebnisse 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 den 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 Prüfungen und der Ergebniserhebung finden Sie im GitHub-Repository von AWP.

Analyseergebnisse in Data Studio visualisieren

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

Data Studio ist ein kostenloses Visualisierungstool, in das Sie ganz einfach Leistungsmesswerte laden und Trends in Diagrammen 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 End-to-End-Prozess von der Datenerhebung bis zur Visualisierung zu vereinfachen, können Sie AWP mit einer Liste von URLs ausführen, um die Ergebnisse mit dem folgenden Befehl automatisch in Google Tabellen zu exportieren:

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

Nachdem Sie die täglichen Messwerte in einer Tabelle erfasst haben, können Sie ein Data Studio-Dashboard erstellen, in dem die Daten direkt aus der Tabelle geladen und die Trends in einem Zeitreihendiagramm dargestellt werden. Eine ausführliche Anleitung zum Einrichten von AWP mit Google Tabellen als Datenquelle für die Visualisierung in Data Studio finden Sie im Hilfeartikel Google Tabellen API-Connector.

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.