Quando la Google Page Experience entrerà a regime, da maggio 2021, la UX sarà al centro delle metriche di ranking con i Core Web Vitals, che analizzeranno specifiche funzionalità delle pagine web.
È quindi essenziale prestare la massima attenzione alla qualità di navigazione che si garantisce all’utente: tali metriche, ragionevolmente, giocheranno un ruolo importante e strategico nel posizionamento dei siti web su Google.
La SEO-UX, che vede l’esperienza utente integrarsi con la SEO, costituisce una vera e propria rivoluzione per le attività di ottimizzazione per i motori di ricerca!
Il nuovo algoritmo di Google terrà in considerazione:
Analizziamo insieme il Cumulative Layout Shift: in che modo è possibile ottimizzarlo per rendere il nostro sito più performante e garantire un’esperienza utente il più positiva possibile?
Il Cumulative Layout Shift (CLS ovvero la variazione cumulativa del layout) misura la stabilità visiva: rileva, infatti, tutti i movimenti (e le conseguenti modifiche) della struttura grafica di una pagina web, per ogni spostamento imprevisto che si verifica in fase di caricamento.
Come riportato da web.dev, sito dedicato ai webmaster, il CLS per Google è:
“una metrica incentrata sull’esperienza utente molto importante perché aiuta a quantificare la frequenza con cui i visitatori riscontrano spostamenti imprevisti del layout: un CLS basso garantisce che la pagina è piacevole”.
Per comprendere concretamente di cosa stiamo parlando, basterà pensare a quanto sia fastidioso voler cliccare su un contenuto o un collegamento di una pagina e vedere che si sposta più volte. Questo accade perché è instabile e, durante il caricamento, si sta ancora posizionando nel riquadro di visualizzazione.
Google chiarisce che non tutti i cambiamenti di layout sono da considerarsi negativi: “non sono positivi solo se l’utente non se li aspetta. Quelli che si verificano in risposta alle interazioni dell’utente (clic su un collegamento, pressione di un pulsante, digitazione in una casella di ricerca e simili) vanno generalmente bene, purché lo spostamento avvenga in modo rapido e consequenziale, rendendo chiara la relazione causa-effetto”.
Per fornire una buona esperienza utente, i siti dovrebbero cercare di avere un punteggio CLS inferiore a 0,1: una soglia discreta da misurare è il 75° percentile dei caricamenti di pagina su dispositivi mobili e desktop.
Mentre per gli altri due Core Web Vitals, l’unità di misura di riferimento è il tempo, per il CLS è lo spazio. Quello stabilito da Google è un punteggio specifico che identifica il livello delle variazioni di layout nel corso del caricamento della pagina, che possono compromettere la user experience. Per calcolare il punteggio del CLS, Google moltiplica due misure di quel movimento: la frazione di impatto e la frazione di distanza, che prendono in esame la percentuale della schermata del browser interessata dai cambiamenti di layout.
La frazione di impatto considera l’area della schermata del browser interessata dalle variazioni nel layout: misura quanto gli elementi instabili colpiscano lo spazio della finestra tra due frame, dalla posizione che hanno quando vengono visualizzati per la prima volta fino a quella in cui si vedranno al termine dell’esecuzione del rendering della pagina.
L’unione delle aree visibili di tutti gli elementi instabili per il frame precedente e per quello corrente, come una porzione dell’area totale del riquadro di visualizzazione, costituisce la frazione di impatto per il frame corrente.
Come si può vedere dall’esempio, un elemento occupa il 50% della finestra in un frame e, in quello seguente, si sposta verso il basso del 25%. La parte tratteggiata in rosso indica l’unione dell’area visibile dell’elemento nei due frame che, in questo caso, occupa il 75% dello spazio totale: la frazione di impatto è 0,75.
La seconda misura importante per il punteggio di CLS rileva la distanza (in verticale o in orizzontale) percorsa dagli elementi instabili rispetto al riquadro di visualizzazione.
Si calcola dividendo la distanza maggiore che un elemento instabile, mosso nella finestra, ha percorso per la dimensione maggiore del riquadro (larghezza o altezza).
L’esempio mostra bene che la dimensione più grande della finestra è l’altezza e l’elemento instabile si è spostato del 25%: la frazione di distanza è 0,25.
Una volta comprese le due frazioni che Google prende in considerazione, il CLS emerge dal seguente calcolo:
frazione di impatto × frazione di distanza = punteggio di variazione del layout
Tenendo in considerazione i valori emersi dagli esempi precedenti, il calcolo è presto fatto:
0,75 × 0,25 = 0,1875
Dovendo il punteggio essere inferiore a 0,1, non centra l’obiettivo ed è da migliorare. Google, inoltre, somma tutte le variazioni impreviste del layout (dovute, per esempio, a inserimenti di contenuti, quali pulsanti, banner e simili): più elementi instabili ci sono sulla tua pagina che si spostano nel riquadro di visualizzazione, peggiore sarà il tuo punteggio.
Un basso punteggio di variazione del layout aiuta a garantire che la UX sia positiva su dispositivi mobili e desktop e che gli utenti non si sentano frustrati dalla tua pagina web, non facciano clic/tap accidentalmente, non vengano indirizzati a un’altra pagina o, peggio ancora, non effettuino erroneamente un acquisto.
Una buona esperienza utente ci aiuta a raggiungere tutti gli obiettivi che ci poniamo nella SEO: ranking, traffico, conversioni.
Secondo uno studio di Screaming Frog che esamina il CLS, solo il 46% degli URL per dispositivi mobili e il 47% di quelli per desktop hanno ottenuto punteggi inferiori a 0,1. Il valore medio è stato di 0,29 sui primi e di 0,25 sui secondi. È importante notare come sia anche emerso un calo nella percentuale di URL con un buon CLS man mano che ci si spostava in basso nelle posizioni della SERP.
Il CLS può essere misurato “sul campo” con quattro strumenti:
Si possono, poi, fare misurazioni in laboratorio con:
È opportuno precisare che i dati acquisiti in laboratorio potrebbero non essere affidabili quanto quelli reali, perché i tool misurano solo le variazioni di layout che si verificano durante il loading della pagina: i valori di CLS possono, quindi, essere inferiori a quelli che gli utenti reali sperimentano sul campo. Il modo più immediato (e tecnico) di misurazione è la libreria JavaScript web-vitals: ricorrendo alla funzione getCLS(), viene restituito il valore CLS per la pagina corrente che, poi, è inviato alla funzione onReport() insieme a tutte le voci di prestazione utilizzate nel calcolo della metrica.
Le principali cause di variazione cumulativa del layout sono da ricercare nell’uso di:
Risulta, quindi, essenziale mettere in pratica tecniche valide e strategie adatte a ridurre al minimo le difficoltà per l’utente, migliorandone la UX.
Le best practice da adottare per avere un basso punteggio di CLS nel tuo sito includono dei principi guida da seguire con attenzione:
Il CLS è una metrica tenuta in grande considerazione da Google. Garantire al tuo sito di averne un basso punteggio è fondamentale per una buona user experience e per mantenere un efficace posizionamento. Per misurarlo e migliorarlo sono necessarie considerevoli competenze tecniche. Se vuoi verificare il tuo punteggio e hai bisogno di assistenza in fase di ottimizzazione contatta un’agenzia SEO per valutare come procedere.