Tempo di lettura: 6 minuti

Si chiama Cumulative Layout Shift (CLS), in italiano traducibile con variazione cumulativa del layout, ed è uno dei tre Core Web Vitals che saranno fattore di ranking su Google dal 2021. Praticamente il Cumulative Layout Shift è un elemento con cui fare i conti per avere un sito performante e garantire una user experience positiva, rispettando le indicazioni e i desideri del motore di ricerca. Diamo quindi uno sguardo più approfondito a questa metrica, per capire meglio cos’è, come si misura e come possiamo ottimizzarla.

La User Experience è un fattore di ranking sempre più rilevante (ne abbiamo parlato anche in questo articolo), per questa ragione è bene conoscere cosa sono queste metriche e come possiamo migliorarle, iniziando proprio dal Cumulative Layout Shift.

Per capire di cosa si tratta senza entrare troppo in dettagli tecnici facciamo un esempio: ti è mai capitato di leggere un articolo online ed improvvisamente qualcosa cambia sulla pagina? Senza preavviso, il testo si sposta e hai perso il segno della lettura. O ancora peggio: stai per toccare un collegamento o un pulsante, ma nell’istante in cui fai clic il collegamento si sposta e finisci per fare clic su qualcos’altro, magari (spesso) su un banner pubblicitario!

Penso che a tutti sia capitata una situazione simile a quella appena descritta. Bene, il Cumulative Layout Shift (CLS) è una metrica di Google che misura la stabilità visiva attraverso l’analisi di un evento dell’esperienza utente, ovvero lo spostamento imprevisto degli elementi della pagina Web mentre la stessa è ancora in fase di caricamento.

Al contrario degli altri due Core Web Vitals – Largest Contentful Paint e First Input Delay – la sua unità di misura di riferimento non è il tempo, ma lo spazio, e Google ha creato un punteggio specifico per identificare il livello delle variazioni di layout nel corso del caricamento della pagina, che possono compromettere la User Experience.

Il più delle volte questo tipo di esperienze sono solo fastidiose, ma in alcuni casi possono causare danni reali.
Per comprendere meglio che cos’è il Cumulative Layout Shift – e quanto fastidioso può essere – basta vedere questo breve video esplicativo di Google.

Il movimento imprevisto del contenuto della pagina di solito si verifica perché le risorse vengono caricate in modo asincrono o gli elementi DOM vengono aggiunti dinamicamente alla pagina sopra il contenuto esistente. Il colpevole potrebbe essere un’immagine o un video con dimensioni sconosciute, un carattere che viene visualizzato più grande o più piccolo del suo fallback o un annuncio o un widget di terze parti che si ridimensiona dinamicamente.

Ciò che rende questo problema ancora più problematico è che il modo in cui un sito funziona in fase di sviluppo è spesso molto diverso da come lo sperimentano gli utenti. I contenuti personalizzati o di terze parti spesso non si comportano allo stesso modo nello sviluppo come nella produzione, le immagini di prova sono spesso già nella cache del browser dello sviluppatore e le chiamate API eseguite localmente sono spesso così veloci che il ritardo non è evidente.

La metrica Cumulative Layout Shift (CLS) ti aiuta a risolvere questo problema misurando la frequenza con cui si verifica per gli utenti reali.

Perché i SEO dovrebbero preoccuparsi di Cumulative Layout Shift (CLS)?

L’esperienza utente è stata a lungo un fattore chiave di ranking per la ricerca, ma è destinata a diventarlo ancora di più con l’introduzione di Core Web Vitals da parte di Google. Detto questo, Cumulative Layout Shift (CLS) non dovrebbe essere considerato la più importante delle nuove metriche. Tutti e tre i parametri vitali sono attualmente utilizzati in Lighthouse, che fornisce un suggerimento sulla loro importanza relativa l’uno per l’altro:

Perché i SEO dovrebbero preoccuparsi di CLS

Perché i SEO dovrebbero preoccuparsi di Cumulative Layout Shift (CLS)

Con un’importanza ponderata di solo il 5% in Lighthouse, è altamente improbabile che CLS sarà su un piano di parità con Largest Contentful Paint (LCP) e First Input Delay (FID), che misurano rispettivamente le prestazioni di caricamento e l’interattività.

Questa non è una scusa per ignorare Cumulative Layout Shift (CLS). È ancora considerato “core” e influenzerà il posizionamento delle parole chiave una volta entrato in vigore nel gennaio 2021. I SEO dovrebbero prepararsi eseguendo la diagnostica sugli strumenti sopra menzionati, identificando i problemi e implementando soluzioni consigliate per ottenere buoni punteggi Cumulative Layout Shift per i loro siti.

Il posto migliore per iniziare è in Chrome DevTools: vai nel pannello delle prestazioni, quindi apri la riga Esperienza. Una volta qui, troverai i turni di layout classificati in base al punteggio del turno e alle aree interessate.

