Un nuovo strumento modulare che consente la raccolta automatica dei dati sul rendimento da più origini.
Che cos'è AutoWebPerf (AWP)?
AutoWebPerf (AWP) è uno strumento modulare che consente la raccolta automatica dei dati sul rendimento da più fonti. Attualmente sono disponibili molti strumenti per misurare le prestazioni del sito web per diversi ambiti (laboratorio e campo), come Chrome UX Report, PageSpeed Insights o WebPageTest. AWP offre l'integrazione con vari strumenti di audit con una configurazione semplice, in modo da poter monitorare continuamente il rendimento del sito in un unico posto.
Il rilascio delle indicazioni sulle metriche web essenziali significa che il monitoraggio attivo e attento delle pagine web sta diventando sempre più importante. Gli ingegneri che hanno sviluppato questo strumento eseguono controlli del rendimento da anni e hanno creato AWP per automatizzare una parte manuale, ricorrente e dispendiosa in termini di tempo delle loro attività quotidiane. Oggi, AWP ha raggiunto un livello di maturità ed è pronta per essere condivisa in modo ampio, in modo che chiunque possa trarre vantaggio dall'automazione che offre.
Lo strumento è accessibile nel repository pubblico AutoWebPerf su GitHub.
A cosa serve AWP?
Sebbene siano disponibili diversi strumenti e API per monitorare le prestazioni delle pagine web, la maggior parte espone dati misurati in un momento specifico. Per monitorare adeguatamente un sito web e mantenere buone prestazioni delle pagine chiave, ti consigliamo di misurare continuamente i Core Web Vitals nel tempo e osservare le tendenze.
AWP semplifica questa operazione fornendo un motore e integrazioni API predefinite che possono essere configurate a livello di programmazione per automatizzare le query ricorrenti a varie API di monitoraggio delle prestazioni.
Ad esempio, con AWP puoi impostare un test giornaliero sulla tua home page per acquisire i dati sul campo dall'API CrUX e i dati di laboratorio da un report Lighthouse di PageSpeed Insights. Questi dati possono essere scritti e archiviati nel tempo, ad esempio in Fogli Google, e poi visualizzati nella dashboard di Data Studio. AWP automatizza la parte più impegnativa dell'intero processo, il che la rende una soluzione ideale per seguire le tendenze di laboratorio e sul campo nel tempo. Per maggiori dettagli, consulta la sezione Visualizzare i risultati del controllo in Data Studio di seguito.
Panoramica dell'architettura
AWP è una libreria basata su moduli con tre diversi tipi di moduli:
- il motore
- Moduli connettore
- Moduli gatherer
Il motore prende un elenco di test da un connettore (ad esempio, da un file CSV locale), esegue audit delle prestazioni tramite i raccoglitori selezionati (come PageSpeed Insights) e scrive i risultati nel connettore di output (ad esempio, Fogli Google).
AWP include una serie di raccoglitori e connettori preimplementati:
- Raccolte pre-implementate:
- Connettori preimplementati:
- Fogli Google
- JSON
- CSV
Automatizzare gli audit con AWP
AWP automatizza i controlli delle prestazioni tramite le piattaforme di controllo che preferisci, come PageSpeed Insights, WebPageTest o API CrUX. AWP offre la flessibilità di scegliere dove caricare l'elenco dei test e dove scrivere i risultati.
Ad esempio, puoi eseguire audit per un elenco di test archiviati in un foglio Google e scrivere i risultati in un file CSV con il comando riportato di seguito:
PSI_APIKEY=<YOUR_KEY> SHEETS_APIKEY=<YOUR_KEY> ./awp run sheets:<SheetID> csv:output.csv
Controlli ricorrenti
Puoi eseguire audit ricorrenti con frequenza giornaliera, settimanale o mensile. Ad esempio, puoi eseguire controlli giornalieri per un elenco di test definiti in un file JSON locale come di seguito:
{
"tests": [
{
"label": "web.dev",
"url": "https://web.dev",
"gatherer": "psi"
}
]
}
Il comando riportato di seguito legge l'elenco dei test di controllo dal file JSON locale, esegue i controlli su una macchina locale e quindi restituisce i risultati in un file CSV locale:
PSI_APIKEY=<YOUR_KEY> ./awp run json:tests.json csv:output.csv
Per eseguire i controlli ogni giorno come servizio in background continuo, puoi utilizzare il comando riportato di seguito:
PSI_APIKEY=<YOUR_KEY> ./awp continue json:tests.json csv:output.csv
In alternativa, puoi configurare crontab in un ambiente simile a Unix per eseguire AWP come cron job giornaliero:
0 0 * * * PSI_APIKEY=<YOUR_KEY> ./awp run json:tests.json csv:output.csv
Puoi trovare altri modi per automatizzare i controlli giornalieri e la raccolta dei risultati nel repository GitHub di AWP.
Visualizzare i risultati del controllo in Data Studio
Oltre a misurare continuamente i Core Web Vitals, è importante essere in grado di valutare le tendenze e scoprire potenziali regressioni con le metriche utente reali (RUM) o i dati del Report sull'esperienza utente di Chrome (CrUX) raccolti da AWP. Tieni presente che il Report sull'esperienza utente di Chrome (CrUX) è un'aggregazione mobile di 28 giorni, pertanto è consigliabile utilizzare anche i tuoi dati RUM insieme a CrUX per individuare le regressioni in anticipo.
Data Studio è uno strumento di visualizzazione senza costi in cui puoi caricare facilmente le metriche sul rendimento e tracciare le tendenze sotto forma di grafici. Ad esempio, i grafici delle serie temporali mostrati di seguito mostrano i Core Web Vitals in base ai dati del Chrome UX Report. Uno dei grafici mostra un aumento del Cumulative Layout Shift nelle ultime settimane, il che significa regressioni nella stabilità del layout per determinate pagine. In questo scenario, ti consigliamo di dare la priorità all'analisi dei problemi di fondo di queste pagine.
Per semplificare il processo end-to-end dalla raccolta dei dati alla visualizzazione, puoi eseguire AWP con un elenco di URL per esportare automaticamente i risultati in Fogli Google con il seguente comando:
PSI_APIKEY=<YOUR_KEY> SHEETS_APIKEY=<YOUR_KEY> ./awp run sheets:<SheetID> csv:output.csv
Dopo aver raccolto le metriche giornaliere in un foglio di lavoro, puoi creare una dashboard di Data Studio che carica i dati direttamente dal foglio di lavoro e traccia le tendenze in un grafico delle serie temporali. Consulta il connettore dell'API Google Spreadsheets per istruzioni dettagliate su come configurare AWP con i fogli di lavoro come origine dati da visualizzare in Data Studio.
Passaggi successivi
AWP offre un modo semplice e integrato per ridurre al minimo gli sforzi necessari per configurare una pipeline di monitoraggio continuo per misurare i Core Web Vitals e altre metriche di rendimento. Per il momento, AWP copre i casi d'uso più comuni e continuerà a fornire altre funzionalità per gestire altri casi d'uso in futuro.
Scopri di più nel repository AutoWebPerf.