Si chiama Cumulative Layout Shift, in italiano traducibile con variazione cumulativa del layout, ed è uno dei tre Core Web Vitals che saranno fattore di ranking su Google dal 2021, come annunciato agli inizi di giugno scorso: si tratta dunque di 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.

Che cos’è il CLS, Cumulative Layout Shift

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.

I problemi con le variazioni di layout

Il CLS si verifica quando il contenuto della pagina si sposta senza l’input volontario dell’utente o una notifica preventiva: gli elementi onpage che tendono a causare le variazioni sono caratteri, immagini, video, moduli di contatto, pulsanti e altri tipi di contenuti.

Nel caso più comune, l’utente che sta visitando la pagina è pronto a cliccare su un elemento, ma nel frattempo il caricamento ne modifica la posizione e porta la persona a “sbagliare” e cliccare su qualche altra cosa, spesso anche un annuncio o una finestra pop-up.

Gli esempi di errori con CLS

Per comprendere meglio che cos’è il Cumulative Layout Shift – e quanto fastidioso può essere – basta vedere questo breve video esplicativo di Google.

Come si nota, l’utente vuole fare clic sul bottone per variare l’ordine, ma la comparsa improvvisa e inattesa di un pop-up modifica il layout della pagina e sposta gli elementi più in basso rispetto alla posizione precedente. Quindi, il tap che prima sarebbe finito sul “no” colpisce in realtà la conferma del carrello, provocando una frustrazione (e probabilmente anche un bel po’ di noie e di irritazione).

Un altro tipo di problema può avvenire nel corso della lettura di un articolo: anziché consentire di completare l’operazione senza interruzioni, il testo o gli altri elementi cambiano e l’utente perde il riferimento visivo della sua lettura, dovendo quindi scrollare la pagina per ritrovare il paragrafo a cui era arrivato.

L’importanza del Cumulative Layout Shift per la SEO e la UX

“Il più delle volte questi tipi di esperienze sono solo fastidiosi, ma in alcuni casi possono causare danni reali”, scrivono Philip Walton e Milica Mihajlija su web.dev, aggiungendo che “un CLS basso aiuta a garantire che la pagina sia piacevole” per gli utenti.

Ridurre al minimo questo parametro è dunque importante perché le pagine che si spostano possono causare un’esperienza utente scadente, e il problema è maggiore sui dispositivi mobile, perché gli schermi degli smartphone sono più piccoli e l’impatto delle variazioni più intenso.

Un punteggio CLS scarso è indicativo di problemi di codifica che possono essere risolti.

Le cause del CLS

Secondo i Googler ci sono cinque motivi per cui si verifica una variazione cumulativa del layout:

  1. Immagini o video di dimensioni sconosciute / non impostate correttamente.
  2. Annunci, embeds e iframe senza dimensioni.
  3. Contenuto iniettato
  4. Web font che causano FOIT / FOUT
  5. Azioni in attesa di una risposta di rete prima di aggiornare DOM

Dunque, gli spostamenti inattesi possono avvenire “perché le risorse vengono caricate in modo asincrono o gli elementi DOM vengono aggiunti dinamicamente alla pagina sopra il contenuto esistente”, ma responsabili potrebbero essere anche “un’immagine o un video con dimensioni sconosciute, un carattere che diventa più grande o più piccolo del suo fallback o un annuncio o widget di terze parti che si ridimensiona dinamicamente”.

Ciò che rende questi fattori ancora più problematici è che il modo in cui un sito funziona nello sviluppo è “spesso abbastanza diverso da come gli utenti lo sperimentano”: ad esempio, i contenuti personalizzati o di terze parti potrebbero non si comportarsi allo stesso modo nello sviluppo come nella produzione, le immagini di test sono di solito già nella cache del browser dello sviluppatore e le chiamate API che vengono eseguite localmente sono a volte così veloci che il ritardo non è evidente.

Cosa misura il CLS

La metrica CLS “misura la somma totale di tutti i punteggi dei singoli spostamenti di layout per ogni spostamento imprevisto del layout che si verifica durante l’intera durata della pagina”: una variazione del layout si verifica ogni volta che un elemento visibile cambia la sua posizione da un frame al successivo.

Per fornire una buona esperienza utente, i siti dovrebbero cercare di avere un punteggio CLS inferiore a 0,1 e “per essere sicuro di raggiungere questo obiettivo per la maggior parte dei tuoi utenti, una buona soglia da misurare è il 75esimo percentile dei carichi di pagina, segmentato su dispositivi mobili e desktop”.

Le variazioni di layout sono definiti dal Layout Instability API, che riporta le voci layout-shift ogni volta che un elemento visibile con il viewport cambia la sua posizione iniziale tra due frame; tali elementi sono considerati instabili.

