Esistono strumenti che aiutano a monitorare le prestazioni delle pagine e a valutarne i miglioramenti. Uno dei migliori è PageSpeed Insights. È disponibile come applicazione web e come scheda Lighthouse nei DevTools di Chrome (gli stessi DevTools sono disponibili anche in Edge, Opera, Brave e Vivaldi).
Le prestazioni delle pagine web sono sempre più importanti. Gli utenti si aspettano un’esperienza fluida e reattiva, simile a quella delle applicazioni desktop. Inoltre, i Core Web Vitals di Google misurano le prestazioni delle pagine e influenzano il PageRank e gli sforzi di ottimizzazione dei motori di ricerca.
WordPress gestisce più di un terzo di tutti i siti web, ma le prestazioni sono influenzate da un hosting inefficace, da temi lenti e da un’eccessiva dipendenza dai plugin. Potete risolvere la maggior parte dei problemi passando a un buon host web e utilizzando le migliori tecniche di performance.
Accedere a Lighthouse
Avviate Lighthouse aprendo la pagina che volete esaminare e premendo Ctrl/Cmd + Shift + I o scegliendo Developer Tools da More tools nel menu. Passate alla scheda Lighthouse e fate clic sul pulsante Analyse Page Load. I risultati vengono visualizzati dopo pochi secondi:
Potete approfondire le percentuali di primo livello per scoprire ulteriori informazioni e suggerimenti per risolvere i problemi noti. Lo strumento è prezioso, ma ci sono degli aspetti negativi:
- Dovete avviare manualmente un’analisi per ogni pagina che state testando.
- Non è facile registrare il miglioramento o il peggioramento dei fattori nel tempo.
- Ci sono molti dati da controllare ed è facile sbagliare qualcosa.
- I dettagli tecnici sono pensati per chi ha esperienza di sviluppo. Per clienti e manager che desiderano avere una rapida panoramica dei progressi compiuti, è forse eccessivo.
- L’esecuzione di Lighthouse può essere influenzata dalla velocità del dispositivo locale e della rete, il che potrebbe portare a false ipotesi.
L’API di PageSpeed Insights offre un modo per risolvere questi problemi in modo che i test possano essere automatizzati, registrati e confrontati.
Cos’È l’API PageSpeed Insights?
Google mette a disposizione un’API REST gratuita di PageSpeed Insights che restituisce dati in formato JSON contenenti tutte le metriche di Lighthouse e altro ancora. Vi permette di automatizzare l’esecuzione delle pagine, di memorizzare i dati risultanti, di esaminare i cambiamenti nel tempo e di visualizzare le informazioni esatte di cui avete bisogno.
L’API di PageSpeed Insights emula il modo in cui Google vede il vostro sito. Potreste eseguire un report ogni pochi giorni o ogni volta che pubblicate un aggiornamento delle prestazioni.
I risultati sono utili ma non necessariamente indicativi della reale esperienza dell’utente. L’API delle prestazioni del browser è un’opzione migliore quando volete monitorare le prestazioni reali su tutti i dispositivi e le reti dei vostri utenti.
Guida Rapida all’API di PageSpeed Insights
Copiate il seguente indirizzo nel vostro browser web e modificate il sito url per valutare le prestazioni della vostra pagina:
https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://www.yoursite.com/
Firefox è l’ideale perché ha un visualizzatore JSON integrato, anche se Chrome ha delle estensioni che forniscono la stessa funzionalità. Il punteggio complessivo delle prestazioni di Lighthouse è evidenziato di seguito:
Potete modificare la query string dell’URL dell’API in base alle vostre pagine e alle vostre preferenze. L’unico parametro richiesto è url, per esempio:
url=https://mysite.com/page1
Il test del desktop viene eseguito per impostazione predefinita, ma potete richiederlo esplicitamente con:
strategy=desktop
o passare al mobile con:
strategy=mobile
Vengono eseguiti solo i test sulle prestazioni, a meno che non specifichiate una o più categorie di interesse:
category=performance
category=accessibility
category=best-practices
category=seo
category=pwa
È possibile definire una lingua specifica impostando un locale, per esempio il francese:
locale=fr-FR
e i dettagli della campagna di Google Analytics possono essere impostati con:
utm_campaign=<campaign>
utm_source=<source>
Il servizio è gratuito per le richieste poco frequenti, ma dovrete registrarvi per ottenere una chiave API di Google se volete eseguire molti test dallo stesso indirizzo IP in un breve periodo. La chiave viene aggiunta all’URL con:
key=<api-key>
Potete costruire la stringa di query dell’URL specificando i parametri che avete scelto separati da caratteri di ampersand (&). Il seguente URL API testa la pagina all’indirizzo https://mysite.com/ usando un dispositivo mobile per valutare le prestazioni e i criteri di accessibilità:
https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://mysite.com/&strategy=mobile&category=performance&category=accessibility
Potete creare i vostri URL o usare lo strumento di creazione di URL di Google PageSpeed API se desiderate ulteriore assistenza.
Risultati JSON dell’API PageSpeed Insights
I test restituiscono in genere circa 600Kb di dati JSON a seconda delle categorie scelte, del numero di risorse presenti nella pagina e della complessità degli screenshot (incorporati in formato base64).
La quantità di dati è scoraggiante, ci sono alcune duplicazioni e la documentazione dei risultati non è sempre chiara. Il JSON è suddiviso in quattro sezioni come descritto di seguito.
loadingExperience
Si tratta di metriche calcolate per l’esperienza di caricamento della pagina da parte dell’utente finale. Include informazioni come i Core Web Vitals CUMULATIVE_LAYOUT_SHIFT_SCORE, FIRST_CONTENTFUL_PAINT_MS e FIRST_INPUT_DELAY_MS. I dettagli e il valore “categoria” restituiscono FAST, AVERAGE, SLOW, o NONE se non è stata effettuata alcuna misurazione. Esempio:
"loadingExperience": {
"metrics": {
"CUMULATIVE_LAYOUT_SHIFT_SCORE": {
"percentile": 0,
"distributions": [
{
"min": 0,
"max": 10,
"proportion": 0.970
},
{
"min": 10,
"max": 25,
"proportion": 0.017
},
{
"min": 25,
"proportion": 0.012
}
],
"category": "FAST"
},originLoadingExperience
Si tratta di metriche aggregate calcolate per le esperienze di caricamento delle pagine di tutti gli utenti. Le sezioni sono identiche a quelle di loadingExperience e i siti con meno traffico difficilmente mostreranno una differenza nei dati.
lighthouseResult
Questa è la sezione più grande e contiene tutte le metriche di Lighthouse. Fornisce informazioni sul test:
- requestedUrl – l’URL richiesto
- finalUrl – la pagina effettiva testata dopo aver seguito tutti i redirect
- lighthouseVersion – la versione del software
- fetchTime – l’ora in cui il test è stato eseguito
- userAgent – la stringa dell’user agent del browser utilizzato per il test
- environment – informazioni estese sull’user agent
- configSettings – le impostazioni passate all’API
Segue una sezione “audit” con molte sezioni tra cui unused-javascript, unused-css-rules, total-byte-weight, redirects, dom-size, largest-contentful-paint-element, server-response-time, network-requests, cumulative-layout-shift, first-meaningful-paint, screenshot-thumbnails e full-page-screenshot.
La maggior parte delle metriche di verifica fornisce una sezione “dettagli” che contiene fattori come “overallSavingsBytes” e “overallSavingsMs” che stimano i benefici dell’implementazione di un miglioramento delle prestazioni.
Le sezioni “screenshot” a pagina intera e miniature contengono dati immagine base64 incorporati.
Una sezione “metriche” fornisce un riepilogo di tutte le metriche in un array di “elementi”, per esempio:
"metrics": {
"id": "metrics",
"title": "Metrics",
"description": "Collects all available metrics.",
"score": null,
"scoreDisplayMode": "informative",
"details": {
"type": "debugdata",
"items": [{
"observedFirstVisualChange": 234,
"observedFirstContentfulPaint": 284,
"interactive": 278,
"observedFirstPaintTs": 1579728174422,
"observedDomContentLoaded": 314,
// ... etc ...
}]
},
"numericValue": 278,
"numericUnit": "millisecond"
},La sezione “audit” è seguita da “categories” che fornisce i punteggi complessivi di Lighthouse per le categorie scelte passate nell’URL API:
"categories": {
"performance": {
"id": "performance",
"title": "Performance",
"score": 0.97,
"auditRefs": [
//...Il “punteggio” (score) è un numero compreso tra 0 e 1 che di solito viene mostrato come percentuale nei report di Lighthouse. In generale, un punteggio di:
- 0,9 a 1,0 è buono
- da 0,5 a meno di 0,9 indica che è necessario un miglioramento
- meno di 0,5 è scarso e richiede un’attenzione più urgente
La sezione “auditRefs” fornisce un elenco di tutte le metriche e delle ponderazioni utilizzate per calcolare ciascun punteggio.
analysisUTCTimestamp
Infine, viene riportato il tempo di analisi. Dovrebbe essere identico a quello mostrato in lighthouseResult.fetchTime.
Metriche Utili dei Risultati JSON
Vi consigliamo di salvare ed esaminare i risultati JSON in un editor di testo. Alcuni hanno formattatori JSON integrati o disponibili come plugin. In alternativa, potete usare strumenti online gratuiti come:
Le seguenti metriche possono essere utili. Ricordatevi di impostare le opzioni di categoria associate all’URL, se necessario.
Metriche di Riepilogo
Punteggi complessivi da 0 a 1:
| Prestazioni | lighthouseResult.categories.performance.score |
| Accessibilità | lighthouseResult.categories.accessibility.score |
| Buone pratiche | lighthouseResult.categories.best-practices.score |
| SEO | lighthouseResult.categories.seo.score |
| Progressive Web App (PWA) | lighthouseResult.categories.pwa.score |
Metriche di Performance
Queste includono i punteggi Core Web Vitals da 0 a 1:
| First Contentful Paint | lighthouseResult.audits.first-contentful-paint.score |
| First Meaningful Paint | lighthouseResult.audits.first-meaningful-paint.score |
| Largest Contentful Paint | lighthouseResult.audits.largest-contentful-paint.score |
| Speed Index | lighthouseResult.audits.speed-index.score |
| Cumulative Layout Shift | lighthouseResult.audits.cumulative-layout-shift.score |
Altri utili punteggi di performance sono:
| Server response time | lighthouseResult.audits.server-response-time.score |
| Is crawlable | lighthouseResult.audits.is-crawlable.score |
| Console errors | punteggio: lighthouseResult.audits.errors-in-console.score |
| Total byte weight | lighthouseResult.audits.total-byte-weight.score |
| DOM size score | lighthouseResult.audits.dom-size.score |
Di solito è possibile ottenere cifre e unità di misura effettive come:
- lighthouseResult.audits.total-byte-weight.numericValue –
la dimensione totale della pagina, per esempio 450123 - lighthouseResult.audits.total-byte-weight.numericUnit –
l’unità di misura utilizzata per la dimensione totale della pagina, per esempio “byte”
In alternativa, “displayValue” di solito contiene un messaggio leggibile con la cifra e l’unità:
- lighthouseResult.audits.server-response-time.displayValue –
un messaggio sul tempo di risposta, per esempio “Il documento principale ha impiegato 170 ms” - lighthouseResult.audits.dom-size.displayValue –
un messaggio sul numero di elementi nel DOM, per esempio “543 elementi”
Creare una Bacheca delle Prestazioni Senza Codice
I feed API live possono essere letti ed elaborati in molti sistemi, tra cui Microsoft Excel. (Per quanto strano, Google Sheets non supporta i feed JSON senza ulteriori plugin o codice macro. Supporta invece XML.)
Per importare il punteggio delle prestazioni globali in tempo reale in Excel, avviate un nuovo foglio di calcolo, passate alla scheda Data e fate clic su From Web. Inserite l’URL dell’API di PageSpeed Insights e premete OK:
Fate clic su Connect nella finestra di dialogo successiva e mantenete l’impostazione predefinita (Anonymous). Passerete allo strumento Query Settings:
Fate clic su Record a destra della metrica dei risultati di lighthouse. Poi fate clic sulle voci categories e performance per scendere nella gerarchia degli oggetti JSON:
Fate clic sull’icona Into Table in alto tra le opzioni del menu del tasto destro del mouse.
Potete quindi fare clic sulla freccia del filtro nell’intestazione della tabella per rimuovere tutto ciò che non è il punteggio prima di fare clic su OK:
Infine, fate clic su Close & Load per visualizzare il punteggio della performance live nel vostro foglio di calcolo:
Potete seguire lo stesso procedimento per altre metriche di interesse.
Creare una Bacheca delle Prestazioni Web
Questa dimostrazione di Codepen fornisce un modulo in cui potete inserire un URL e scegliere l’analisi desktop o mobile per ottenere i risultati.
Il codice crea un URL di PageSpeed Insights, richiamate l’API e poi visualizzate i vari risultati in una tabella riassuntiva che è più veloce da visualizzare rispetto a un report standard di Lighthouse:
La funzione asincrona startCheck() viene chiamata quando il modulo viene inviato. Annulla l’evento di invio e nasconde i risultati precedenti:
// make API request
async function startCheck(e) {
e.preventDefault();
show(resultTable, false);
show(status);
show(error, false);Quindi costruisce apiURL dai dati del modulo e disabilita i campi:
const
form = e.target,
fields = form.firstElementChild,
data = new FormData(form),
qs = decodeURIComponent( new URLSearchParams(data).toString() ),
apiURL = form.action + '?' + qs;
fields.disabled = true;L’API Fetch viene utilizzata per chiamare l’URL di PageSpeed, ottenere la risposta e analizzare la stringa JSON in un oggetto JavaScript utilizzabile. Un blocco try/catch assicura la cattura degli errori:
try {
// call API and get result
const
response = await fetch(apiURL),
result = await response.json();L’oggetto risultato viene passato a una funzione showResult(). Questa estrae le proprietà e le inserisce nella tabella dei risultati o in qualsiasi altro elemento HTML che abbia l’attributo data-point impostato su una proprietà dell’API PageSpeed, per esempio:
<td data-point="lighthouseResult.categories.performance.score"></td>
La fine del blocco try:
// output result
showResult(result);
show(status, false);
show(resultTable);
}Infine, un blocco catch gestisce gli errori e i campi del modulo vengono riabilitati per consentire l’esecuzione di altri test:
catch(err) {
// API error
console.log(err);
show(status, false);
show(error);
}
fields.disabled = false;
}Altre Opzioni di Sviluppo
Il codice di esempio sopra riportato recupera un risultato dall’API di PageSpeed Insights quando viene richiesto. Il report è più configurabile rispetto a Lighthouse, ma l’esecuzione rimane un processo manuale.
Se volete sviluppare una vostra bacheca, potrebbe essere pratico creare una piccola applicazione che richiami l’API di PageSpeed Insights e memorizzi il JSON risultante in un nuovo record del database con l’URL testato e la data/ora corrente. La maggior parte dei database supporta JSON, anche se MongoDB è l’ideale per questo compito. Un cron job può richiamare la vostra applicazione su base temporale, magari una volta al giorno durante le prime ore del mattino.
Un’applicazione lato server può quindi implementare la propria API REST per i vostri requisiti di reportistica, per esempio per restituire le variazioni di specifiche metriche di performance tra due date. Può essere richiamata da JavaScript lato client per visualizzare tabelle o grafici che illustrino i miglioramenti delle prestazioni nel tempo.
Se volete creare report complessi con quantità significative di dati, è preferibile precalcolare le cifre una volta al giorno nel momento in cui sono disponibili i nuovi dati di PageSpeed. Dopotutto, non volete mostrare il miglioramento delle prestazioni in un report che richiede minuti per essere generato!
Riepilogo
Lo strumento Lighthouse di Chrome è favoloso, ma è un lavoro faticoso per valutare frequentemente molte pagine. L’API di PageSpeed Insights vi permette di valutare le prestazioni del sito utilizzando tecniche di programmazione. I vantaggi:
- I test sulle prestazioni possono essere automatizzati. Non potete dimenticare di eseguire un test.
- I risultati vengono raccolti sui server di Google, quindi i fattori di velocità del dispositivo locale e della rete hanno una minore influenza.
- Le metriche includono informazioni che di solito non sono disponibili in Lighthouse.
- Le metriche importanti possono essere registrate e monitorate nel tempo per garantire che le prestazioni della pagina siano migliorate con ogni aggiornamento.
- Le informazioni sulle prestazioni, sull’accessibilità e sulla SEO possono essere visualizzate in report semplificati, così saranno disponibili a colpo d’occhio per developer, manager e clienti.
Lascia un commento