Cumulative Layout Shift (CLS) è una metrica Core Web Vitals stabile. È un'importante metrica incentrata sull'utente per la misurazione della stabilità visiva in quanto aiuta a quantificare la frequenza con cui gli utenti riscontrano variazioni del layout impreviste. Un CLS basso contribuisce a garantire che la pagina sia piacevole.
Le variazioni di layout imprevisti possono compromettere l'esperienza utente in molti modi, ad esempio a perdere il punto durante la lettura se il testo si sposta improvvisamente o a fare clic sul link o sul pulsante sbagliato. In alcuni casi, questo può arrecare gravi danni.
Lo spostamento imprevisto dei contenuti della pagina di solito si verifica quando le risorse vengono caricate in modo asincrono o gli elementi DOM vengono aggiunti dinamicamente alla pagina prima dei contenuti esistenti. La causa dello spostamento potrebbe essere un'immagine o un video con dimensioni sconosciute, un carattere che viene visualizzato più grande o più piccolo rispetto a quello di riserva oppure un annuncio o un widget di terze parti che si ridimensiona in modo dinamico.
Le differenze tra il funzionamento di un sito in fase di sviluppo e l'esperienza degli utenti lo peggiorano. Ad esempio:
- I contenuti personalizzati o di terze parti spesso si comportano in modo diverso in fase di sviluppo e produzione.
- Le immagini di test sono spesso già nella cache del browser dello sviluppatore, ma il caricamento per l'utente finale richiede più tempo.
- Le chiamate API eseguite localmente sono spesso così rapide che ritardi impercettibili nello sviluppo possono diventare considerevoli in produzione.
La metrica Cumulative Layout Shift (CLS) consente di risolvere questo problema misurando quanto spesso si verifica per utenti reali.
Che cos'è il CLS?
La metrica CLS misura la più grande quantità di punteggi di variazione del layout per ogni variazione del layout inattesa che si verifica durante la vita di una pagina.
Una spostamento del layout si verifica ogni volta che un elemento visibile cambia la sua posizione da un frame sottoposto a rendering a quello successivo. Consulta la sezione Punteggio di variazione del layout per informazioni dettagliate su come vengono misurate queste variazioni.
Una serie di variazioni del layout, nota come finestra di sessione, si verifica in rapida successione di una o più variazioni del layout con meno di 1 secondo tra un turno e l'altro, per un periodo massimo di 5 secondi.
Il burst più grande è la finestra della sessione con il punteggio cumulativo massimo di tutte le variazioni del layout all'interno di quella finestra.
Qual è un buon punteggio CLS?
Per offrire una buona esperienza utente, un sito deve avere un punteggio CLS pari o inferiore a 0,1. Per assicurarti di raggiungere questo target per la maggior parte dei tuoi utenti, ti consigliamo di misurare il 75° percentile dei caricamenti delle pagine, segmentato su dispositivi mobili e computer.
Per saperne di più sulla ricerca e sulla metodologia alla base di questo consiglio, consulta Definizione delle soglie delle metriche di Core Web Vitals.
Variazioni del layout nel dettaglio
Le variazioni del layout sono definite
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. Gli elementi le cui posizioni iniziali vengono modificate sono considerati elementi instabili.
Le variazioni del layout si verificano solo quando gli elementi esistenti cambiano la loro posizione iniziale. Se viene aggiunto un nuovo elemento al DOM o se un elemento esistente cambia dimensione, viene conteggiata una variazione del layout solo se la modifica fa sì che altri elementi visibili cambino la loro posizione iniziale.
Punteggio di variazione del layout
Per calcolare il punteggio di variazione del layout, il browser considera le dimensioni dell'area visibile e il movimento degli elementi instabili nell'area visibile tra due frame visualizzati. Il punteggio della variazione del layout è il prodotto di due misure del movimento: la frazione dell'impatto e la frazione di distanza.
layout shift score = impact fraction * distance fraction
Frazione dell'impatto
La frazione dell'impatto misura l'impatto degli elementi instabili sull'area dell'area visibile tra due frame.
La frazione dell'impatto di un determinato frame è una combinazione delle aree visibili di tutti gli elementi instabili del frame e del frame precedente, come una frazione dell'area totale dell'area visibile.
Questa immagine mostra un elemento che occupa metà dell'area visibile in un frame. Nel frame successivo, l'elemento si sposta verso il basso del 25% dell'altezza dell'area visibile. Il rettangolo tratteggiato rosso indica l'area visibile dell'elemento su entrambi i frame, che, in questo caso, rappresenta il 75% dell'area visibile totale, pertanto la sua frazione dell'impatto è 0.75.
Frazione di distanza
L'altra parte dell'equazione del punteggio di variazione del layout misura la distanza di spostamento degli elementi instabili rispetto all'area visibile. La frazione distanza è la distanza orizzontale o verticale massima che un elemento instabile è stato spostato nel frame divisa per la dimensione più grande dell'area visibile (larghezza o altezza, a seconda di quale sia maggiore).
In questo esempio, la dimensione più grande dell'area visibile è l'altezza e l'elemento instabile è stato spostato del 25% rispetto all'altezza dell'area visibile, il che rende la frazione della distanza pari a 0.25.
Una frazione dell'impatto pari a 0.75 e una frazione della distanza pari a 0.25 producono un punteggio di variazione del layout pari a 0.75 * 0.25 = 0.1875.
Esempi
L'esempio seguente illustra in che modo l'aggiunta di contenuti a un elemento esistente influisce sul punteggio di variazione del layout:
In questo esempio, la casella grigia cambia dimensione, ma la posizione iniziale non cambia, pertanto non è un elemento instabile.
Il pulsante "Click Me!" non era nel DOM in precedenza, quindi anche la sua posizione iniziale non cambia.
La posizione iniziale della casella verde cambia, ma è stata spostata parzialmente fuori dall'area visibile e l'area invisibile non viene considerata nel calcolo della frazione dell'impatto. L'unione delle aree visibili per il riquadro verde in entrambi i frame (il rettangolo tratteggiato rosso) corrisponde all'area del riquadro verde nel primo frame, ovvero il 50% dell'area visibile. La frazione dell'impatto è 0.5.
La frazione della distanza è indicata dalla freccia blu. Il riquadro verde è stato spostato verso il basso di circa il 14% dell'area visibile, quindi la frazione della distanza è 0.14.
Il punteggio di variazione del layout è 0.5 x 0.14 = 0.07.
L'esempio seguente mostra in che modo più elementi instabili influiscono sul punteggio di variazione del layout di una pagina:
Il primo elemento nell'elenco ("Cat") non cambia la posizione iniziale tra i frame, quindi è stabile. I nuovi elementi aggiunti all'elenco non erano presenti nel DOM, pertanto anche la loro posizione iniziale non cambia. Tuttavia, gli elementi etichettati come "Cane", "Cavallo" e "Zebra" modificano la loro posizione iniziale, il che li rende instabili.
Anche in questo caso, il rettangolo tratteggiato rosso rappresenta l'area di questi tre elementi instabili prima e dopo lo spostamento, che in questo caso corrisponde a circa il 60% dell'area dell'area visibile (frazione dell'impatto pari a 0.60).
Le frecce rappresentano le distanze tra gli elementi instabili rispetto alla loro posizione iniziale. L'elemento "Zebra", rappresentato dalla freccia blu,
è stato spostato di più, pari a circa il 30% dell'altezza dell'area visibile. In questo modo la frazione di distanza in questo esempio diventa 0.3.
Il punteggio di variazione del layout è 0.60 x 0.3 = 0.18.
Variazioni del layout previste e impreviste
Non tutte le variazioni del layout sono un problema. Infatti, molte applicazioni web dinamiche spesso cambiano la posizione iniziale degli elementi sulla pagina. Una variazione del layout è negativa solo se l'utente non se lo aspetta.
Variazioni del layout avviate dall'utente
Le variazioni del layout che si verificano in risposta alle interazioni degli utenti (ad esempio, fare clic o toccare un link, premere un pulsante o digitare nella casella di ricerca) sono generalmente accettabili, purché si avvicinino all'interazione affinché la relazione sia chiara per l'utente.
Ad esempio, se l'interazione di un utente attiva una richiesta di rete che potrebbe richiedere diverso tempo, è meglio creare subito uno spazio e mostrare un indicatore di caricamento per evitare una spiacevole variazione del layout al completamento della richiesta. Se l'utente non si rende conto che qualcosa è in fase di caricamento o non ha un'idea di quando la risorsa sarà pronta, potrebbe provare a fare clic su qualcos'altro durante l'attesa e l'altro elemento potrebbe uscire da sotto di lui al termine del caricamento del primo.
Per le variazioni del layout che si verificano entro 500 millisecondi dall'input dell'utente verrà impostato il flag hadRecentInput, che puoi quindi escludere dai calcoli.
Animazioni e transizioni
Se eseguite bene, animazioni e 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 spesso aiutano l'utente a capire meglio la situazione e a passare da una modifica all'altra dello stato.
Assicurati di rispettare le impostazioni del browser prefers-reduced-motion, perché l'animazione può causare problemi di stato o di attenzione ad alcuni visitatori del sito.
La proprietà CSS transform
ti consente di animare gli elementi senza attivare le variazioni del layout:
- Utilizza
transform: scale()anziché modificare le proprietàheightewidth. - Per spostare gli elementi, utilizza
transform: translate()anziché modificare le proprietàtop,right,bottomoleft.
Come misurare la CLS
La CLS può essere misurata in laboratorio o sul campo ed è disponibile nei seguenti strumenti.
Strumenti da campo
- Report sull'esperienza utente di Chrome
- PageSpeed Insights
- Search Console (report Segnali web essenziali)
- Libreria JavaScript di
web-vitals
Strumenti di lab
Misurare le variazioni di layout in JavaScript
Per misurare le variazioni del layout in JavaScript, utilizza l'API Layout Instability.
Nell'esempio seguente viene illustrato come creare un oggetto 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});
Misura CLS in JavaScript
Per misurare la CLS in JavaScript, raggruppa le voci layout-shift impreviste che hai
eseguito l'accesso alle sessioni e calcola il valore massimo della sessione. Per l'implementazione di riferimento, consulta il codice sorgente della libreria JavaScript web vitals.
Nella maggior parte dei casi, il valore CLS al momento dell'unload della pagina è il valore CLS finale per quella pagina, ma ci sono alcune importanti eccezioni elencate nella sezione successiva. La libreria JavaScript web vitals tiene conto di questi problemi il più possibile, entro i limiti delle API web.
Differenze tra la metrica e l'API
- Se una pagina viene caricata in background o se viene utilizzata prima che il browser colora qualsiasi contenuto, non dovrebbe essere segnalato alcun valore CLS.
- Se una pagina viene ripristinata dalla cache back-forward, il valore CLS deve essere reimpostato su zero, in quanto gli utenti percepiscono questa azione come una visita alla pagina distinta.
- L'API non segnala le voci
layout-shiftper i cambiamenti che si verificano all'interno degli iframe, ma la metrica sì perché fanno parte dell'esperienza utente della pagina. Potrebbe essere visualizzata come differenza tra CrUX e RUM. Per misurare correttamente il CLS, devi includere iframe. I frame secondari possono utilizzare l'API per segnalare le proprie vocilayout-shiftnel frame principale per l'aggregazione.
Oltre a queste eccezioni, la metrica CLS è ancora più complessa poiché misura l'intera durata di una pagina:
- Gli utenti potrebbero tenere aperta una scheda per molto tempo, giorni, settimane o anche mesi. Infatti, un utente potrebbe non chiudere mai una scheda.
- Sui sistemi operativi per dispositivi mobili, i browser in genere non eseguono callback di unload della pagina per le schede in background, il che rende difficile segnalare il valore "finale".
Per gestire questi casi, ti consigliamo di fare in modo che il sistema registri il CLS ogni volta che una pagina viene salvata in background, oltre che ogni volta che viene scaricata. L'evento visibilitychange copre entrambi gli scenari. I sistemi di analisi che ricevono questi dati dovranno quindi calcolare il valore CLS finale sul backend.
Anziché memorizzare e gestire tutti questi casi autonomamente, gli sviluppatori
possono utilizzare la libreria JavaScript di web-vitals
per misurare la metrica CLS, che tiene conto di tutto ciò che viene menzionato qui tranne l'uso delle maiuscole e minuscole degli iframe:
import {onCLS} from 'web-vitals';
// Measure and log CLS in all situations
// where it needs to be reported.
onCLS(console.log);
Come migliorare il CLS
Per ulteriori indicazioni su come identificare le variazioni del layout sul campo e utilizzare i dati di prova controllati per ottimizzarle, consulta la nostra guida all'ottimizzazione del CLS.
Risorse aggiuntive
- Le indicazioni di Tag publisher di Google su come ridurre al minimo la variazione del layout
- Understanding Cumulative Layout Shift di Annie Sullivan e Steve Kobes su #PerfMatters (2020)
Log delle modifiche
Occasionalmente, i bug vengono scoperti nelle API utilizzate per misurare le metriche e, a volte, nelle definizioni delle metriche stesse. Di conseguenza, è necessario apportare talvolta modifiche, che possono apparire come miglioramenti o regressioni nei report e nelle dashboard interni.
Per aiutarti a gestire questa situazione, tutte le modifiche all'implementazione o alla definizione di queste metriche vengono mostrate in questo log delle modifiche.
Se hai feedback su queste metriche, forniscilo nel gruppo Google web-vitals-feedback.