Un 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. De nombreux outils sont actuellement disponibles pour mesurer les performances des sites Web pour différentes étendues (laboratoire et terrain), tels que le rapport d'expérience utilisateur Chrome, PageSpeed Insights ou WebPageTest. AWP s'intègre à différents outils d'audit avec une configuration simple. Vous pouvez ainsi surveiller en continu les performances du site à un seul endroit.
La publication des conseils sur les Web Vitals signifie qu'il est de plus en plus important de surveiller de près et activement 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 niveau de maturité suffisant pour être partagé à grande échelle afin que chacun puisse bénéficier de l'automatisation qu'il apporte.
L'outil est accessible dans le AutoWebPerf 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 sur les pages clés, il est recommandé de mesurer en continu les 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 par programmation pour automatiser les requêtes récurrentes vers différentes API de surveillance des performances.
Par exemple, avec AWP, vous pouvez configurer un test quotidien sur votre page d'accueil pour capturer les données de terrain de l'API CrUX et les données de laboratoire 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 excellente solution pour suivre les tendances de laboratoire et de terrain au fil du temps. 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 avec trois types de modules différents :
- le moteur ;
- les modules de connecteur ;
- les modules de collecteur.
Le moteur prend une liste de tests à partir d'un connecteur (par exemple, à partir d'un fichier CSV local), exécute des audits de performances via les 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 :
- Collecteurs 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 vous permet 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ée 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 avec une fréquence quotidienne, hebdomadaire ou mensuelle. Par exemple, vous pouvez exécuter des audits quotidiens pour une liste de tests définie 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 des audits sur une machine locale, 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 continu, vous pouvez utiliser la commande ci-dessous :
PSI_APIKEY=<YOUR_KEY> ./awp continue json:tests.json csv:output.csv
Vous pouvez également configurer la 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 façons d'automatiser les audits quotidiens et la collecte des résultats dans le dépôt GitHub AWP.
Visualiser les résultats d'audit dans Data Studio
En plus de mesurer en continu les Core Web Vitals, il est important de pouvoir évaluer les tendances et détecter les régressions potentielles à l'aide des métriques utilisateur réelles (RUM) ou des 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 mobile sur 28 jours. Il est donc recommandé d'utiliser également vos propres données RUM avec CrUX afin de détecter les régressions plus 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 chronologiques ci-dessous montrent les Core Web Vitals en fonction des données du rapport d'expérience utilisateur Chrome. L'un des graphiques montre une augmentation du Cumulative Layout Shift au cours des dernières semaines, ce qui signifie des régressions dans la stabilité de la mise en page pour certaines pages. Dans ce scénario, vous devez hiérarchiser les efforts pour analyser les 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 chronologique. Consultez le connecteur d'API Google Sheets pour obtenir des instructions détaillées sur la configuration d'AWP avec des feuilles de calcul comme source de données à visualiser dans Data Studio.
Étape suivante
AWP fournit un moyen simple et intégré de réduire les efforts nécessaires 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 de 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.