Tante sono le metriche da considerare nel valutare la qualità di un sito e ora se ne aggiungono di nuove: i Web Vitals di Google.
Come suggerisce il loro nome, si tratta di elementi vitali che, se curati, garantiscono due risultati:
- una buona user experience,
- un miglior posizionamento nei risultati dei motori di ricerca.
SEO e ranking: ma non bastava avere un sito veloce?
Avere un sito veloce nel caricamento è ancora un elemento SEO importante. Giusto per darvi un’idea, Google ha riscontrato che velocizzare un sito porta a:
- avere più pagine visitate,
- una frequenza di rimbalzo (bounce rate) più bassa
- più conversioni,
- più processi d’acquisto portati a termine.
Lo stesso Google si è però accorto che una buona esperienza d’uso va ben oltre l’accesso rapido alle informazioni presenti e che ci sono altri elementi che incidono, come la chiarezza del layout scelto per il sito o l’interattività degli elementi presenti nella singola pagina web.
Insomma, di dettagli da valutare ce ne sarebbero parecchi! Ma dato che non tutti i proprietari dei siti sono esperti SEO, Google ha selezionato tre metriche che incidono sulle performance di un sito e sul suo posizionamento. Sono i Core Web Vitals.
I Core Web Vitals
I Core Web Vitals riguardano tutte le pagine web e sono 3:
- Largest Contentful Paint (LCP), che misura il tempo di rendering (caricamento e visualizzazione) dell’elemento più grande visibile all’interno della pagina web;
- First Input Delay (FID), che misura il tempo trascorso tra la prima interazione dell’utente con la pagina e la risposta del sito;
- Cumulative Layout Shift (CLS), che misura la stabilità visuale.
Secondo gli standard di Google, ciascuno di essi può ottenere una delle seguenti valutazioni possibili:
- buono,
- miglioramenti necessari,
- fallito.
Le tre metriche sono valutate sia per la versione desktop di un sito, sia per la versione mobile. Ricordiamo comunque che Google è ora pressoché “Mobile First”, quindi le metriche mobile sono molto più importanti di quelle desktop.
Prima di capire come monitorarle, conosciamole meglio una per una.
Largest Contentful Paint (LCP)
Traducibile in “visualizzazione elemento di maggiori dimensioni”, il Largest Contentful Paint (LCP) misura il tempo impiegato per caricare il contenuto di dimensioni maggiori nell’area della pagina web a seguito della richiesta dell’utente.
Di solito si tratta di un video o un’immagine, ma potrebbe anche essere un testo.
Come capire se il mio LCP è buono?
L’LCP è buono quando il tempo di caricamento è inferiore a 2,5 secondi. Sopra i 4 secondi, la metrica è considerata fallita. Tutto ciò che sta nel mezzo necessita di miglioramenti.
Come migliorare l’LCP
È importante intervenire sulle cause più frequenti che portano a un LCP basso. Secondo Google sono:
- tempi di risposta del server lenti,
- JavaScript e CSS che bloccano il caricamento,
- tempi di caricamento dei contenuti lenti,
- rendering lato client.
First Input Delay (FID)
Il First Input Delay (FID), o “ritardo prima interazione”, valuta la reattività del sito.
In particolare, misura il tempo tra la prima interazione dell’utente e il momento in cui il sito risponde all’interazione. Non sono compresi nel calcolo né il tempo di elaborazione dell’interazione né il tempo impiegato dal browser per aggiornare la finestra.
Viene misurata solo la prima interazione perché è quella che, più di tutte, determina l’impressione che l’utente si farà del sito ed è dunque la più importante.
Non tutte le interazioni vengono però considerate valide ai fini del FID, che si concentra su clic, tocchi ed eventuali tasti premuti.
Come capire se il mio FID è buono?
Il tempo misurato dal FID è espresso in millisecondi. Più il FID è basso, minore è l’attesa dell’utente e migliore sarà la sua user experience. Più sarà alto, maggiore sarà il fastidio dell’utente e più alte saranno le probabilità che questi abbandoni il sito.
In linea di massima, è bene che il FDI sia sempre inferiore a 100 millisecondi. Superati i 300 sei nei guai.
Come migliorare l’FID
I ritardi si generano per lo più quando il browser è impegnato in altre attività, prima fra tutte l’esecuzione di JavaScript, e non riesce a rispondere rapidamente all’azione compiuta dall’utente.
Puoi migliorare l’FDI riducendo:
- l’impatto del codice di terze parti,
- il tempo di esecuzione di JavaScript,
- il lavoro sul thread (operazione) principale,
- il numero di richieste,
- le dimensioni di trasferimento.
Cumulative Layout Shift (CLS)
Il Cumulative Layout Shift (CLS), o “variazione cumulativa del layout”, misura la stabilità visiva della pagina, ovvero quanto i suoi elementi (immagini, video, testi, pulsanti, moduli di contatto, ecc.) si spostino nel corso del caricamento, senza che l’utente l’abbia chiesto.
Uno spostamento non voluto potrebbe portare l’utente a cliccare su elementi che non sono di suo interesse, magari addirittura un annuncio pubblicitario, rovinando la sua esperienza d’uso.
Sarà capitato anche a te di entrare in un sito, iniziare a leggere un articolo e vedere improvvisamente che il testo si sposta a causa del caricamento della pagina, costringendoti a ritrovare il punto in cui eri arrivato. Fastidioso, non trovi?
Questo genere di inconvenienti può però causare anche danni ben peggiori di una scocciatura.
Il sito Web.dev ha pubblicato un articolo dedicato al CLS in cui mostra il video di una procedura di conferma di un acquisto.
Nel video si vede bene come l’utente voglia abbandonare la procedura, ma proprio nel momento in cui sta per cliccare su “Go back”, nella finestra compare un nuovo elemento che sposta il pulsante e il click finisce su quello di conferma, concludendo l’ordine.
Come capire se il mio CLS è buono?
Il CLS viene calcolato dal browser esaminando la dimensione della finestra e il movimento degli elementi al suo interno, tra due frame renderizzati.
Vi sono due misure di movimento: impact fraction e distance fraction.
L’impact fraction misura lo spazio totale occupato dall’elemento che si è spostato dalla sua posizione originaria a quella finale.
La distance fraction misura la distanza in verticale e/o in orizzontale che l’elemento ha percorso spostandosi.
Il valore del CLS è dato dal totale di tutti i punteggi di tutti gli elementi di una pagina a partire dalle due misure appena viste.
Un punteggio inferiore a 0.1 indica un buon CL, se superiore a 0.25 richiede miglioramenti.
Come migliorare il CLS
Le cause di un basso CLS sono molteplici, tra le quali:
- immagini o video con dimensioni sconosciute o non impostate correttamente,
- annunci, embeds o iframe anch’essi senza dimensioni,
- contenuti dinamici iniettati,
- Web font che non si caricano correttamente.
Per quanto riguarda le immagini e i video, è bene:
- impostare gli attributi di dimensione sulle immagini e sui elementi video,
- evitare di inserire contenuti che si sovrappongono a quelli già esistenti, a meno che non sia in risposta a un’interazione dell’utente,
- privilegiare le animazioni di proprietà che attivano le modifiche al layout.
Come misurare i Web Vitals
I Web Vitals sono monitorabili attraverso gli strumenti di Google, e non solo.
Qui di seguito i principali mezzi con cui puoi tenerli sott’occhio.
Search Console
In Google Search Console c’è una funzione che permette di consultare il report Core Web Vitals relativo all’intero sito, sia desktop che mobile.
Alcuni URL potrebbero non comparire, se i dati dovessero essere insufficienti.
PageSpeed Insight
Pagespeed Insight registra i dati sia della versione desktop del sito, sia della versione mobile. A differenza di Search Console, lo fa pagina per pagina.
Tag Manager
Con Google Tag Manager è possibile misurare le metriche in relazione all’effettiva navigazione degli utenti. È anche possibile inviare i dati dei tre Core Web Vitals direttamente a Google Analytics.
Google Data Studio
Google Data Studio ti permette di visualizzare i Core Web Vitals a partire dai dati di Chrome UX Report (CrUX) utilizzando un template precostruito.
Cos’è il Google Chrome User Experience Report
Il Google Chrome UX Report è un enorme database che raccoglie i dati delle esperienze di navigazione di milioni di utenti Chrome. Tutti questi dati sono disponibili su PageSpeed Insight, sulla dashboard CrUX in Data Studio e anche nel servizio BigQuery di Google.
L’estensione per Chrome “Web Vitals”
Questa estensione dedicata permette di accedere ai Web Vitals nel momento stesso in cui viene caricata. Permette anche di risolvere eventuali problemi di FID e CLS che venissero evidenziati.
Dati di laboratori e dati sul campo
In un articolo pubblicato sul proprio blog, SeoZoom pone l’attenzione su un dettaglio rilevante nella comprensione dei Web Vitals: la differenza tra lab data, dati di laboratorio, e field data, dati sul campo.
Quello che succede è che gli strumenti che monitorano i Web Vitals non si limitano a raccogliere solo i dati legati all’effettiva user experience degli utenti, ma anche dati ipotetici. Questo avviene perché non tutti gli url potrebbero portare sufficienti informazioni sul comportamento reale delle persone.
I dati sul campo sono i dati che raccontano cosa hanno concretamente fatto gli utenti durante la navigazione. I dati di laboratorio invece sono raccolti tramite API del browser ed elaborati usando «approssimazioni matematiche» che «simulano il comportamento degli utenti».
L’idea che il tuo sito possa essere esaminato anche in base a dati non reali non ti deve preoccupare. Google non sembra al momento aver intenzione di inserire i dati di laboratorio dei Web Vitals nella valutazione della Page Experience.
Se non sai di cosa si tratta, ecco la definizione ufficiale:
«Page Experience misura il grado di apprezzamento di un sito da parte degli utenti. L’ottimizzazione di un sito consiste nel renderlo più fruibile incrociando le aspettative degli altri utenti.»
Il contenuto è ancora il re
I Core Web Vitals ti invitano a prestare più attenzione all’usabilità, ma sappi che questa non è sufficiente e che i contenuti fanno ancora un’enorme differenza.
Ogni volta in cui un utente entra nel tuo sito, lo fa perché cerca delle informazioni. Più sei in grado di offrire le risposte giuste alle sue esigenze (sotto forma di testi, immagini, video o altro) e più l’utente si troverà soddisfatto.
Un sito con una buona struttura, senza malfunzionamenti e che si carica velocemente è un buon punto di partenza, ma senza contenuti studiati ad hoc risulta inutile.
D’altro canto, un sito con degli ottimi contenuti ma difficile da navigare, o lento a caricarsi, scoraggia l’utente e lo fa scappare via.
In sostanza, la qualità dell’esperienza che l’utente vive nel momento in cui visita le tue pagine web deve essere al centro dei tuoi pensieri, non solo perché influenza il posizionamento SEO del tuo sito, ma anche perché incide sulle probabilità che l’utente compia un’azione cruciale per la tua attività, come acquistare un prodotto, contattarti o altro.
Se vuoi migliorare l’usabilità del tuo sito e renderlo adeguato agli standard dei Web Vitals, parlane con noi!
"*" indica i campi obbligatori
