Cumulative Layout Shift (CLS)

Milica Mihajlija

Philip Walton

Cambiamenti di layout imprevisti possono disturbare in molti modi l'esperienza utente, ad esempio perdendo il punto di lettura durante la lettura se il testo si sposta improvvisamente o facendo clic sul link o sul pulsante sbagliato. In alcuni casi, questo può causare gravi danni.

Il movimento imprevisto dei contenuti della pagina si verifica in genere quando le risorse vengono caricate in modo asincrono o quando gli elementi DOM vengono aggiunti dinamicamente alla pagina prima dei contenuti esistenti. La causa dei cambiamenti di layout potrebbe essere rappresentata da immagini o video con dimensioni sconosciute, caratteri che vengono visualizzati in dimensioni maggiori o minori rispetto al valore di riserva iniziale o annunci o widget di terze parti che si ridimensionano dinamicamente.

Le differenze tra il funzionamento di un sito nello sviluppo e l'esperienza degli utenti lo peggiorano. Ad esempio:

• I contenuti personalizzati o di terze parti spesso si comportano in modo diverso a livello di sviluppo e di produzione.
• Le immagini di test sono spesso già presenti nella cache del browser dello sviluppatore, ma richiedono più tempo per essere caricate dall'utente finale.
• Le chiamate API eseguite localmente sono spesso così veloci che i ritardi impercettibili durante lo sviluppo possono diventare sostanziali in produzione.

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

Che cos'è il CLS?

La metrica CLS misura la maggior quantità di punteggi di variazione del layout per ogni variazione del layout inaspettata che si verifica durante l'intero ciclo di vita di una pagina.

Si verifica una variazione del layout ogni volta che un elemento visibile cambia la sua posizione da un frame visualizzato all'altro. (I dettagli su come vengono calcolati i singoli punteggi delle variazioni di layout sono riportati più avanti in questa guida).

Una serie di cambiamenti di layout, nota come finestra di sessione, si verifica quando uno o più singoli cambiamenti di layout si verificano in rapida successione con meno di 1 secondo tra ogni cambiamento e un massimo di 5 secondi per la durata totale della finestra.

La serie più grande è la finestra della sessione con il punteggio cumulativo massimo di tutte le variazioni del layout al suo interno.

Che cos'è un buon punteggio CLS?

Per offrire una buona esperienza utente, i siti dovrebbero fare in modo di avere un punteggio CLS pari o inferiore a 0,1. Per assicurarti di raggiungere questo target per la maggior parte degli utenti, una buona soglia da misurare è il 75° percentile dei caricamenti delle pagine, segmentato tra dispositivi mobili e computer.

Per scoprire di più sulla ricerca e sulla metodologia alla base di questo consiglio, consulta Definire le soglie delle metriche di Core Web Vitals.

Variazioni del layout nel dettaglio

I cambiamenti di layout sono definiti dall'API Layout Instability, che registra le voci layout-shift ogni volta che un elemento visibile all'interno dell'area visibile cambia la sua posizione iniziale (ad esempio la posizione in alto e a sinistra nella modalità di scrittura predefinita) tra due frame. Questi elementi sono considerati elementi instabili.

Tieni presente che i cambiamenti di layout si verificano solo quando gli elementi esistenti cambiano la loro posizione iniziale. Se viene aggiunto un nuovo elemento al DOM o se le dimensioni di un elemento esistente cambiano, non viene conteggiato come variazione del layout, a condizione che la modifica non causi la modifica della posizione iniziale di altri elementi visibili.

Punteggio della variazione del layout

Per calcolare il punteggio di spostamento del layout, il browser esamina le dimensioni dell'area visibile e il movimento degli elementi instabili nell'area visibile tra due frame visualizzati. Il punteggio di spostamento del layout è il prodotto di due misurazioni di questo movimento: la frazione di impatto e la frazione di distanza (entrambe definite di seguito).

layout shift score = impact fraction * distance fraction

Frazione di impatto

La frazione dell'impatto misura l'impatto degli elementi instabili sull'area dell'area visibile tra due frame.

La frazione dell'impatto per un determinato frame è una combinazione delle aree visibili di tutti gli elementi instabili di quel frame e del frame precedente, come frazione della superficie totale dell'area visibile.

Nell'immagine precedente, in un fotogramma è presente un elemento che occupa metà dell'area visibile. Quindi, nel frame successivo, l'elemento si sposta verso il basso del 25% dell'altezza dell'area visibile. Il rettangolo rosso tratteggiato indica l'unione dell'area visibile dell'elemento in entrambi i frame, che in questo caso corrisponde al 75% dell'area visibile totale, quindi la sua frazione di impatto è 0.75.

Frazione di distanza

