Google’s PageSpeed Insights (PSI) è lo strumento ufficiale di casa Google per valutare le prestazioni delle tue pagine web. In questo articolo liberamente tradotto da questa fonte cerchiamo di analizzare nel dettaglio le modalità e i criteri di assegnazione dei punteggi.

PageSpeed Insights si avvale di  una tecnologia open-source chiamata Lighthouse, assieme ai dati raccolti da Chrome User Experience Report (CrUX) uno strumento di telemetria rilasciato da Google per studiare le statistiche d’utilizzo reali di Chrome, grazie ai report forniti dagli stessi utenti. Collegandosi a questa indirizzo web è possibile immettere la URL e ricevere una dettagliata valutazione sui seguenti aspetti (sia per dispositivi mobile che desktop):

• Performance
• Accessibility
• SEO
• Best Practices
• Progressive Web App

Per ogni categoria, PSI fornisce un punteggio (separato per dispositivo, desktop e mobile) compreso tra 0 e 100, insieme ad altre informazioni aggiuntive al fine di aiutare l’utente a diagnosticare la sua pagina e ad individuare le opportunità di miglioramento.

La nostra analisi si concentrerà unicamente sulla categoria Performance

(Questo è un link utile da consultare https://web.dev/fast )

Cosa misura realmente PageSpeed?

Innanzitutto è utile chiarire che cosa misura realmente Google PageSpeed Insights . In particolare è importante sottolineare che PSI non misura il tempo di caricamento totale di una pagina web. La valutazione di PSI si focalizza in realtà su ciò che Google stesso in uno specifico documento tecnico definisce “progressive web metrics“.

Progressive web metrics (FCP, FMP, TTI) are designed to capture the user experience and are the sole input to the Lighthouse performance score.

—Lighthouse Metric Variability & Accuracy

 

Field Data vs Lab Data

Una importante distinzione che va fatta per comprendere il processo di misurazione di PSI è quella tra “Field Data” e “Lab Data” . Quando un utente visita una pagina Web, ci sono molte variabili da considerare oltre ai dati scientific. Gli utenti possono infatti sperimentare – in termini di user experience – la stessa pagina in molti modi diversi a seconda del loro contesto particolare di navigazione.

• I “Field data”, in italiano “dati sul campo”, per questo noti anche come Real User Monitoring o RUM, mostrano un rapporto storico riguardo le prestazioni di una determinata URL e rappresentano inoltre i dati sulle prestazioni raccolti in forma anonima agli utenti nel mondo reale su una varietà di dispositivi e condizioni di rete. Il Chrome User Experience Report raccoglie questi dati dagli utenti di Chrome che hanno concesso  a Google il permesso di condividere la loro cronologia di navigazione e tutti i loro dati di utilizzo. Questi “dati reali” spesso non sono disponibili in quanto Google non ha raccolto dati a sufficienza sulla pagina sottoposto a valutazione per potere fornire un risultato (vedi allegato qui sotto).
• I “Lab Data”, in italiano “Dati di laboratorio” o “Dati di prova controllati”, si riferiscono a metriche scientifiche oggettive che possono essere calcolate in un ambiente controllato con un certo livello di accuratezza e ripetibilità. Per misurare i “dati di laboratorio” Google utilizza la sua tecnologia open source denominata Lighthouse. Un altro strumento (non di Google) che raccoglie questo di dati è WebPageTest. Tali dati vengono utilizzati per calcolare il tuo punteggio di prestazioni PageSpeed Insights (0-100).

Riassumendo:

I “dati sul campo” sono dati forniti dagli utenti del mondo reale, variabili, NON utilizzati per il punteggio delle prestazioni

I “dati di laboratorio” sono dati scientifici, controllati, utilizzati per il punteggio delle prestazioni.

Poiché il punteggio complessivo delle prestazioni utilizza solo dati di laboratorio, è utile comprendere ciascuna delle 6 metriche dei dati di laboratorio.

Tabella in inglese:

Tabella in italiano:

• Visualizzazione dei primi contenuti

In inglese indicato come First Contentful Paint (FCP) , tale valore misura il tempo impiegato dal browser per visualizzare per la prima volta qualsiasi testo o immagine (qualsiasi cosa diversa da una pagina bianca vuota). Essenzialmente, il tempo che l’utente deve attendere affinchè sia visualizzato il primo contenuto in pagina.

Importante perché: fornisce all’utente un feedback che la pagina ha iniziato a caricarsi.

Raccomandazioni ufficiali Google

The lower your First Meaningful Paint score, the faster that the page appears to display its primary content.

Optimizing the Critical Rendering Path is particularly helpful towards achieving a faster First Meaningful Paint.

 

• Visualizzazione primi contenuti utili

In inglese indicato come First Meaningful Paint (FMP), identifica il momento in cui l’utente si rende conto che il contenuto principale della pagina è visibile. In genere, questo significa che tutti (o la maggior parte) dei tuoi contenuti above the fold sono stati visualizzati sullo schermo.

Importante perché: l’utente si sente come se la pagina fosse completamente caricata (o quasi).

• Prima inattività CPU

In inglese indicato come First CPU Idle (precedentemente era “First Interactive”). In sostanza, significa:

• È possibile interagire con la maggior parte degli elementi presenti sull’interfaccia utente (collegamenti, pulsanti, moduli, ecc.)
• La pagina risponderà alla maggior parte delle interazioni dell’utente in un ragionevole lasso di tempo

Raccomandazioni ufficiali Google

There are two general strategies for improving load time:

• Minimize the number of required or “critical” resources that must be downloaded or executed before the page can load. See Critical Rendering Path.
• Minimize the size of each critical resource. See Optimizing Content Efficiency.

 

• Tempo per interattività

Il Time to Interactive (TTI) misura il tempo necessario affinché una pagina diventi completamente interattiva. Essenzialmente, questo significa:

• l’utente può vedere il contenuto visibile nella pagina
• l’utente può interagire con tutti i contenuti (pulsanti di scelta, utilizzare un modulo di ricerca, ecc.)

Importante perché: se si dà la priorità alla visualizzazione di contenuti visivi rispetto alla capacità di essere in grado di interagire con esso, ciò potrebbe portare ad un’esperienza utente frustrante.

Raccomandazioni ufficiali Google

To improve your TTI score, defer or remove unnecessary JavaScript work that occurs during page load. See Optimize JavaScript Bootup and Reduce JavaScript Payloads with Tree Shaking, and Reduce JavaScript Payloads with Code Splitting.

 

• Indice di velocità

In inglese Speed Index si riferisce alla velocità con cui i contenuti dell’intera pagina vengono visualizzati visivamente. Un’acquisizione della schermata video viene registrata a 10 fps per determinare quanta parte della pagina è stata mostrata visivamente all’utente.

Importante perché: fornisce un riscontro visivo all’utente che la pagina ha completato il processo di caricamento.

Raccomandazioni ufficiali Google

To lower your Speed Index score, you need to optimize your page to visually load faster. Two good starting places are:

• Optimizing Content Efficiency.
• Optimizing the Critical Rendering Path.

 

• RPI Potenziale Massimo

La Latenza input stimata misura quanto tempo impiega la pagina a rispondere quando l’utente tenta di eseguire un’azione (fare clic su un pulsante, compilare un campo modulo, ecc.). La misurazione avviene durante una finestra di 5 secondi che inizia quando la maggior parte del contenuto principale della pagina diventa visibile all’utente.

Punteggio accettabile: 100 ms o meno

Punteggio massimo: 50 ms o meno

Importante perché: gli utenti potrebbero percepire la pagina come lenta o ritardata se ha una latenza di input elevata.

NOTA: tale valore è una stima molto di massima e potrebbe non rappresentare una vera esperienza utente. Il miglioramento di questo punteggio viene in genere eseguito riscrivendo il codice per renderlo più efficiente. Per gli sviluppatori è la metrica più difficile da migliorare.

Come funziona Google PageSpeed Insights

In questa sezione, spieghiamo come viene calcolato esattamente il punteggio di prestazione al fine di avere una migliore comprensione del motivo per cui si ottiene un determinato punteggio.

Spiegazione del punteggio prestazionale di PageSpeed Insights

Per calcolare il punteggio complessivo delle prestazioni (0-100), PageSpeed Insights utilizza 5 delle 6 metriche sopra discusse. Tali metriche si trovano tutte nella sezione “Dati di laboratorio” del rapporto sul rendimento di PSI.

Gli audit in “Diagnostica” e “Opportunità” NON contribuiscono al punteggio complessivo delle prestazioni, né i “Dati sul campo” (Field Data) o “Riepilogo dell’origine” (Origini Summary).

Quali sono le metriche che contribuiscono al punteggio PageSpeed?

Ecco le 5 metriche che costituiscono il tuo punteggio PageSpeed (elencate dalla più alla meno importante):

• Tempo per interattività – 5/10
• Indice di velocità – 4/10
• Visualizzazione dei primi contenuti – 3/10
• Prima CPU inattiva – 2/10
• Visualizzazione primi contenuti utili – 1/10

Come si può vedere, non tutti contribuiscono allo stesso modo. L’importanza di ogni metrica è basata su una scala 1-10 e visualizzata dopo i loro nomi sopra.

• Tempo per interattività (5/10) è il più importante
• Visualizzazione primi contenuti utili (1/10) è il meno importante

Il sistema di ponderazione è stato creato con un insieme di regole liberamente definito, determinato da Google (traduzione: è in qualche modo arbitrario). Tuttavia, se ci si trova in una situazione in cui è necessario migliorare il proprio punteggio, è bene concentrarsi prima sulle metriche a “maggiore impatto”.

Ognuna di queste 5 metriche viene analizzata nel modo seguente, sia per i dispositivi desktop che per i dispositivi mobili.

1. Acquisizione dei dati grezzi dal tuo sito web

Innanzitutto, vengono acquisiti i dati grezzi o non elaborati del tuo sito web (in secondi o millisecondi).

Quando esegui un test PageSpeed Insights e Google acquisisce queste metriche di velocità dal tuo sito, ci sono alcune cose da tenere a mente.

• Se la pagina contiene contenuti o annunci dinamici, potrebbero essere caricati diversi script, il che potrebbe influire sul tempo di caricamento
• La velocità di connessione a Internet per il report mobile deve essere sempre di 1,6 Mbps, ma non sappiamo cosa sia per il report desktop (o se cambia ogni volta)
• Non conosciamo la posizione fisica da cui viene eseguito il test

2. Confronta i dati del tuo sito con i primi 1M di siti

Quindi, questi dati elaborati vengono confrontati con i dati sulle prestazioni di oltre 1 milione di pagine Web prese dall’elenco dei primi 1.000.000 di siti della classifica Alexa. Due volte al mese, il sito HTTP ARCHIVE raccoglie infatti sia i dati mobile che quelli desktop da questi siti “top” e PageSpeed Insights utilizza tali dati come benchmark per determinare se il tuo sito è veloce, medio o lento.

An example of HTTP Archive’s First Contentful Paint data

3. Converte i dati grezzi in un “punteggio” (0-100)

A questo punto, una volta acquisiti e confrontati i dati, Google converte ciascuna metrica dei “dati di laboratorio” del tuo sito in un punteggio compreso tra 0 e 100.

Example scores for each of the 5 metrics, along with their corresponding millisecond values.

Questi calcoli sono basati su un’equazione matematica basata sulla teoria della probabilità nota come distribuzione log-normal distribution

Diamo un’occhiata a First Contentful Paint (FCP) come esempio (fai riferimento al grafico sopra).

In base ai dati dell’archivio HTTP, i valori mediani per FCP sono:

• Desktop = 2,4 secondi
• Cellulare = 5,8 secondi

PageSpeed Insights utilizza 4 secondi come valore medio per calcolare il punteggio per FCP (che si trova a circa metà strada tra desktop e dispositivo mobile). Come puoi vedere di seguito, un FCP di 4 secondi ti dà un punteggio di 50/100.

Ecco come Google ottiene quanto segue:

• 1,3 secondi = 100/100
• 4,0 secondi = 50/100
• 11,0 secondi = 1/100
• 12.0 secondi = 0/100

 

Notare il divario molto più grande (8 secondi) da 0 a 50 e solo uno spazio di 2,7 secondi tra 50-100. Questo è il motivo per cui Google afferma che il punteggio di un 50/100 è come essere nel 75 ° percentile.

Questi calcoli vengono eseguiti per tutte e 5 le metriche, ciascuna con vari punteggi mediani.

4. Unisce i 5 punteggi in 1 unico punteggio finale

Dopo che PageSpeed Insights ha calcolato il tuo punteggio per ciascuna delle 5 metriche, li unisce in un unico punteggio di rendimento finale. Per fare ciò, calcola la media ponderata senza percentuali.

Ecco un esempio abbreviato utilizzando solo 2 metriche.

Moltiplica il punteggio per il loro “peso” per ottenere punteggi corretti

• 75 x 5 = 375
• 50 x 1 = 50

Aggiunge tutti i tuoi punteggi “corretti” sulla base di tale rapporto

• 375 + 50 = 425

Somma tutti i pesi specifici

• 5 + 1 = 6

Divide i punteggi totali “corretti”  (425) per la somma dei loro pesi specifici (6)

• 425 ÷ 6 = 70,8

Il risultato finale che si ottiene arrotondato per eccesso rappresenta il punteggio totale. In questo caso, 71.

Codificazione del colore

Oltre al tuo punteggio di rendimento numerico, Google fornisce anche uno dei tre colori, ognuno dei quali determina un sito veloce, medio o lento (anche tale classificazione è basata sui dati dell’archivio HTTP dei siti “Top” della classifica Alexa).

• Green: 90-100 (fast)
• Orange: 50-89 (average)
• Red: 0-49 (slow)

Come testare con Google PageSpeed Insights

Questa sezione copre:

• Diversi modi per eseguire un test di Google PageSpeed Insights
• Alcune specifiche tecniche dietro il test mobile
• Suggerimenti per i test e domande frequenti

Metodi di prova diversi

Puoi eseguire un test PageSpeed Insights in modalità differentii. Le ultime due sono più tecniche e quindi non trattate in questa guida.

1. PageSpeed Insights Website
2. Estensione Chrome Lighthouse
3. Chrome DevTools
4. Riga di comando (non trattato qui)
5. Modulo Node (non trattato qui)

Spiegazione dei Test e punteggi “Mobile”

Di seguito spieghiamo perchè i punteggi di PSI “Mobile” e “Desktop” differiscono così tanto fra loro in termini di risultati:

Google ci dice che:

“I test mobili vengono eseguiti su uno smartphone Nexus 5X emulato, connesso a Internet tramite una rete 4G lenta simulata.”

Più specificamente, questo equivale a 1,6 Mbps e rappresenta circa il 25% inferiore delle connessioni 4G.

• Dispositivo di test: smartphone Nexus 5X
• Velocità di rete: 1,6 Mbps

Per fare un confronto, secondo speedtest.net, la velocità media di download della rete mobile negli Stati Uniti nel primo trimestre del 2018 era di 27,33 Mbps. Un valore di 16 volte più veloce di quello che Google PageSpeed ​​Insights sta usando per eseguire i test !

La dimensione media di una pagina Web mobile è di 1,7 MB (origine). Con PageSpeed ​​Insights, questa pagina viene caricata su un dispositivo mobile in circa 1 secondo (o 1000 ms). Ma su una rete 4G media negli Stati Uniti, avresti la pagina in circa 65 ms.

Una possibile spiegazione del motivo per cui vedi un punteggio basso di PageSpeed ​​Insights per dispositivi mobili potrebbe essere questa differenza nella velocità della rete mobile.

È ancora del tutto sconosciuta la velocità di download che PageSpeed ​​Insights utilizza per il proprio test desktop, ma è probabilmente molto più alta di 1,6 Mbps.

Suggerimenti per il test e domande frequenti

Quanti test dovrei eseguire?

Anche Google consiglia di eseguire il test di PageSpeed ​​Insights più di una volta per ottenere una valutazione più accurata. Il consiglio è di eseguire 5 test.

E se vuoi davvero tracciare il tuo punteggio di prestazioni sulle diverse numeriche, dovresti anche:

• utilizzare il punteggio medio
• estrapolare i punteggi più alti e più bassi ed utilizzare la media dei 3 punteggi medi

Eseguire il test su più pagine del sito, non solo sulla homepage

La tua home page potrebbe non essere la migliore rappresentazione di tutte le pagine del tuo sito. Poiché PageSpeed ​​Insights misura una pagina alla volta, potresti perdere intuizioni preziose se stai testando la tua home page.

• Testa le tue pagine più popolari;
• Testa ciascun tipo di pagina (post di blog, pagina statica, pagina di destinazione, pagina di prodotto di e-commerce, ecc.);
• Testa le tue pagine più importanti.

Perché i miei risultati cambiano ogni volta che eseguo un test?

Google risponde a questa domanda:

“Diverse cause comuni di variabilità della metrica dipendono dalla disponibilità della rete locale, la disponibilità dell’hardware del client e la risorse di contenuti del client.”

In parole povere, ciò significa che i seguenti fattori potrebbero avere un ruolo nei risultati:

• quanto è veloce o lenta la tua velocità internet
• quanto è potente il tuo computer
• quante altre cose hai sul tuo computer

In che modo gli annunci, i tag manager e gli script possono influire sui risultati dei test?

Ad ogni visita, un sito può caricare diversi annunci o script. Questo è abbastanza comune se utilizzi Google AdSense o un’altra forma di annunci display sul tuo sito. Inoltre, i tag manager possono attivare diversi script su pagine diverse. I tag di remarketing possono caricare diversi script / annunci per utenti diversi.

Questa è una grande ragione per cui dovresti eseguire più test della stessa pagina.

Le estensioni del browser influiscono sui test delle prestazioni?

Si, è possibile. Se stai eseguendo il test utilizzando il browser Chrome, le estensioni che hai attivato possono influire sul tuo punteggio PageSpeed. Prova a testare la pagina in modalità di navigazione in incognito o da un profilo Chrome senza estensioni.

Prova in una finestra del browser privato, senza estensioni in esecuzione

Quello che stai facendo nel tuo browser attuale può influenzare i risultati del test. Le cose che potrebbero avere un impatto negativo sul tuo punteggio includono:

• Le schede che hai aperto nel tuo browser
• Le estensioni del browser che hai abilitato

Test su alcune diverse connessioni Internet

Anche la velocità di download di Internet può influire sul tuo punteggio.

Perciò:

• Prova dal tuo cellulare mentre usi 4G
• Prova dal tuo computer desktop a casa, con una connessione veramente veloce
• Prova da un bar locale su una connessione WiFi condivisa

* Non è raro vedere una differenza di 20-30 punti tra i punteggi.

Google PageSpeed Approfondimenti

Ricapitoliamo ciò che abbiamo imparato.

Google PageSpeed Insights …

• è focalizzato più sulla metrica dell’esperienza utente che  sulla oggettiva velocità di caricamento della pagina
• non prova il tempo di caricamento totale della pagina
• usa i valori mediani dell’archivio HTTP per determinare se il tuo sito è veloce, medio o lento (basato sui siti Top 1M di Alexa)
• utilizza una velocità di download della rete mobile ~ 16 volte più lenta della media degli Stati Uniti (carica pagine molto più lente della maggior parte degli utenti)
• è in continua evoluzione e dipende da decisioni arbitrarie prese da Google

Link per test: https://www.thinkwithgoogle.com/intl/en-gb/feature/testmysite

Fonte: https://wpsmackdown.com/google-pagespeed-insights-explained/