Come Google calcola il punteggio del Cumulative Layout Shift

Per calcolare il punteggio di variazione del layout, il browser esamina la dimensione della finestra e il movimento di elementi instabili nella finestra tra due frame renderizzati.

In termini pratico, lo score del CLS è il prodotto di due misure di quel movimento: impact fraction e distance fraction, traducibili come frazione di impatto e frazione di distanza, che prendono in esame la percentuale della schermata del browser interessata dai cambiamenti di layout.

Che cos’è la impact fraction o frazione di impatto

Il primo parametro misura l’impatto degli elementi instabili sull’area della finestra tra due frame e quindi prende in considerazione l’area della schermata del browser colpita dalle variazioni nel layout.

La frazione di impatto per il frame corrente è data dall’unione delle aree visibili di tutti gli elementi instabili per il frame precedente e per quello corrente, come una porzione dell’area totale della finestra.

La frazione di impatto

L’immagine aiuta a comprendere meglio: un elemento occupa metà della finestra in un frame; in quello successivo, l’elemento si sposta verso il basso del 25% dell’altezza della finestra. Il rettangolo rosso e tratteggiato indica l’unione dell’area visibile dell’elemento in entrambi i frame che, in questo caso, è il 75% della vista totale, quindi la sua impact fraction è 0.75.

Possiamo dire che la frazione di impatto misura lo spazio totale che l’elemento di una finestra ha occupato, dalla posizione che ha nella vista quando viene visualizzato per la prima volta fino a quella finale, al termine dell’esecuzione del rendering della pagina.

Che cos’è la distance fraction o frazione di distanza

L’altra parte dell’equazione del punteggio di CLS misura la distanza in verticale e/o in orizzontale che gli elementi instabili hanno percorso rispetto alla finestra; si calcola dividendo la distanza maggiore percorsa da un elemento instabile mosso nel riquadro per la dimensione maggiore della finestra (larghezza o altezza).

La frazione di distanza

Anche in questo caso, l’esempio visivo aiuta a comprendere meglio il valore: la dimensione della finestra più grande è l’altezza e l’elemento instabile si è spostato del 25% dell’altezza della finestra, il che rende la frazione di distanza 0,25.

Inizialmente, il CLS prendeva in considerazione solo la impact fraction, ma poi Google ha deciso di introdurre questo secondo fattore per evitare casi eccessivamente penalizzanti in cui elementi di grandi dimensioni si spostano di una piccola porzione.

Lo score definitivo del CLS

Nell’esempio dato, quindi, lo score di variazione di layout complessivo è 0.75 * 0.25 = 0.1875, dato dalla moltiplicazione tra il numero di frazione di impatto (0.75) e quello della frazione di distanza (0.25). Come detto, per Google un punteggio CLS è ritenuto buono quando è inferiore a 0,1.

Gli esempi di variazione del layout

L’approfondimento di wev.dev dimostra con altri esempi come l’aggiunta di contenuto a un elemento esistente influisca sul punteggio di spostamento del layout.

Esempi di variazione di layout

In questo caso, il pulsante “Click Me!” viene aggiunto nella parte inferiore della casella grigia con testo nero, che spinge la casella verde con testo bianco verso il basso (e parzialmente fuori dal riquadro di visualizzazione).

Anche se la casella grigia cambia dimensione, la sua posizione iniziale non cambia e quindi non considerato un elemento instabile. D’altra parte, il pulsante non era in precedenza nel DOM e quindi cambia neanche la sua posizione iniziale.

A cambiare è la posizione iniziale della casella verde: siccome è stata spostata parzialmente fuori dal viewport, l’area invisibile non viene considerata nel calcolo della frazione di impatto. Ciò significa che l’unione delle aree visibili per la casella verde in entrambi i fotogrammi (illustrata dal rettangolo rosso e tratteggiato) è uguale all’area della casella verde nel primo fotogramma, ovvero il 50% della finestra. Quindi la frazione di impatto in questo caso è 0.5.

La frazione di distanza è illustrata con la freccia viola: la casella verde si è spostata verso il basso di circa il 14% della finestra, quindi la frazione di distanza è 0.14.

Il punteggio di variazione del layout è quindi 0.5 x 0.14 = 0.07.

CLS ed elementi non fissi

Aggiungendo altri elementi non fissi la situazione ovviamente si complica. Nel primo frame sopra ci sono quattro risultati di una richiesta API per animali, ordinati in ordine alfabetico; nel secondo, vengono aggiunti più risultati all’elenco ordinato.

Il primo elemento dell’elenco (“Cat”) è stabile e non cambia la sua posizione iniziale; i nuovi elementi aggiunti all’elenco non erano in precedenza nel DOM, quindi anche le loro posizioni iniziali non cambiano, ma gli oggetti etichettati “Cane”, “Cavallo” e “Zebra” cambiano posizione di partenza e sono quindi instabili.

