Google Core Web Vitals: la nostra guida per ottimizzare il CLS

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:

• il Largest Contentful Paint (LCP), che consente di misurare le prestazioni di caricamento dell’elemento di contenuto visibile più grande all’interno della pagina, non appena un utente ci atterra;
• il First Input Delay (FID), che misura il tempo che intercorre tra la prima volta in cui un utente interagisce con una pagina e il momento in cui il browser è effettivamente in grado di rispondere;
• il Cumulative Layout Shift (CLS), che misura la stabilità visiva di una pagina.

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?

Cos’è il Cumulative Layout Shift

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”.

Il punteggio del Cumulative Layout Shift

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

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 frazione di distanza

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.

Calcolare il punteggio

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.

L’impatto del Cumulative Layout Shift sulla SEO

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.

Misurare il Cumulative Layout Shift

Il CLS può essere misurato “sul campo” con quattro strumenti:

• Rapporto sull’esperienza utente di Chrome;
• PageSpeed Insights;
• Google Search Console (con il rapporto Core Web Vitals);
• Libreria JavaScript web-vitals.

Si possono, poi, fare misurazioni in laboratorio con:

• Chrome DevTools;
• Lighthouse;
• WebPageTest.

È 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.

Ottimizzare il Cumulative Layout Shift

Le principali cause di variazione cumulativa del layout sono da ricercare nell’uso di:

• immagini o video con dimensioni impostate in modo non corretto o sconosciute;
• annunci, contenuti embedded o iframe senza dimensioni;
• contenuto iniettato dinamicamente;
• web font che nascondono il testo fino a completo download (FOIT) o usano caratteri alternativi che generano slittamenti (FOUT);
• elementi della pagina che attendono risposte di rete prima di apparire.

Risulta, quindi, essenziale mettere in pratica tecniche valide e strategie adatte a ridurre al minimo le difficoltà per l’utente, migliorandone la UX.

Le tecniche per migliorare il Cumulative Layout Shift

Le best practice da adottare per avere un basso punteggio di CLS nel tuo sito includono dei principi guida da seguire con attenzione:

• inserire sempre attributi di dimensione nelle immagini, nei video, negli iframe e nei contenuti embedded. Se un elemento viene caricato dinamicamente, riservare lo spazio richiesto con le caselle CSS. In tal modo, il browser può assegnare la corretta quantità di spazio nel documento durante il loading del contenuto e la pagina non subirà slittamenti;
• prediligere la trasformazione delle animazioni in animazioni di proprietà che attivano le modifiche al layout: tale cambiamento fornirà contesto e continuità da uno stato all’altro;
• non aggiungere mai contenuto sopra quello esistente, tranne in risposta a un’interazione dell’utente.

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.