Nouvel outil modulaire qui permet de collecter automatiquement des données sur les performances à partir de plusieurs sources.
Qu'est-ce qu'AutoWebPerf (AWP) ?
AutoWebPerf (AWP) est un outil modulaire qui permet de collecter automatiquement des données sur les performances à partir de plusieurs sources. Il existe actuellement de nombreux outils permettant de mesurer les performances d'un site Web en fonction de différents champs d'application (atelier et champ), tels que le rapport d'expérience utilisateur Chrome, PageSpeed Insights ou WebPageTest. AWP offre une intégration avec divers outils d'audit et une configuration simple pour que vous puissiez surveiller en continu les performances du site depuis un seul et même endroit.
Avec le lancement des conseils concernant les Signaux Web, il est de plus en plus important de surveiller de près et actif les pages Web. Les ingénieurs à l'origine de cet outil effectuent des audits de performances depuis des années. Ils ont créé AWP pour automatiser une partie manuelle, récurrente et chronophage de leurs activités quotidiennes. Aujourd'hui, AWP a atteint un certain niveau de maturité et est prêt à être partagé largement afin que tout le monde puisse bénéficier de l'automatisation qu'il apporte.
L'outil est accessible dans le dépôt public AutoWebPerf sur GitHub.
À quoi sert AWP ?
Bien que plusieurs outils et API soient disponibles pour surveiller les performances des pages Web, la plupart d'entre eux exposent des données mesurées à un moment précis. Pour surveiller correctement un site Web et maintenir de bonnes performances des pages clés, il est recommandé de mesurer en permanence les Signaux Core Web Vitals au fil du temps et d'observer les tendances.
AWP facilite cette tâche en fournissant un moteur et des intégrations d'API prédéfinies, qui peuvent être configurées de manière automatisée pour automatiser les requêtes récurrentes vers différentes API de surveillance des performances.
Par exemple, avec AWP, vous pouvez définir un test quotidien sur votre page d'accueil pour capturer les données réelles de l'API CrUX et les données de test d'un rapport Lighthouse de PageSpeed Insights. Ces données peuvent être écrites et stockées au fil du temps, par exemple dans Google Sheets, puis visualisées dans le tableau de bord Data Studio. AWP automatise la partie la plus lourde de l'ensemble du processus, ce qui en fait une solution idéale pour suivre les tendances au fil du temps en laboratoire et sur le terrain. Pour en savoir plus, consultez la section Visualiser les résultats d'audit dans Data Studio ci-dessous.
Présentation de l'architecture
AWP est une bibliothèque modulaire qui comprend trois types de modules différents:
- Le moteur
- modules de connecteur
- Modules gatherer
Le moteur extrait une liste de tests à partir d'un connecteur (par exemple, à partir d'un fichier CSV local), exécute des audits de performances via des collecteurs sélectionnés (tels que PageSpeed Insights) et écrit les résultats dans le connecteur de sortie (par exemple, Google Sheets).
AWP est fourni avec un certain nombre de collecteurs et de connecteurs pré-implémentés:
- Outils de collecte pré-implémentés :
- Connecteurs pré-implémentés :
- Google Sheets
- JSON
- CSV
Automatiser les audits avec AWP
AWP automatise les audits de performances via vos plates-formes d'audit préférées, telles que PageSpeed Insights, WebPageTest ou l'API CrUX. AWP offre la flexibilité de choisir où charger la liste des tests et où écrire les résultats.
Par exemple, vous pouvez exécuter des audits pour une liste de tests stockés dans une feuille de calcul Google Sheets et écrire les résultats dans un fichier CSV à l'aide de la commande ci-dessous:
PSI_APIKEY=<YOUR_KEY> SHEETS_APIKEY=<YOUR_KEY> ./awp run sheets:<SheetID> csv:output.csv
Audits récurrents
Vous pouvez exécuter des audits récurrents à une fréquence quotidienne, hebdomadaire ou mensuelle. Par exemple, vous pouvez exécuter des audits quotidiens pour une liste de tests définis dans un fichier JSON local, comme ci-dessous:
{
"tests": [
{
"label": "web.dev",
"url": "https://web.dev",
"gatherer": "psi"
}
]
}
La commande ci-dessous lit la liste des tests d'audit à partir du fichier JSON local, exécute les audits sur un ordinateur local, puis génère les résultats dans un fichier CSV local:
PSI_APIKEY=<YOUR_KEY> ./awp run json:tests.json csv:output.csv
Pour exécuter des audits tous les jours en tant que service d'arrière-plan de manière continue, vous pouvez utiliser la commande ci-dessous:
PSI_APIKEY=<YOUR_KEY> ./awp continue json:tests.json csv:output.csv
Vous pouvez également configurer crontab dans un environnement de type Unix pour exécuter AWP en tant que tâche Cron quotidienne:
0 0 * * * PSI_APIKEY=<YOUR_KEY> ./awp run json:tests.json csv:output.csv
Vous trouverez d'autres moyens d'automatiser les audits quotidiens et la collecte des résultats dans le dépôt GitHub d'AWP.
Visualiser les résultats d'un audit dans Data Studio
En plus de mesurer en permanence les métriques Core Web Vitals, il est important de pouvoir évaluer les tendances et détecter d'éventuelles régressions avec les métriques utilisateur réelles (RUM) ou les données du rapport d'expérience utilisateur Chrome (CrUX) collectées par AWP. Notez que le rapport d'expérience utilisateur Chrome (CrUX) est une agrégation glissante sur 28 jours. Il est donc recommandé d'utiliser également vos propres données RUM avec CrUX pour pouvoir détecter les régressions rapidement.
Data Studio est un outil de visualisation sans frais dans lequel vous pouvez facilement charger des métriques de performances et dessiner des tendances sous forme de graphiques. Par exemple, les graphiques de séries temporelles ci-dessous présentent les métriques Core Web Vitals basées sur les données du rapport d'expérience utilisateur Chrome. L'un des graphiques montre l'augmentation du Cumulative Layout Shift au cours des dernières semaines, ce qui se traduit par des régressions de la stabilité de la mise en page pour certaines pages. Dans ce scénario, vous devez hiérarchiser les efforts d'analyse des problèmes sous-jacents de ces pages.
Pour simplifier le processus de bout en bout, de la collecte des données à la visualisation, vous pouvez exécuter AWP avec une liste d'URL pour exporter automatiquement les résultats vers Google Sheets à l'aide de la commande suivante:
PSI_APIKEY=<YOUR_KEY> SHEETS_APIKEY=<YOUR_KEY> ./awp run sheets:<SheetID> csv:output.csv
Après avoir collecté des métriques quotidiennes dans une feuille de calcul, vous pouvez créer un tableau de bord Data Studio qui charge les données directement à partir de la feuille de calcul et trace les tendances dans un graphique de séries temporelles. Consultez le connecteur d'API Google Sheets pour découvrir en détail comment configurer AWP avec des feuilles de calcul en tant que source de données à visualiser dans Data Studio.
Étape suivante
AWP fournit un moyen simple et intégré de réduire les efforts pour configurer un pipeline de surveillance continue afin de mesurer les Core Web Vitals et d'autres métriques de performances. Pour le moment, AWP couvre les cas d'utilisation les plus courants et continuera à fournir davantage de fonctionnalités pour répondre à d'autres cas d'utilisation à l'avenir.
Pour en savoir plus, consultez le dépôt AutoWebPerf.