Ein neues modulares Tool, das die automatische Erfassung von Leistungsdaten aus mehreren Quellen ermöglicht.
Was ist AutoWebPerf (AWP)?
AutoWebPerf (AWP) ist ein modulares Tool, das die automatische Erfassung von Leistungsdaten aus mehreren Quellen ermöglicht. Derzeit gibt es viele Tools zum Messen der Websiteleistung für verschiedene Bereiche (Lab und Feld), z. B. Chrome UX Report, PageSpeed Insights oder WebPageTest. AWP lässt sich einfach in verschiedene Prüftools einbinden, sodass Sie die Websiteleistung kontinuierlich an einem Ort überwachen können.
Mit der Veröffentlichung der Web Vitals-Empfehlungen wird die genaue und aktive Überwachung von Webseiten immer wichtiger. Die Entwickler dieses Tools 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. Mittlerweile hat AWP einen ausgereiften Reifegrad erreicht und kann nun allgemein veröffentlicht werden, damit alle von der Automatisierung profitieren können.
Das Tool ist über das öffentliche Repository AutoWebPerf auf GitHub verfügbar.
Wozu dient AWP?
Es stehen zwar mehrere Tools und APIs zur Verfügung, um die Leistung von Webseiten zu überwachen, die meisten stellen jedoch Daten bereit, die zu einem bestimmten Zeitpunkt gemessen wurden. Damit eine Website angemessen überwacht und die Leistung der wichtigsten Seiten aufrechterhalten wird, sollten die Core Web Vitals kontinuierlich über einen längeren Zeitraum gemessen werden, um Trends zu beobachten.
Mit AWP wird dies einfacher, indem eine Engine und vordefinierte API-Integrationen bereitgestellt werden, die programmatisch konfiguriert werden können, um wiederkehrende Abfragen an verschiedene APIs zur Leistungsüberwachung zu automatisieren.
Mit AWP können Sie beispielsweise auf Ihrer Startseite einen täglichen Test einrichten, um die Felddaten aus der CrUX API und Labdaten aus einem Lighthouse-Bericht von PageSpeed Insights zu erfassen. Diese Daten können im Zeitverlauf z. B. in Google Tabellen geschrieben und gespeichert und dann im Data Studio-Dashboard visualisiert werden. AWP automatisiert den anspruchsvollen Teil des gesamten Prozesses und ist damit eine hervorragende Lösung, um Labor- und Feldtrends 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 Modultypen:
- die engine
- connector-Module
- gatherer-Module
Die Engine erstellt eine Liste mit Tests von einem Connector (z. B. aus einer lokalen CSV-Datei), führt Leistungsüberprüfungen über ausgewählte Collecters (z. B. PageSpeed Insights) durch und schreibt die Ergebnisse in den Ausgabe-Connector (z. B. Google Tabellen).
AWP enthält eine Reihe vorab implementierter Collecter und Connectors:
- Vorab implementierte Collecters:
- Vorab implementierte Connectors:
- Google Tabellen
- JSON
- CSV
Audits mit AWP automatisieren
AWP automatisiert die Leistungsprüfungen über Ihre bevorzugten Audit-Plattformen wie PageSpeed Insights, WebPageTest oder CrUX API. Mit AWP kann flexibel ausgewählt werden, 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 täglich, wöchentlich oder monatlich durchführen. Sie können beispielsweise tägliche Audits für eine Liste von Tests ausführen, die in einem lokalen JSON-Format definiert sind, wie unten gezeigt:
{
"tests": [
{
"label": "web.dev",
"url": "https://web.dev",
"gatherer": "psi"
}
]
}
Der folgende Befehl liest die Liste der Audit-Tests aus der lokalen JSON-Datei, führt Audits auf einem lokalen Computer aus und gibt die Ergebnisse in eine lokale CSV-Datei aus:
PSI_APIKEY=<YOUR_KEY> ./awp run json:tests.json csv:output.csv
Wenn Sie Audits täglich 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 Ergebniserfassung finden Sie im AWP GitHub-Repository.
Audit-Ergebnisse in Data Studio visualisieren
Neben der kontinuierlichen Messung von Core Web Vitals ist es wichtig, Trends und potenzielle Regressionen anhand von echten Nutzermesswerten (RUM) oder den von AWP erhobenen Chrome UX Report-Daten (CrUX-Daten) evaluieren zu können. Der Chrome UX Report (CrUX Report) ist eine 28-tägige gleitende Aggregation. Daher wird empfohlen, auch Ihre eigenen RUM-Daten zusammen mit CrUX zu verwenden, damit Sie Regressionen früher erkennen können.
Data Studio ist ein kostenloses Visualisierungstool, mit dem Sie ganz einfach Leistungsmesswerte laden und Trends als Diagramme zeichnen können. In den Zeitreihendiagrammen unten sehen Sie beispielsweise Core Web Vitals, die auf Chrome-UX-Berichtsdaten basieren. In einem der Diagramme ist der Anstieg der Cumulative Layout Shift in den letzten Wochen zu sehen, was eine Regression der Layoutstabilität für bestimmte Seiten bedeutet. In diesem Szenario ist es vorteilhaft, die Bemühungen zu priorisieren, die zugrunde liegenden Probleme dieser Seiten zu analysieren.
Um den gesamten Prozess von der Datenerhebung 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 Tabellenkalkulation 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. Eine ausführliche Anleitung zum Einrichten von AWP mit Tabellen als Datenquelle für die Visualisierung in Data Studio finden Sie unter Connector für Google Tables API.
Nächste Schritte
AWP bietet eine einfache und integrierte Möglichkeit, den Aufwand für die Einrichtung einer kontinuierlichen Monitoringpipeline zu minimieren, um Core Web Vitals und andere Leistungsmesswerte zu messen. Derzeit deckt AWP die gängigsten Anwendungsfälle ab und wird in Zukunft weitere Funktionen für andere Anwendungsfälle bereitstellen.
Weitere Informationen finden Sie im AutoWebPerf-Repository.