Nouvel outil modulaire qui permet de collecter automatiquement des données de 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 de performances à partir de plusieurs sources. Il existe actuellement de nombreux outils pour mesurer les performances des sites Web selon différents champs d'application (atelier et terrain), tels que le rapport d'expérience utilisateur Chrome, PageSpeed Insights ou WebPageTest. AWP propose une intégration à divers outils d'audit avec une configuration simple, ce qui vous permet de surveiller en continu les performances du site au même endroit.
Avec le lancement des recommandations sur les signaux Web, une surveillance étroite et active des pages Web devient de plus en plus importante. Les ingénieurs à l'origine de cet outil effectuent des audits de performances depuis des années. Ils ont également créé AWP pour automatiser une partie manuelle, récurrente et chronophage de leurs activités quotidiennes. Aujourd'hui, l'AWP a atteint un niveau de maturité et est prêt à être partagé de manière large 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 l'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 donné. Pour surveiller de manière adéquate un site Web et maintenir les bonnes performances des pages clés, il est recommandé de mesurer en permanence 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 auprès de diverses 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 sur le 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. L'AWP automatise la partie la plus lourde de l'ensemble du processus, ce qui en fait une excellente solution pour suivre les tendances en laboratoire et sur le terrain au fil du temps. Pour en savoir plus, consultez la section Visualiser les résultats de l'audit dans Data Studio ci-dessous.
Présentation de l'architecture
AWP est une bibliothèque modulaire composée de trois types de modules différents :
- le moteur
- Modules de connecteurs
- Modules gatherer
Le moteur récupère 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 :
- 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é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 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 en arrière-plan en continu, vous pouvez utiliser la commande ci-dessous:
PSI_APIKEY=<YOUR_KEY> ./awp continue json:tests.json csv:output.csv
Vous pouvez également configurer le crontab dans un environnement 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
Pour découvrir d'autres façons d'automatiser les audits quotidiens et la collecte des résultats, consultez le dépôt GitHub d'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 de détecter les régressions potentielles 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 l'expérience utilisateur CrUX afin de pouvoir 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 de séries temporelles 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 une régression de la stabilité de la mise en page pour certaines pages. Dans ce scénario, vous devez donner la priorité aux 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 dans 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 représente les tendances dans un graphique de série temporelle. Consultez le connecteur de l'API Google Sheets pour découvrir comment configurer AWP avec des feuilles de calcul en tant que source de données à visualiser dans Data Studio.
Étape suivante
L'AWP offre 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 proposer d'autres fonctionnalités pour répondre à d'autres cas d'utilisation à l'avenir.
Pour en savoir plus, consultez le dépôt AutoWebPerf.