Eventuali variazioni del layout inaspettate 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 può causare 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. Le cause delle variazioni del layout potrebbero essere immagini o video con dimensioni sconosciute, caratteri che vengono visualizzati più grandi o più piccoli rispetto a quelli di riserva iniziale oppure annunci o widget di terze parti che si ridimensionano 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 hanno un comportamento diverso in fase di sviluppo e produzione.
- Le immagini di test sono spesso già nella cache del browser dello sviluppatore, ma il caricamento dell'utente finale richiede più tempo.
- Le chiamate API eseguite localmente sono spesso così rapide che ritardi non evidenti nello sviluppo possono diventare considerevoli in produzione.
La metrica Cumulative Layout Shift (CLS) consente di risolvere questo problema misurando la frequenza con cui si verifica per utenti reali.
Che cos'è il CLS?
La metrica CLS misura la più grande serie di punteggi di variazione del layout per ogni variazione del layout inattesa che si verifica durante l'intero ciclo di vita di una pagina.
Una variazione del layout si verifica ogni volta che un elemento visibile cambia la sua posizione da un frame sottoposto a rendering a quello successivo. Più avanti nella guida verranno illustrati i dettagli su come vengono calcolati i singoli punteggi di variazione del layout.
Una serie di variazioni del 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 un turno e l'altro e un massimo di 5 secondi per la durata totale della finestra.
La serie di dati a raffica più grande è la finestra della sessione con il punteggio cumulativo massimo di tutte le variazioni di layout all'interno di quella finestra.
Qual è un buon punteggio CLS?
Per offrire una buona esperienza utente, i siti devono 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 di caricamenti pagine, segmentati su dispositivi mobili e computer.
Per saperne di più sulla ricerca e sulla metodologia alla base di questo consiglio, consulta Definire le soglie delle metriche di Segnali web essenziali.
Variazioni del layout nel dettaglio
Le variazioni di layout sono definite dall'API Layout Instability, che segnala 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 instabili.
Tieni presente che 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, non viene conteggiata una variazione del layout, a condizione che la modifica non causi la modifica della posizione iniziale di altri elementi visibili.
Punteggio di variazione del layout
Per calcolare il punteggio di variazione del layout, il browser controlla 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 distanza (entrambe definite di seguito).
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, sotto forma di frazione dell'area totale dell'area visibile.
Nell'immagine precedente c'è un elemento che occupa metà dell'area visibile in un frame. Nel frame successivo, poi l'elemento si sposta verso il basso del 25% rispetto all'altezza dell'area visibile. Il rettangolo rosso tratteggiato indica l'unione dell'area visibile dell'elemento in 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 rappresenta 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 delle due opzioni è maggiore).
Nell'esempio precedente, la dimensione più grande dell'area visibile è l'altezza e l'elemento instabile è stato spostato del 25% rispetto all'altezza dell'area visibile, rendendo la frazione distanza pari a 0, 25.
Quindi, in questo esempio la frazione dell'impatto è 0.75 e la frazione distanza è 0.25, quindi il punteggio di variazione del layout è 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 sua posizione iniziale non cambia, per cui non è un elemento instabile.
Il pulsante "Click Me!" non si trovava in precedenza nel DOM, quindi non cambia nemmeno la posizione iniziale.
La posizione iniziale della casella verde, tuttavia, cambia. Tuttavia, 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 il riquadro verde in entrambi i frame (illustrate dal rettangolo rosso punteggiato) corrisponde all'area del riquadro verde nel primo frame, pari al 50% dell'area visibile. La frazione dell'impatto è 0.5.
La frazione distanza è illustrata con la freccia viola. Il riquadro verde è stato spostato verso il basso di circa il 14% dell'area visibile, pertanto la frazione di 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:
Nel primo frame nell'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 nell'elenco ("Cat") non cambia la posizione iniziale tra i frame, quindi è stabile. Analogamente, i nuovi elementi aggiunti all'elenco non erano precedentemente nel DOM, quindi non cambiano anche le loro posizioni iniziali. Tuttavia, gli elementi con le etichette "Cane", "Cavallo" e "Zebra" modificano la loro posizione iniziale, il che li rende elementi instabili.
Anche in questo caso, i rettangoli punteggiati rossi rappresentano l'unione di questi tre elementi instabili' prima e dopo le aree, che in questo caso corrispondono a circa il 60% dell'area dell'area visibile (frazione dell'impatto di 0.60).
Le frecce rappresentano le distanze spostati dagli elementi instabili rispetto alla loro posizione iniziale. L'elemento "Zebra", rappresentato dalla freccia blu, si è spostato di più, pari a circa il 30% dell'altezza dell'area visibile. Questo rende la frazione di distanza in questo esempio 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 cambiano spesso 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é siano sufficientemente vicine all'interazione da rendere chiara la relazione per l'utente.
Ad esempio, se l'interazione di un utente attiva una richiesta di rete il cui completamento può richiedere del tempo, è meglio creare subito uno spazio e mostrare un indicatore di caricamento per evitare una spiacevole variazione del layout al termine 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, qualcosa che potrebbe uscire da sotto.
Le variazioni del layout che si verificano entro 500 millisecondi dall'input dell'utente avranno il flag hadRecentInput impostato, per cui è possibile escluderle 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 si spostano 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 possono aiutare l'utente a capire meglio la situazione e a guidare l'utente tra i cambiamenti di stato.
Assicurati di rispettare le impostazioni del browser prefers-reduced-motion, poiché alcuni visitatori del sito potrebbero riscontrare malfunzionamenti o problemi di attenzione dovuti all'animazione.
La proprietà CSS transform ti consente di animare gli elementi senza attivare le variazioni del layout:
- Anziché modificare le proprietà
heightewidth, utilizzatransform: scale(). - Per spostare gli elementi, evita di modificare le proprietà
top,right,bottomolefte usa invecetransform: translate().
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 il CLS in JavaScript, devi raggruppare queste voci layout-shift impreviste in sessioni e calcolare il valore massimo della sessione. Puoi consultare il codice sorgente della libreria JavaScript web vitals, che contiene un'implementazione di riferimento su come viene calcolata la CLS.
Nella maggior parte dei casi, il valore CLS corrente al momento dell'unload della pagina è il valore CLS finale per quella pagina, ma ci sono alcune importanti eccezioni, come indicato nella sezione successiva. La libreria JavaScript web vitals tiene conto di questi aspetti 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 ne viene eseguito lo sfondo prima che il browser crei i contenuti, 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 a una pagina distinta.
- L'API non segnala le voci
layout-shiftper le variazioni che si verificano all'interno degli iframe, ma la metrica fa parte dell'esperienza utente sulla pagina. Potrebbe essere visualizzata come differenza tra CrUX e RUM. Per misurare correttamente il CLS, ti consigliamo di prenderli in considerazione. I frame secondari possono utilizzare l'API per segnalare le proprie vocilayout-shiftnel frame principale per l'aggregazione.
Oltre a queste eccezioni, il CLS presenta una maggiore complessità dovuta al fatto che misura l'intera durata di una pagina:
- Gli utenti possono tenere una scheda aperta per molto tempo: giorni, settimane, 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, la segnalazione CLS deve essere effettuata ogni volta che una pagina è 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 web-vitals per misurare la CLS, che tiene conto di tutto quanto riportato sopra tranne l'uso 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
- Linee guida di Tag publisher di Google su come ridurre al minimo la variazione del layout
- Understanding Cumulative Layout Shift di Annie Sullivan e Steve Kobes pubblicati su #PerfMatters (2020)
Log delle modifiche
Occasionalmente, i bug vengono scoperti nelle API utilizzate per misurare le metriche e talvolta nelle definizioni delle metriche stesse. Di conseguenza, è necessario apportare talvolta delle 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 verranno visualizzate in questo log delle modifiche.
Se hai feedback su queste metriche, puoi fornirle nel gruppo Google web-vitals-feedback.