Abbiamo già parlato sul nostro blog dei Core Web Vitals e dell’importanza attribuita a questi valori come misura della UX del tuo sito e sul posizionamento su Google.
Questo aspetto sta diventando decisamente più importante, da quando big G ha definitivamente messo queste metriche tra i fattori di ranking e posizionamento sui risultati di ricerca.
Già prima dell’introduzione dei Core Web Vitals, Google stava valutando alcuni parametri di user experience come fattori di ranking, in particolare:
– La velocità di caricamento delle pagine;
– L’ottimizzazione per i dispositivi mobile;
– Il protocollo HTTPS;
– La non invasività della pubblicità.
Questi parametri sono diventati ufficiali a seguito dell’aggiornamento algoritmico chiamato Google Page Experience annunciato a Giugno 2021.
Possiamo pertanto affermare che i Core Web Vitals vanno ad integrarsi tra i fattori che già Google stava attenzionando come elementi che influiscono sul ranking di un sito.
Google’s John Mueller answered a question on Reddit that expressed skepticism of Core Web Vitals as a ranking factor. Mueller affirmed the importance of CWV as a ranking factor and noted that it is far more than just a tie breaker.
(fonte SEJ)
Ma come si misurano i Core Web Vitals? In questo articolo facciamo un breve ripasso sui CWV e poi approfondiamo come inserire i dati nei report di Google Analytics per usare queste metriche per ulteriori analisi.
Misurare i Core Web Vitals
La misura dei Core Vitals può avvenire con test puntuali attraverso strumenti che ormai conosciamo tutti molto bene:
Tuttavia questi strumenti offrono solo misure puntuali in quanto operano un’analisi su un URL specifico e offrono una lettura delle metriche in quel momento specifico, con quella connessione e con lo stato di carico attuale del server e del sito.
Questi strumenti non forniscono una valutazione storica dei dati e confrontabile con tutto il sito, inoltre non ci permettono di vedere come si comporta il sito nel tempo, in condizioni diverse di carico e confrontare i risultati con altre metriche.
Core Web Vitals con Google Search Console
Google Search Console fornisce un report sui segnali web essenziali.
I dati del rapporto Segnali web essenziali derivano dal rapporto di CrUX.
Il rapporto di CrUX raccoglie metriche anonimizzate sui tempi prestazionali riscontrati dagli utenti effettivi che visitano gli URL del tuo sito (i dati sul campo).
Il database di CrUX raccoglie informazioni sugli URL indipendentemente dal fatto che facciano parte di una proprietà di Search Console.
Misurare i Core Vitals con Google Analytics
Il monitoraggio dei Web Vitals in tempo reale non è tuttavia un task banale!
Google Search Console fornisce un punteggio di alto livello ma non in tempo reale e sono limitate le possibilità di approfondire le metriche e correlare i dati CWV ad altri fattori. Ad esempio non c’è modo di approfondire il livello di pagina e confrontare aspetti relativi a conversioni, dispositivi, origine, etc.
Chiunque volesse avere rapporti sui Core Vitals più approfonditi deve ricorrere ad altri modi di acquisizione dati.
Web Vitals Javascript Library
La libreria web-vitals è uno piccolo script Javascript per misurare tutte le metriche di Web Vitals su utenti reali, in un modo che corrisponda accuratamente a come vengono misurati da Chrome e segnalati ad altri strumenti di Google (ad es Rapporto sull’esperienza utente di Chrome, Pagina Speed Insights, Rapporto sulla velocità di Search Console).
Tuttavia installare e configurare questa libreria per acquisire dati e costruire dei report può non essere facile, soprattutto per chi non ha esperienza di programmazione lato client.
Di seguito vi proponiamo un metodo per installare e configurare la libreria Web Vitals con Google Tag Manager e configurare il tutto per inviare i dati al vostro account Google Analytics, in modo da tracciare i Core Vitals all’interno della vostra dashboard GA.
Usare Google Tag Manager per inviare i Core Vitals a Universal Analytics
Se non sei un utente esperto di GTM, i passaggi seguenti potrebbero sembrare scoraggianti. Non temere, è più facile di quanto sembri.
Per far fluire i tuoi dati vitali web in Google Analytics, dovrai impostare alcune cose nel tuo Tag Manager Container:
- Creare Tag Custom HTML che utilizza uno script per inviare eventi vitali Web nel livello dati. Lo script nel tag HTML personalizzato è una versione modificata di Github creata per gestire le API Web Vitals.
- Attivazione evento personalizzata basata sull’evento creato dal tag sopra.
- Quattro variabili del livello dati che corrispondono ai valori creati dal tag HTML personalizzato.
- Tag universale di Google Analytics che utilizza le variabili e il trigger creati.
Crea un Tag Custom HTML in GTM per i Core Vitals
Il primo passaggio è accedere al tuo Account Google Tag Manager e pushare nel tuo sito un nuovo script che incorpori il codice di tracking delle metriche.
Il codice lo trovi su GitHub al seguente URL: https://github.com/GoogleChrome/web-vitals
Per fare tutto molto più semplice, è inserire un Custom Tag come segue:
Il codice da incorporare è il seguente.
<!– Load ‘web-vitals’ using a classic script that sets the global ‘webVitals’ object. –>
<script src=”https://unpkg.com/web-vitals@1.1.0/dist/web-vitals.umd.js”></script>
<script>
function sendToGTM(name, delta, id) {
// Assumes the global `dataLayer` array exists, see:
// https://developers.google.com/tag-manager/devguide
dataLayer.push({
event: ‘web-vitals’,
event_category: ‘Web Vitals’,
event_action: name.name,
// Google Analytics metrics must be integers, so the value is rounded.
// For CLS the value is first multiplied by 1000 for greater precision
// (note: increase the multiplier for greater precision if needed).
event_value: Math.round(name.name === ‘CLS’ ? name.delta * 1000 : name.delta),
// The ‘id’ value will be unique to the current page load. When sending
// multiple values from the same page (e.g. for CLS), Google Analytics can
// compute a total by grouping on this ID (note: requires `eventLabel` to
// be a dimension in your report).
event_label: name.id,
});
}
webVitals.getCLS(sendToGTM);
webVitals.getFID(sendToGTM);
webVitals.getLCP(sendToGTM);
</script>
2. Aggiungere un attivatore per pubblicare il TAG su tutte le pagine del sito (attivatore ALL PAGES).
3. Il passaggio successivo è creare un nuovo Attivatore su evento come mostrato nell’immagine che segue
4. Successivamente creare le variabili dati da inviare a Google Analytics. come segue
Con le seguenti impostazioni (mostriamo per semplicità quella di event_action)
I dati da configurare nelle altre variabili sono i medesimi come vediamo per leggere event_category
impostare event_label come segue
e infine event_value
4. Come ultimo passaggio occorre creare un Tag Universal Analytics per inviare i dati Google Analytics. Questo Tag lo impostiamo come mostrato nella seguente immagine
Tipo di traccia: Evento
Categoria: {{dlv – event_category}}
Azione: {{dlv – event_action}}
Etichetta: {{dlv – etichetta_evento}}
Valore: {{dlv – valore_evento}}
Hit senza interazione: TRUE
Impostore hit su TRUE in modo che non influisca sulla frequenza di rimbalzo
Seleziona la tua variabile GA (se hai creato la relativa variabile altrimenti inserisci il codice univoco UA del tuo account Google Analytics)
Trigger di attivazione: seleziona il trigger Web Vitals creato nel passaggio precedente.
Monitorare i Core Vitals in Google Analytics
A questo punto non ci resta che entrare nella nostra console di Google Analytics e monitorare gli eventi che registrano i dati in ingresso.
Poiché li abbiamo impostati come Eventi, li troverai in Comportamento > Eventi. Nel rapporto Panoramica eventi, vedrai la categoria di eventi Web Vitals. Fare clic in quella categoria per vedere solo gli eventi Web Vitals.
Quindi, fai clic sulla dimensione Azione evento sopra la tabella. Ogni azione dell’evento corrisponderà a un web vital specifico.
Come leggere i Core Vitals in Google Analytics
I 3 indicatori fondamentali dei Core Web Vitals sono i LCP, FID e CLS.
Vediamoli in dettaglio in modo da capire anche i dati che troveremo nel report
LCP: Largest Contentful Paint
Questa metrica misura il tempo impiegato per visualizzare l’elemento di contenuti di maggiori dimensioni nell’area visibile dal momento in cui l’utente richiede l’URL. Solitamente si tratta di un’immagine o un video oppure di un elemento di testo di grandi dimensioni a livello di blocco. Questo dato è importante perché fa capire all’utente che l’URL è in fase di caricamento.
Il valore ottimale per una buona user experience dovrebbe essere al massimo di 2500 millisecondi nel caricamento della prima pagina.
Ecco come interpretare i dati LC:
| LPC | Pagina Veloce | Pagina Migliorabile | Pagina Scadente |
| Valore in millisecondi | <=2500 | tra i 2500 e 4000 | > 4000 |
FID: First Input Delay
Il tempo trascorso sempre in millisecondi, tra la prima interazione di un utente con la tua pagina (clic su un link, tocco di un pulsante e così via) e il momento in cui il browser risponde effettivamente all’interazione.
Questa misurazione viene derivata da qualsiasi elemento interattivo su cui l’utente ha fatto clic per primo. Questo valore è importante per le pagine in cui l’utente deve eseguire un’azione perché è il momento in cui le pagine diventano interattive.
Un valore ottimale di FID è inferiore ai 100 ms. Cosa può influire negativamente sul punteggio FID?
| FID | Pagina Veloce | Pagina Migliorabile | Pagina Scadente |
| Valore in millisecondi | <= 100 ms | <= 300 ms | > 300 ms |
CLS: Cumulative Layout Shift
Il parametro CLS indica quanto è stabile una pagina durante il suo caricamento; se gli elementi della pagina si spostano in maniera “inattesa” ciò potrebbe portare ad un valore alto di CLS.
Il CLS misura la somma totale di tutti i singoli punteggi di variazione del layout per ogni variazione di layout imprevista che si verifica durante l’intera durata della pagina.
Il punteggio è indicato in valori positivi >0, più grande è il numero e più significativa è la variazione del layout nella pagina durante il caricamento.
Questo dato è importante perché la variazione degli elementi delle pagine mentre un utente sta cercando di interagire può risultare in un’esperienza utente negativa.
| CLS | Pagina Veloce | Pagina Migliorabile | Pagina Scadente |
| Valore in millisecondi | <= 0,1 | <= 0,25 | > 0,25 |
Cosa influisce negativamente sui Core Vitals
Migliorare i parametri che abbiamo visto può essere un lavoro non particolarmente facile.
Infatti nei parametri sopra riportati rientrano molti aspetti tecnici tutt’altro che facili da individuare e con i quali interagire.
Elementi tecnici di questo tipo che influenzano i CWV sono velocità del server, tecnologia di sviluppo, layout, uso di script, etc.
Vediamo in modo sintetico quali fattori incidono sui diversi parametri analizzati prima:
I fattori che possono incidere negativamente su LCP sono:
- Tempi di risposta del server troppo lunghi
- Blocchi nel rendering dovuti a javascript o CSS
- Design e tema del sito
- Librerie javascript non ottimizzate
- Contenuti multimediali non ottimizzati
- Immagini non compresse
I fattori che possono incidere negativamente su FID sono:
- Javascript non ottimizzato
- Layout di pagina troppo complessi e non ottimizzati per l’interazione
- Alto numero di richieste sul sito (traffico sul sito)
- Gestione non ottimizzata dei caricamenti asincroni
I fattori che possono incidere negativamente su CLS sono:
- Cattiva gestione degli stati CSS (ad esempio hover sulle immagini, sui pulsanti, etc) che modificano il layout durante l’interazione
- Caricamenti di contenuti in modo asincrono senza interazione con l’utente
- Utilizzo di animazioni non correttamente contestualizzate o ottimizzate
- Mancanza di attributi HTML quali ad esempio il width ed height delle immagini nei tag <img>: in questo caso il browser non riesce ad allocare correttamente gli spazi durante il rendering
Conclusioni
L’analisi dei CWV può dare indicazioni importanti sull’interazione e sull’esperienza degli utenti con il nostro sito.
Tuttavia dall’analisi e l’interpretazione di questi dati, e la definizione di azioni migliorative, può essere un task molto complesso e non alla portata di tutti.
Come abbiamo visto in questo articolo, i fattori possono essere diversi e legati a scelte anche molto articolate di design, tecnologia, server, connessione, servizi presenti sul sito, contenuti interattivi e multimediali, etc.
Per questo è sicuramente utile monitorare i dati nel modo corretto e saperli leggere, ma consigliamo vivamente di ricorrere a professionisti e web expert per interpretare questi dati e per individuare le giuste azioni correttive per migliorare queste metriche.
