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.
I movimenti imprevisti dei contenuti della pagina di solito si verificano quando le risorse vengono caricate in modo asincrono o quando gli elementi DOM vengono aggiunti alla pagina in modo dinamico prima dei contenuti esistenti. Le variazioni del layout possono essere dovute a immagini o video con dimensioni sconosciute, caratteri che vengono visualizzati più grandi o meno rispetto alla versione di riserva iniziale o annunci o widget di terze parti che si ridimensionano automaticamente.
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 spesso si trovano già nella cache del browser dello sviluppatore, ma il loro caricamento richiede più tempo per l'utente finale.
- Le chiamate API eseguite localmente sono spesso così rapide che ritardi impercettibili nello sviluppo possono diventare sostanziali in produzione.
La metrica Cumulative Layout Shift (CLS) consente di risolvere questo problema misurando la frequenza con cui si verifica per gli utenti reali.
Che cos'è la 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 di variazione del layout sono illustrati più avanti in questa guida.
Una serie di variazioni del layout, nota come finestra di sessione, si verifica quando una o più variazioni individuali del layout si verificano in rapida successione con meno di 1 secondo tra ogni spostamento e un massimo di 5 secondi per la durata totale della finestra.
La serie più grande è la finestra di sessione con il punteggio cumulativo massimo di tutte le variazioni del layout all'interno di quella finestra.
Che cos'è un buon punteggio CLS?
Per offrire una buona esperienza utente, i siti dovrebbero fare in modo che il punteggio CLS sia 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 saperne 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
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 superiore e sinistra nella modalità di scrittura predefinita) tra due frame. Questi elementi sono considerati elementi instabili.
Tieni presente che le variazioni del layout si verificano solo quando gli elementi esistenti cambiano la loro posizione iniziale. Se un nuovo elemento viene aggiunto al DOM o se le dimensioni di un elemento esistente cambiano, non viene conteggiata una 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 variazione del layout, il browser esamina le dimensioni dell'area visibile e lo spostamento degli elementi instabili nell'area visibile tra due frame visualizzati. Il punteggio della variazione del layout è il prodotto di due misure di questo movimento: la frazione dell'impatto e la frazione della 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, c'è un elemento che occupa metà dell'area visibile in un frame. 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 rappresenta il 75% dell'area visibile totale, quindi la sua frazione di impatto è 0.75.
Frazione distanza
L'altra parte dell'equazione del punteggio della variazione del layout misura la distanza di spostamento degli 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 è stato spostato del 25% dell'altezza dell'area visibile, il che rende la frazione di distanza pari a 0, 25.
Quindi, in questo esempio la frazione dell'impatto è 0.75 e la frazione della distanza è 0.25, quindi il punteggio di variazione del layout è 0.75 * 0.25 = 0.1875.
Esempi
L'esempio seguente illustra come l'aggiunta di contenuti a un elemento esistente influisce sul punteggio della variazione del layout:
In questo esempio, la dimensione della casella grigia cambia, ma la sua posizione iniziale non cambia, quindi non si tratta di un elemento instabile.
L'opzione "Click Me!" non era precedentemente nel DOM, quindi anche la sua posizione iniziale non cambia.
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 del riquadro verde in entrambi i frame (illustrata dal rettangolo rosso tratteggiato) è la stessa dell'area del riquadro verde nel primo frame, ovvero il 50% dell'area visibile. La frazione dell'impatto è 0.5.
La frazione della distanza è illustrata con la freccia viola. La casella verde è stata spostata verso il basso 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 come più elementi instabili incidono sul punteggio della 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 posizione iniziale tra i frame, quindi è stabile. Analogamente, i nuovi elementi aggiunti all'elenco non si trovavano in precedenza nel DOM, quindi neppure le loro posizioni iniziali cambiano. Ma gli elementi etichettati come "Cane", "Cavallo" e "Zebra" spostano tutti la posizione iniziale, il che li rende elementi instabili.
Ancora una volta, i rettangoli rossi a puntini 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 di impatto pari a 0.60).
Le frecce rappresentano le distanze di spostamento degli elementi instabili dalla posizione iniziale. La "Zebra" rappresentato dalla freccia blu, è stato spostato di più, di circa il 30% dell'altezza dell'area visibile. In questo modo la frazione di distanza in questo esempio diventa 0.3.
Il punteggio della variazione del layout è 0.60 x 0.3 = 0.18.
Variazioni del layout previste e impreviste
Non tutte le variazioni del layout sono errate. In effetti, 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 dell'utente (ad esempio il clic o il tocco di un link, la pressione di un pulsante o la digitazione in una casella di ricerca) sono generalmente accettabili, a condizione che lo spostamento sia abbastanza vicino 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 potrebbe richiedere del tempo, è preferibile creare subito un po' di spazio e mostrare un indicatore di caricamento per evitare una sgradevole variazione del layout al completamento 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 spostare fuori da sotto di lui.
Le variazioni del layout che si verificano entro 500 millisecondi dall'input dell'utente avranno il flag hadRecentInput impostato, in modo che possano essere escluse dai calcoli.
Animazioni e transizioni
Se ben eseguite, le animazioni e le transizioni sono un ottimo modo per aggiornare i contenuti della pagina senza sorprendere l'utente. I contenuti che cambiano repentinamente 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 le variazioni del layout:
- Anziché modificare le proprietà
heightewidth, usatransform: scale(). - Per spostare gli elementi, evita di modificare le proprietà
top,right,bottomolefte usatransform: translate().
Come misurare la metrica CLS
La CLS può essere misurata in laboratorio o sul campo ed è disponibile nei seguenti strumenti:
Strumenti sul campo
- Esperienza utente di Chrome Segnala
- PageSpeed Insights
- Search Console (Core Web Vitals report)
- Libreria JavaScript di
web-vitals
Strumenti del lab
Misurare le variazioni del layout in JavaScript
Per misurare le variazioni del layout in JavaScript, utilizza l'API Layout Instability.
L'esempio seguente mostra come creare una 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 la metrica CLS in JavaScript
Per misurare la metrica CLS in JavaScript, devi raggruppare queste voci layout-shift impreviste in sessioni e calcolare il valore massimo della sessione. Puoi fare riferimento al codice sorgente della libreria JavaScript web vitals, che contiene un'implementazione di riferimento su come viene calcolato la metrica 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 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 riprodotta in background prima che il browser visualizzi 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 poiché gli utenti la considerano una visita a una pagina distinta.
- L'API non segnala le voci
layout-shiftper le variazioni che si verificano all'interno degli iframe, al contrario della metrica, in quanto fanno parte dell'esperienza utente della pagina. Questo può mostrare 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 vocilayout-shiftal frame principale per l'aggregazione.
Oltre a queste eccezioni, CLS presenta una certa complessità aggiuntiva dovuta al fatto che misura l'intera durata di una pagina:
- Gli utenti potrebbero tenere una scheda aperta per un periodo molto di tempo: giorni, settimane o mesi. Infatti, un utente potrebbe non chiudere mai una scheda.
- Sui sistemi operativi mobile, in genere i browser non eseguono callback di pagina per le schede in background, il che rende difficile segnalare il messaggio "finale" valore.
Per gestire questi casi, la metrica CLS deve essere segnalata 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 personalmente tutti questi casi, gli sviluppatori possono utilizzare la libreria JavaScript di web-vitals per misurare la metrica CLS, che tiene conto di tutto quanto indicato sopra, 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 le variazioni del layout sul campo e utilizzare i dati di laboratorio per ottimizzarle, consulta la nostra guida all'ottimizzazione della metrica CLS.
Risorse aggiuntive
- Indicazioni del Tag publisher di Google su come ridurre al minimo la variazione del layout
- Understanding Cumulative Layout Shift, di Annie Sullivan e Steve Kobes, #PerfMatters (2020)
Log delle modifiche
A volte vengono scoperti bug nelle API utilizzate per misurare le metriche e talvolta nelle definizioni delle metriche stesse. Di conseguenza, a volte devono essere apportate 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 riportate in questo Log delle modifiche.
Se hai un feedback per queste metriche, puoi fornirlo nel gruppo Google web-vitals-feedback.