I rettangoli rossi e tratteggiati nell’immagine rappresentano l’unione di queste tre aree instabili prima e dopo, che in questo caso coprono circa il 38% dell’area della finestra (e frazione di impatto di 0.38). Le frecce rappresentano le distanze che gli elementi instabili hanno percorso dalle loro posizioni iniziali. L’elemento “Zebra”, rappresentato dalla freccia blu, è quello che si è spostato di più (circa il 30% dell’altezza della finestra) con la frazione di distanza in questo esempio di 0.3.

Il punteggio di variazione del layout è 0.38 x 0.3 = 0.1172.

Variazioni attese e variazioni inattese del layout

Non tutti gli shift di layout sono negativi, sottolineano nell’articolo Philip Walton e Milica Mihajlija, e molte applicazioni web dinamiche cambiano spesso la posizione iniziale degli elementi nella pagina.

Sono sbagliate e problematiche solo le variazioni di layout inattese per l’utente, mentre generalmente vanno bene i cambiamenti che si verificano in risposta alle interazioni dell’utente (che fa clic su un link, preme un pulsante, digita all’interno di una casella di ricerca eccetera), purché lo spostamento avvenga in modo rapido e conseguenziale all’interazione, rendendo chiaro la relazione causa-effetto per l’utente.

In caso contrario – se, ad esempio, un’interazione dell’utente innesca una richiesta di rete che potrebbe richiedere del tempo per essere completata – sarebbe meglio creare immediatamente un po’ di spazio e mostrare un indicatore di caricamento per evitare uno spiacevole spostamento del layout al completamento della richiesta. Se l’utente non si rende conto che qualcosa si sta caricando o non ha idea di quando la risorsa sarà pronta, potrebbe provare a fare clic su qualcos’altro durante l’attesa, qualcosa che potrebbe poi spostarsi al termine della prima azione avviata.

Secondo i Googler, le animazioni e le transizioni – se ben eseguite – “sono un ottimo modo per aggiornare il contenuto della pagina senza sorprendere l’utente”: il contenuto che si sposta improvvisamente e inaspettatamente sulla pagina crea quasi sempre una brutta esperienza per l’utente, ma i contenuti che si spostano gradualmente e naturalmente da una posizione all’altra possono invece aiutare l’utente a capire meglio cosa sta succedendo e guidarlo tra i cambiamenti di stato.

Come misurare il Cumulative Layout Shift del sito: field tools e lab test

Veniamo ora ad alcune indicazioni pratiche e utili per verificare le performance del nostro sito e delle nostre pagine: il CLS può essere misurato in laboratorio o sul campo ed è disponibile in vari strumenti.

Tra i field tools ci sono Chrome User Experience Report, PageSpeed Insights e la Google Search Console con il nuovo rapporto Core Web Vitals.

Tra i lab tools, invece, abbiamo Chrome DevTools, Lighthouse e WebPageTest. Questi test in laboratorio simulano il comportamento del sito quando un utente reale scarica una pagina Web: Google utilizza uno smartphone Moto G4 per generare il punteggio CLS all’interno dell’ambiente di laboratorio.

Bisogna però ricordare che gli strumenti di laboratorio – che sono ideali per capire come può essere eseguito un layout prima di inviarlo agli utenti e offrono agli editori l’opportunità di testare un layout per scoprire eventuali problemi in anticipo – in genere caricano le pagine in un ambiente sintetico e quindi sono in grado di misurare solo i cambiamenti di layout che si verificano durante il caricamento della pagina. Di conseguenza, i valori CLS per una determinata pagina riportati da tali tools potrebbero essere inferiori a quelli che gli utenti reali sperimentano sul campo.

Il modo più semplice per misurare CLS (e tutte le metriche dei campi di Web Vitals) è con la library JavaScript web-vitals, che avvolge tutta la complessità della misurazione manuale di CLS in un’unica funzione.

Come ottimizzare e migliorare CLS

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

  • Includere sempre gli attributi di dimensione sulle immagini e sugli elementi video, oppure riservare lo spazio richiesto con qualcosa come le caselle CSS.

Questo approccio garantisce che il browser possa allocare la corretta quantità di spazio nel documento durante il caricamento dell’immagine.

Inoltre, è possibile anche utilizzare unsized-media feature policy per forzare questo comportamento nei browser che supportano feature policies.

  • Non inserire mai contenuti al di sopra di quelli esistenti, tranne in risposta a un’interazione dell’utente. Ciò garantisce che siano previsti eventuali cambiamenti di layout.
  • Privilegiare la trasformazione delle animazioni in animazioni di proprietà che attivano le modifiche al layout. Animare le transizioni fornirà contesto e continuità da uno stato all’altro.