L'altra parte dell'equazione del punteggio dello spostamento del layout misura la distanza percorsa dagli elementi instabili rispetto all'area visibile. La frazione di distanza è la distanza orizzontale o verticale massima che qualsiasi elemento instabile è stato spostato nel frame divisa per la dimensione più grande dell'area visibile (a seconda di quale sia il valore maggiore tra larghezza o altezza).

Nell'esempio precedente, la dimensione dell'area visibile più grande è l'altezza e l'elemento instabile si è spostato del 25% dell'altezza dell'area visibile, il che rende la frazione di distanza pari a 0,25.

Pertanto, in questo esempio la frazione di impatto è 0.75 e la frazione di distanza è 0.25, quindi il punteggio di variazione del layout è 0.75 * 0.25 = 0.1875.

Esempi

L'esempio seguente mostra in che modo l'aggiunta di contenuti a un elemento esistente influisce sul punteggio della variazione del layout:

In questo esempio, la casella grigia cambia dimensione, ma la sua posizione iniziale non cambia, quindi non è un elemento instabile.

In precedenza, il pulsante "Click Me!" non si trovava nel DOM, quindi neppure la posizione iniziale viene modificata.

Tuttavia, la posizione iniziale della casella verde cambia, ma poiché è stata spostata parzialmente fuori dall'area visibile, l'area invisibile non viene considerata nel calcolo della frazione dell'impatto. L'unione delle aree visibili per la casella verde in entrambi i frame (illustrata dal rettangolo rosso tratteggiato) corrisponde all'area della casella verde nel primo frame, ovvero il 50% del viewport. La frazione di impatto è 0.5.

La frazione di distanza è illustrata con la freccia viola. La casella verde è scesa di circa il 14% dell'area visibile, quindi la frazione di distanza è 0.14.

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

L'esempio seguente mostra in che modo più elementi instabili influiscono sul punteggio relativo alla variazione del layout di una pagina:

Nel primo frame dell'immagine precedente sono presenti quattro risultati di una richiesta API per gli animali, in ordine alfabetico. Nel secondo frame, vengono aggiunti altri risultati all'elenco ordinato.

Il primo elemento dell'elenco ("Gatto") non cambia la sua posizione iniziale tra i frame, quindi è stabile. Analogamente, i nuovi elementi aggiunti all'elenco non erano precedentemente nel DOM, pertanto anche le relative posizioni iniziali non cambiano. Tuttavia, le posizioni iniziali degli elementi etichettati come "Cane", "Cavallo" e "Zebre" cambiano, rendendoli elementi instabili.

Anche in questo caso, i rettangoli rossi tratteggiati rappresentano l'unione delle aree prima e dopo di questi tre elementi instabili, che in questo caso corrisponde a circa il 60% dell'area del viewport (frazione di impatto pari a 0.60).

Le frecce rappresentano le distanze che gli elementi instabili hanno percorso dalle loro posizioni iniziali. L'elemento "Zebra", rappresentato dalla freccia blu, si è spostato di più, per circa il 30% dell'altezza dell'area visibile. Di conseguenza, la frazione di distanza in questo esempio è 0.3.

Il punteggio della variazione del layout è 0.60 x 0.3 = 0.18.

Variazioni del layout previste e impreviste

Non tutti i cambiamenti di layout sono negativi. In effetti, molte applicazioni web dinamiche cambiano spesso la posizione iniziale degli elementi sulla pagina. Un cambiamento del layout è negativo solo se l'utente non se lo aspetta.

Variazioni del layout avviate dall'utente

In genere, i cambiamenti di layout che si verificano in risposta alle interazioni degli utenti (ad esempio fare clic o toccare un link, premere un pulsante o digitare in una casella di ricerca) sono accettabili, a condizione che si verifichino abbastanza vicino all'interazione in modo che la relazione sia chiara per l'utente.

Ad esempio, se un'interazione dell'utente attiva una richiesta di rete che potrebbe richiedere un po' di tempo per essere completata, è meglio creare subito uno spazio e mostrare un indicatore di caricamento per evitare un spiacevole cambiamento di layout al termine della richiesta. Se l'utente non si rende conto che qualcosa sta caricando o non sa quando la risorsa sarà pronta, nell'attesa potrebbe provare a fare clic su qualcos'altro, qualcosa che potrebbe uscire da sotto di lui.

I cambiamenti di layout che si verificano entro 500 millisecondi dall'input dell'utente avranno il flag hadRecentInput impostato, in modo che possano essere esclusi dai calcoli.

Animazioni e transizioni

Se realizzate bene, le animazioni e le transizioni sono un ottimo modo per aggiornare i contenuti della pagina senza sorprendere l'utente. I contenuti che cambiano improvvisamente e inaspettatamente nella pagina creano quasi sempre un'esperienza utente negativa. Tuttavia, i contenuti che si spostano gradualmente e in modo naturale da una posizione all'altra possono spesso aiutare l'utente a capire meglio cosa sta succedendo e guidarlo tra un cambiamento di stato e l'altro.

