Ein neues modulares Tool, mit dem Leistungsdaten automatisch aus mehreren Quellen erfasst werden können.
Was ist AutoWebPerf (AWP)?
AutoWebPerf (AWP) ist ein modulares Tool, mit dem Leistungsdaten automatisch aus mehreren Quellen erfasst werden können. Derzeit sind viele Tools verfügbar, um die Websiteleistung für verschiedene Bereiche (Labor und Feld) zu messen, z. B. der Bericht zur Nutzererfahrung in Chrome, PageSpeed Insights oder WebPageTest. AWP bietet eine einfache Einrichtung für die Integration mit verschiedenen Audittools, sodass Sie die Websiteleistung an einem Ort kontinuierlich überwachen können.
Mit der Veröffentlichung der Web Vitals-Anleitung 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. Heute ist AWP ausgereift und kann allgemein genutzt werden, sodass jeder von der Automatisierung profitieren kann.
Das Tool ist im AutoWebPerf öffentlichen Repository auf GitHub verfügbar.
Wofür wird AWP verwendet?
Es gibt zwar mehrere Tools und APIs zur Überwachung der Leistung von Webseiten, aber die meisten davon liefern Daten, die zu einem bestimmten Zeitpunkt erfasst wurden. Um eine Website angemessen zu überwachen und eine gute Leistung wichtiger Seiten aufrechtzuerhalten, sollten Sie die Core Web Vitals im Zeitverlauf kontinuierlich messen und Trends beobachten.
AWP erleichtert dies durch eine Engine und vorgefertigte API-Integrationen, 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 CrUX API und Labordaten aus einem Lighthouse-Bericht von PageSpeed Insights zu erfassen. Diese Daten können im Zeitverlauf beispielsweise in Google Sheets gespeichert und dann im Data Studio-Dashboard visualisiert werden. AWP automatisiert den aufwendigen Teil des gesamten Prozesses und ist somit eine hervorragende Lösung, um Labor- und Feldtrends im Zeitverlauf zu verfolgen. Weitere Informationen finden Sie unten unter Auditergebnisse in Data Studio visualisieren.
Architektur
AWP ist eine modulare Bibliothek mit drei verschiedenen Arten von Modulen:
- die Engine
- Connector-Module
- Gatherer-Module
Die Engine ruft eine Liste von Tests aus einem Connector ab (z. B. aus einer lokalen CSV-Datei), führt Leistungsprüfungen mit ausgewählten Gatherern (z. B. PageSpeed Insights) durch und schreibt die Ergebnisse in den Ausgabeverbinder (z. B. Google Sheets).
AWP enthält eine Reihe von vorimplementierten Gatherern und Connectors:
- Vorimplementierte Gatherer:
- Vorimplementierte Connectors:
- Google Sheets
- JSON
- CSV
Audits mit AWP automatisieren
AWP automatisiert die Leistungsprüfungen über Ihre bevorzugten Auditplattformen wie PageSpeed Insights, WebPageTest oder die CrUX API. Mit AWP können Sie flexibel auswählen, wo die Liste der Tests geladen und wo die Ergebnisse gespeichert werden sollen.
Mit dem folgenden Befehl können Sie beispielsweise Audits 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
Wiederkehrende Audits
Sie können wiederkehrende Audits täglich, wöchentlich oder monatlich ausführen. Sie können beispielsweise tägliche Audits für eine Liste von Tests ausführen, die in einer lokalen JSON-Datei wie unten definiert sind:
{
"tests": [
{
"label": "web.dev",
"url": "https://web.dev",
"gatherer": "psi"
}
]
}
Mit dem folgenden Befehl wird die Liste der Audittests aus der lokalen JSON-Datei gelesen, Audits 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 Audits jeden Tag als Hintergrunddienst 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 die 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 zur Erfassung von Ergebnissen finden Sie im AWP-GitHub-Repository.
Auditergebnisse in Data Studio visualisieren
Neben der kontinuierlichen Messung der Core Web Vitals ist es wichtig, Trends zu analysieren und potenzielle Regressionen mit RUM-Daten (Real User Metrics) oder den von AWP erfassten Daten aus dem Bericht zur Nutzererfahrung in Chrome (CrUX) zu erkennen. Der Bericht zur Nutzererfahrung in Chrome (CrUX) ist eine gleitende 28-Tage-Aggregation. Daher empfiehlt es sich, auch Ihre eigenen RUM-Daten zusammen mit CrUX zu verwenden, damit Sie Regressionen schneller erkennen können.
Data Studio ist ein kostenloses Visualisierungstool, in das Sie ganz einfach Leistungsmesswerte laden und Trends als Diagramme darstellen können. Die Zeitreihendiagramme unten zeigen beispielsweise die Core Web Vitals auf Grundlage von Daten aus dem Bericht zur Nutzererfahrung in Chrome. Eines der Diagramme zeigt, dass die kumulative Layoutverschiebung in den letzten Wochen zugenommen hat, was auf Regressionen bei der Layoutstabilität für bestimmte Seiten hindeutet. In diesem Fall sollten Sie die Analyse der zugrunde liegenden Probleme dieser Seiten priorisieren.
Um den End-to-End-Prozess von der Datenerfassung bis zur Visualisierung zu vereinfachen, können Sie AWP mit einer Liste von URLs ausführen, um die Ergebnisse mit dem folgenden Befehl automatisch nach Google Sheets 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. Eine detaillierte Anleitung zum Einrichten von AWP mit Tabellen als Datenquelle zur Visualisierung in Data Studio finden Sie unter Google Sheets API Connector.
Nächste Schritte
AWP bietet eine einfache und integrierte Möglichkeit, den Aufwand für die Einrichtung einer kontinuierlichen Überwachungspipeline zur Messung der Core Web Vitals und anderer Leistungsmesswerte zu minimieren. Derzeit deckt AWP die häufigsten Anwendungsfälle ab und wird in Zukunft weitere Funktionen für andere Anwendungsfälle bieten.
Weitere Informationen finden Sie im AutoWebPerf-Repository.