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 sulle prestazioni da più origini. Attualmente sono disponibili molti strumenti per misurare le prestazioni del sito web per ambiti diversi (lab e campo), ad esempio Report sull'esperienza utente di Chrome, PageSpeed Insights o WebPageTest. AWP offre l'integrazione con vari strumenti di controllo con una semplice configurazione, in modo da poter monitorare continuamente le prestazioni del sito in un'unica posizione.
Il rilascio delle indicazioni di Web Vitals significa che il monitoraggio attento e attivo delle pagine web sta diventando sempre più importante. I tecnici responsabili di questo strumento eseguono controlli delle prestazioni da anni e hanno creato AWP per automatizzare una parte manuale, ricorrente e dispendiosa in termini di tempo delle attività quotidiane. Oggi, AWP ha raggiunto un livello di maturità ed è pronto per essere condiviso su larga scala 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 di essi espone dati misurati in un momento specifico. Per monitorare adeguatamente un sito web e mantenere buone prestazioni delle pagine principali, ti consigliamo di effettuare misurazioni continue dei Segnali web essenziali nel tempo e di osservare le tendenze.
AWP semplifica il tutto fornendo un motore e integrazioni di API predefinite che possono essere configurate in modo programmatico 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 prova 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 ed è un'ottima soluzione per seguire le tendenze di laboratorio e sul campo nel tempo. Per maggiori dettagli, consulta Visualizzazione dei risultati di controllo in Data Studio.
Panoramica dell'architettura
AWP è una libreria basata su modulare con tre diversi tipi di moduli:
- il motore
- Moduli connettori
- moduli gatherer
Il motore prende un elenco di test effettuati da un connettore (ad esempio da un file CSV locale), esegue controlli delle prestazioni tramite raccoglitori selezionati (come PageSpeed Insights) e scrive i risultati nel connettore di output (ad esempio, Fogli Google).
AWP viene fornito con una serie di raccogliere e connettori preimplementati:
- Raccoglitori pre-implementati:
- Connettori preconfigurati:
- Fogli Google
- JSON
- CSV
Automatizzare i controlli con AWP
AWP automatizza i controlli delle prestazioni tramite le tue piattaforme di audit preferite 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 controlli per un elenco di test archiviati in un foglio Google e scrivere i risultati in un file CSV, con il comando seguente:
PSI_APIKEY=<YOUR_KEY> SHEETS_APIKEY=<YOUR_KEY> ./awp run sheets:<SheetID> csv:output.csv
Controlli ricorrenti
Puoi eseguire controlli ricorrenti con frequenza giornaliera, settimanale o mensile. Ad esempio, puoi eseguire controlli giornalieri per un elenco di test definiti in un JSON locale come riportato di seguito:
{
"tests": [
{
"label": "web.dev",
"url": "https://web.dev",
"gatherer": "psi"
}
]
}
Il comando seguente legge l'elenco dei test di audit dal file JSON locale, esegue i controlli su una macchina locale, quindi restituisce i risultati in un file CSV locale:
PSI_APIKEY=<YOUR_KEY> ./awp run json:tests.json csv:output.csv
Per eseguire controlli giornalieri come servizio in background in modo continuativo, puoi utilizzare il comando seguente:
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.
Visualizzazione dei risultati del controllo in Data Studio
Oltre alla misurazione continua dei Segnali web essenziali, è importante essere in grado di valutare le tendenze e scoprire potenziali regressioni con le metriche utente reali (RUM) o con i dati del Chrome UX Report (CrUX) raccolti da AWP. Tieni presente che il report sull'esperienza utente di Chrome (CrUX) è un'aggregazione in movimento di 28 giorni, pertanto ti consigliamo di utilizzare anche i tuoi dati RUM insieme a CrUX in modo da poter individuare le regressioni prima.
Data Studio è uno strumento di visualizzazione senza costi con cui puoi caricare facilmente le metriche sul rendimento e tracciare le tendenze sotto forma di grafici. Ad esempio, i grafici delle serie temporali riportati di seguito mostrano i Segnali web essenziali in base ai dati del Report UX di Chrome. Uno dei grafici mostra un aumento della metrica Cumulative Layout Shift nelle ultime settimane, che indica regressioni nella stabilità del layout per alcune pagine. In questo scenario, ti consigliamo di dare la priorità alle attività di analisi dei problemi sottostanti 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 carichi i dati direttamente dal foglio di lavoro e traccia le tendenze in un grafico delle serie temporali. Per i passaggi dettagliati su come configurare AWP con i fogli di lavoro come origine dati da visualizzare in Data Studio, consulta la pagina dedicata al connettore API Fogli di lavoro Google.
Passaggi successivi
AWP offre un modo semplice e integrato per ridurre al minimo gli sforzi necessari per configurare una pipeline di monitoraggio continua per misurare i Segnali web essenziali e altre metriche delle prestazioni. Per ora, AWP copre i casi d'uso più comuni e continuerà a fornire ulteriori funzionalità per soddisfare altri casi d'uso in futuro.
Scopri di più nel repository AutoWebPerf.