Assicurati di rispettare le impostazioni del browser di prefers-reduced-motion, poiché alcuni visitatori del sito potrebbero riscontrare effetti negativi o problemi di attenzione dovuti all'animazione.

La proprietà CSS transform ti consente di animare gli elementi senza attivare cambiamenti di layout:

• Anziché modificare le proprietà height e width, usa transform: scale().
• Per spostare gli elementi, evita di modificare le proprietà top, right, bottom o left e utilizza invece transform: translate().

Come misurare il CLS

La CLS può essere misurata in laboratorio o sul campo ed è disponibile nei seguenti strumenti:

Strumenti sul campo

• Report sull'esperienza utente di Chrome
• PageSpeed Insights
• Search Console (report Core Web Vitals)
• web-vitals Libreria JavaScript

Strumenti del lab

• Chrome DevTools
• Lighthouse
• PageSpeed Insights
• WebPageTest

Misurare le variazioni di layout in JavaScript

Per misurare le variazioni del layout in JavaScript, utilizza l'API Layout Instability.

L'esempio seguente mostra come creare un PerformanceObserver per registrare le voci layout-shift nella console:

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('Layout shift:', entry);
  }
}).observe({type: 'layout-shift', buffered: true});

Misurare il CLS in JavaScript

Per misurare il CLS in JavaScript, devi raggruppare queste voci layout-shift impreviste in sessioni e calcolare il valore massimo della sessione. Puoi fare riferimento al web vitals codice sorgente della libreria JavaScript, che contiene un'implementazione di riferimento sul calcolo del CLS.

Nella maggior parte dei casi, il valore CLS corrente al momento dello scollegamento della pagina è il valore CLS finale per quella pagina, ma ci sono alcune eccezioni importanti, come indicato nella sezione successiva. La libreria JavaScript web vitals tiene conto il più possibile di questi fattori, entro le limitazioni delle API web.

Differenze tra la metrica e l'API

• Se una pagina viene caricata in background o se viene messa in background prima che il browser mostri i contenuti, non deve essere riportato alcun valore CLS.
• Se una pagina viene ripristinata dalla cache back/forward, il valore CLS deve essere reimpostato su zero poiché gli utenti la considerano una visita a una pagina distinta.
• L'API non segnala le voci layout-shift per le variazioni che si verificano all'interno degli iframe, al contrario della metrica, in quanto fanno parte dell'esperienza utente della pagina. Ciò può manifestarsi come una differenza tra CrUX e RUM. Dovresti prendere in considerazione questa metrica per misurare correttamente la metrica CLS. I frame secondari possono utilizzare l'API per segnalare le voci layout-shift al frame principale per l'aggregazione.

Oltre a queste eccezioni, il CLS presenta una maggiore complessità perché misura l'intera durata di una pagina:

• Gli utenti potrebbero tenere aperta una scheda per molto tempo, ad esempio giorni, settimane o mesi. Infatti, un utente potrebbe non chiudere mai una scheda.
• Sui sistemi operativi mobile, i browser in genere non eseguono i callback di svuotamento della pagina per le schede in background, il che rende difficile segnalare il valore "finale".

Per gestire questi casi, il CLS deve essere registrato ogni volta che una pagina è in background, oltre che ogni volta che viene scaricata (l'evento visibilitychange copre entrambi questi scenari). E i sistemi di analisi che ricevono questi dati dovranno quindi calcolare il valore CLS finale sul backend.

Anziché memorizzare e gestire tutti questi casi, gli sviluppatori possono utilizzare la libreria JavaScript web-vitals per misurare il CLS, che tiene conto di tutto quanto sopra menzionato, ad eccezione del caso iframe:

import {onCLS} from 'web-vitals';

// Measure and log CLS in all situations
// where it needs to be reported.
onCLS(console.log);

Come migliorare la metrica CLS

Per ulteriori indicazioni su come identificare i cambiamenti di layout sul campo e utilizzare i dati di laboratorio per ottimizzarli, consulta la nostra guida all'ottimizzazione del CLS.

Risorse aggiuntive

• Indicazioni del Tag publisher di Google per ridurre al minimo la variazione del layout
• Informazioni sul cambiamento cumulativo del layout di Annie Sullivan e Steve Kobes al #PerfMatters (2020)

Log delle modifiche

A volte vengono rilevati bug nelle API utilizzate per misurare le metriche e, a volte, nelle definizioni delle metriche stesse. Di conseguenza, a volte è necessario apportare modifiche, che possono essere visualizzate come miglioramenti o regressioni nelle dashboard e nei report interni.

Per aiutarti a gestire questo aspetto, tutte le modifiche all'implementazione o alla definizione di queste metriche verranno visualizzate in questo log delle modifiche.

Se hai feedback su queste metriche, puoi fornirli nel gruppo Google web-vitals-feedback.