Cumulative Layout Shift

Cos'è il CLS?

E' un nuovo indicatore usato da Google come fattore di ranking. La sigla CLS vuol dire Cumulative Layout Shift. In italiano la posso tradurre in variazione cumulativa del layout.

A cosa serve?

Questa metrica misura lo spostamento del layout in una pagina (stabilità visiva) e, indirettamente, fornisce una stima della user experience.

Nota. E' uno dei Core Web Vital (Elementi essenziali) usati dal motore di ricerca.

Come si misura il CLS

Quando un elemento visibile cambia la posizione, si verifica uno spostamento del layout (layout shift).

La metrica CLS assegna un punteggio a ogni spostamento.

Poi somma tutti i singoli spostamenti in un risultato cumulativo (cumulative).

L'indicatore CLS varia da 0 a 1

• 0 indica una user experience positiva (good Ux)
• 1 indica una user experience negativa (bad Ux)

Nota. In genere si misura il CLS sul 75° percentile dei caricamenti di pagina. Fino a 0.1 è considerato un buon risultato. Oltre lo 0.20-0.25 Google lo considera scarso.

Un esempio pratico

Se in una pagina si presenta uno spostamento improvviso di un elemento (immagine, testo, div, video, pulsanti, pop-up, ecc.) non voluto dall'utente, la navigazione diventa più difficile e stancante per l'utente.

Inoltre, l'utente potrebbe cliccare per sbaglio su un elemento invece che su un altro.

E' sicuramente una esperienza negativa (negative UX).

Nota. Non tutti gli spostamenti del layout sono comunque negativi. Se un elemento cambia la sua posizione iniziale per un'azione voluta dall'utente (es. apertura di un menu a tendina) l'evento non penalizza il CLS. Sono penalizzanti solo le variazioni inattese dall'utente. Deve però essere chiara la reazione di causa-effetto tra l'azione dell'utente e la risposta della pagina web. E soprattutto veloce.

Il caricamento della pagina non è considerato

Sono esclusi dal CLS gli spostamenti del layout della pagina quando è ancora in fase di caricamento.

Quando una pagina "responsive" si adatta allo schermo del device usato dall'utente.

Pertanto, un lasso di tempo iniziale non viene considerato nel computo del CLS.

E' quindi molto importante che la pagina sia veloce a caricarsi.

Esempio. Se una pagina si carica lentamente, è probabile che gli spostamenti di adattamento siano considerati spostamenti del layout non volontari, penalizzando la pagina.

Si tratta comunque di una condizione necessaria ma non sufficiente per ottimizzare il CLS.

L'ottimizzazione del CLS richiede che tutti gli elementi siano stabili durante la lettura della pagina.

Le cause degli spostamenti inattesi del layout

Le cause dell'instabilità del layout sono molteplici

• Elementi asincroni
  Alcuni elementi della pagina si caricano in modo asincrono (es. pubblicità, widget, embed, script di terze parti, ecc). Quando l'elemento viene dinamicamente caricato sulla pagina, il layout subisce uno spostamento. Spesso questi elementi, specie se di terze parti, sono caricati molto in ritardo rispetto al caricamento della pagina.
• Immagini senza dimensioni
  Quando un'immagine è richiamata dal documento html con il tag <img> senza alcuna indicazione sulla larghezza e l'altezza, con dimensioni sconosciute, il browser la carica con dimensioni standard, poi adatta le dimensioni quando recepisce le informazioni sul file multimediale. Anche questo causa uno spostamento del layout.

  Nota. Lo stesso problema si verifica con gli iframe e i video senza dimensioni esplicite.

• Font
  Alcuni font impiegano del tempo per il caricamento e la visualizzazione. Ad esempio, le notazioni matematiche importate con una libreria (es. nel mio caso uso molto Mathjax).
• Contenuto iniettato
  Quando un contenuto (testo o immagine) viene iniettato in un documento dopo il caricamento della pagina, a seguito di un evento, si verifica uno spostamento del layout. Se l'evento non dipende dalla volontà dell'utente, è considerato un segnale negativo.

E così via.