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 di dati sulle prestazioni da più origini. Al momento sono disponibili molti strumenti per misurare le prestazioni dei siti web per diversi ambiti (di laboratorio e sul campo), come il Report sull'esperienza utente di Chrome, PageSpeed Insights o WebPageTest. AWP offre l'integrazione con vari strumenti di audit grazie a una configurazione semplice, che ti consente di monitorare continuamente il rendimento del sito in un unico posto.
Il rilascio delle indicazioni relative a Web Vitals significa che il monitoraggio attento e attivo delle pagine web sta diventando sempre più importante. Gli ingegneri che hanno sviluppato 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 loro 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 il rendimento delle pagine web, la maggior parte di questi espone i dati misurati in un momento specifico. Per monitorare adeguatamente un sito web e mantenere buone prestazioni delle pagine chiave, ti consigliamo di effettuare misurazioni continue degli indicatori web essenziali nel tempo e di osservare le tendenze.
AWP semplifica questa operazione fornendo un motore e integrazioni 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 laboratorio da un report di Lighthouse di PageSpeed Insights. Questi dati possono essere scritti e archiviati nel tempo, ad esempio in Fogli Google, per poi essere visualizzati nella dashboard di Data Studio. AWP automatizza la parte più complessa dell'intero processo, rappresentando quindi una valida soluzione per seguire le tendenze di laboratorio e sul campo nel tempo. Per ulteriori dettagli, consulta la sezione Visualizzare i risultati dei controlli 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 esegue un elenco di test 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 include una serie di raccoglitori e connettori pre-implementati:
- Raccoglitori preimplementati:
- Connettori preimplementati:
- Fogli Google
- JSON
- CSV
Automatizzare i controlli con AWP
AWP automatizza i controlli delle prestazioni tramite le tue piattaforme di controllo 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 seguente comando:
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 file JSON locale come mostrato di seguito:
{
"tests": [
{
"label": "web.dev",
"url": "https://web.dev",
"gatherer": "psi"
}
]
}
Il comando seguente legge l'elenco dei test di controllo dal file JSON locale, esegue i controlli su un computer locale e poi 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, puoi utilizzare il comando riportato di seguito:
PSI_APIKEY=<YOUR_KEY> ./awp continue json:tests.json csv:output.csv
In alternativa, puoi configurare il file crontab in un ambiente Unix-like 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 di Core Web Vitals, è importante essere in grado di valutare le tendenze e scoprire potenziali regressioni utilizzando le metriche degli utenti 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 rilevare più rapidamente le regressioni.
Data Studio è uno strumento di visualizzazione gratuito in 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 Core Web Vitals in base ai dati del report sull'esperienza utente di Chrome. Uno dei grafici mostra un aumento del Cumulative Layout Shift nelle ultime settimane, il che significa regressioni nella stabilità del layout per alcune pagine. In questo scenario, devi dare la priorità alle attività di analisi dei problemi di base delle 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 API Fogli Google per la procedura dettagliata 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 le operazioni necessarie per configurare una pipeline di monitoraggio continuo per misurare Core Web Vitals e altre metriche sul rendimento. Per il momento, AWP copre i casi d'uso più comuni e continuerà a fornire altre funzionalità per soddisfare altri casi d'uso in futuro.
Scopri di più nel repository AutoWebPerf.