Cos’è il Cumulative Layout Shift (CLS)?

Bene, andiamo al sodo.
Abbiamo spiegato velocemente cosa è il Cumulative Layout Shift (CLS) di Google ed abbiamo spiegato l’impatto che ha sulla SEO e quindi sul posizionamento di un sito web, adesso analizziamo meglio di cosa si tratta, come misurarlo, del suo impatto sulla progettazione di un sito web professionale e come migliorarlo.

Cumulative Layout Shift (CLS) misura la somma totale di tutti i singoli punteggi di spostamento del layout per ogni spostamento imprevisto del layout che si verifica durante l’intera durata della pagina.

Uno spostamento del layout si verifica ogni volta che un elemento visibile cambia la sua posizione da un fotogramma renderizzato a quello successivo. (Vedi sotto per i dettagli su come vengono calcolati i punteggi dei turni di layout individuali.)

Punteggi Google Cumulative Layout Shift

Punteggi Google Cumulative Layout Shift (CLS)

Cos’è un buon punteggio Cumulative Layout Shift (CLS)?

Per fornire una buona esperienza utente, i siti dovrebbero sforzarsi di avere un punteggio Cumulative Layout Shift inferiore a 0,1. Per assicurarti di raggiungere questo obiettivo per la maggior parte dei tuoi utenti, una buona soglia da misurare è il 75 ° percentile dei caricamenti di pagina, segmentato tra dispositivi mobili e desktop.

Come misurare Cumulative Layout Shift (CLS)

Il Cumulative Layout Shift (CLS) può essere misurato in laboratorio o sul campo ed è disponibile nei seguenti strumenti:

Strumenti sul campo

Strumenti di laboratorio

Come migliorare Cumulative Layout Shift (CLS)

Per la maggior parte dei siti Web, è possibile evitare tutti i cambiamenti imprevisti del layout attenendosi ad alcuni principi guida:

  • Includi sempre attributi di dimensione sulle immagini e sugli elementi video, oppure prenota in altro modo lo spazio richiesto con qualcosa come le caselle delle proporzioni CSS. Questo approccio garantisce che il browser possa allocare la quantità corretta di spazio nel documento durante il caricamento dell’immagine.
    Gli elementi reattivi devono avere le stesse proporzioni per ogni finestra: usa aspectratiocalculator.com per risolverli.
  • Non inserire mai il contenuto sopra il contenuto esistente, tranne in risposta a un’interazione dell’utente. Ciò garantisce che tutti i cambiamenti di layout che si verificano siano previsti.
  • Preferisci le animazioni di trasformazione alle animazioni delle proprietà che attivano le modifiche al layout. Animare le transizioni in modo da fornire contesto e continuità da stato a stato.
  • Quando si utilizzano caratteri personalizzati, assicurarsi di includere i valori di visualizzazione dei caratteri (auto, swap, block, fallback e facoltativo). In alternativa, è possibile utilizzare rel = “preload” per caricare un font prima che un albero DOM venga costruito e renderizzato.
  • Assegna immagini segnaposto a spazi pubblicitari comprimibili sulle tue pagine web. Ciò riserva lo spazio per quando l’annuncio viene caricato ed evita lo spostamento del layout per quell’elemento.
  • Usa un segnaposto o un’interfaccia utente scheletrica per riservare spazio per un DIC, in modo che non attivi lo spostamento del contenuto della pagina una volta caricato. Per evitare del tutto ciò, cerca di evitare di inserire contenuto dinamico sopra il contenuto esistente se non quando necessario per l’interazione dell’utente.

Conclusioni

Sebbene Cumulative Layout Shift non sia il più importante dei principali Core Web Vitals di Google, sarà comunque una caratteristica chiave per il ranking dal 2021 in poi. Come cambieranno le cose? Bene, è probabile che SEO e designer lavorino più strettamente insieme fin dall’inizio, assicurando che gli elementi della pagina non causino salti improvvisi durante il caricamento. Con una rinnovata attenzione al Cumulative Layout Shift possono migliorare sia l’UX dei loro siti che la possibilità di classificarsi per le parole chiave.

Se hai ancora dei dubbi non esitare a contattarci.


Per continuare la lettura

Icon 114 - Studio Fabran

Iscriviti alla NewsLetter

Vuoi ricevere i miei ultimi articoli comodamente nella tua email?
È gratis!
Oltre 700 persone lo stanno già facendo!

Iscriviti alla Newsletter

Niente spam o pubblicità, solo i migliori articoli del nostro blog pensati per te.
Che aspetti? Iscriviti ora ed unisciti agli altri 546 iscritti.
Useremo i tuoi dati esclusivamente per l'invio di articoli, guide ed approfondimenti. Metti una spunta se sei d'accordo al trattamento dei dati personali (artt. 13 e 14 del GDPR - Regolamento UE 2016/679). Per maggiori informazioni leggi la nostra politica sulla privacy.