Scopri i nostri piani per migliorare la metrica Cumulative Layout Shift e inviaci il tuo feedback.
Cumulative Layout Shift (CLS) è una metrica che misura la stabilità visiva di una pagina web. Questa metrica è chiamata variazione cumulativa del layout perché il punteggio di ogni singola variazione viene sommato per tutta la durata della pagina.
Sebbene tutte le variazioni del layout rappresentino un'esperienza utente scadente, la loro somma è maggiore per le pagine aperte più a lungo. Ecco perché il team Chrome Speed Metrics ha deciso di migliorare la metrica CLS per renderla più neutrale rispetto al tempo trascorso su una pagina.
È importante che la metrica si concentri sull'esperienza utente per l'intera durata della pagina, poiché abbiamo riscontrato che gli utenti spesso sperimentano esperienze negative dopo il caricamento, mentre scorrono le pagine o navigano su Internet. Tuttavia, abbiamo sentito parlare delle conseguenze di questa scelta sulle pagine di lunga durata, vale a dire quelle generalmente aperte dagli utenti da molto tempo. Esistono diversi tipi di pagine che tendono a rimanere aperte più a lungo. Alcune delle più comuni sono le app di social media con scorrimento continuo e applicazioni a pagina singola.
Un'analisi interna delle pagine di lunga durata con punteggi CLS elevati ha rilevato che la maggior parte dei problemi era causata dai seguenti pattern:
- Scorrimenti infiniti che spostano i contenuti mentre l'utente scorre.
- I gestori di input impiegano più di 500 ms per aggiornare l'interfaccia utente in risposta a un'interazione dell'utente, senza alcun tipo di segnaposto o pattern di scheletro.
Incoraggiamo gli sviluppatori a migliorare queste esperienze utente, ma stiamo anche lavorando per migliorare la metrica e cercando feedback sui possibili approcci.
Come possiamo stabilire se una nuova metrica è migliore?
Prima di dedicarci alla progettazione delle metriche, volevamo assicurarci di valutare le nostre idee su un'ampia varietà di pagine web e casi d'uso reali. Per iniziare, abbiamo progettato un piccolo studio sugli utenti.
In primo luogo, abbiamo registrato video e tracce di Chrome di 34 percorsi degli utenti su vari siti web. Nella selezione dei percorsi degli utenti, abbiamo puntato ad alcuni obiettivi:
- Una varietà di tipi diversi di siti, come siti di notizie e shopping.
- Un'ampia gamma di percorsi degli utenti, come caricamento iniziale della pagina, scorrimento, navigazioni di app in una sola pagina e interazioni degli utenti.
- Una varietà sia di numero che di intensità delle singole variazioni del layout nei siti.
- Poche esperienze negative sui siti, a parte le variazioni del layout.
Abbiamo chiesto a 41 dei nostri colleghi di guardare due video alla volta, valutando quale delle due coppie fosse la migliore in termini di variazione del layout. Da queste valutazioni è stato creato un ordine di ranking idealizzato dei siti. I risultati del ranking degli utenti hanno confermato i nostri sospetti che i nostri colleghi, come la maggior parte degli utenti, siano molto delusi dalle variazioni del layout dopo il caricamento, in particolare durante lo scorrimento e le navigazioni nelle app su una sola pagina. Abbiamo notato che alcuni siti offrono esperienze utente molto migliori durante queste attività rispetto ad altri.
Dal momento che abbiamo registrato le tracce di Chrome insieme ai video, avevamo tutti i dettagli delle singole variazioni del layout nel percorso di ogni utente. Le abbiamo usate per calcolare i valori delle metriche per ogni idea e per il percorso di ciascun utente. Questo ci ha permesso di vedere il ranking dei percorsi degli utenti di ciascuna variante della metrica e le differenze rispetto al ranking ideale.
Quali idee per le metriche abbiamo testato?
Strategie di windowing
Spesso le pagine presentano più variazioni di layout raggruppate insieme, perché gli elementi possono cambiare più volte man mano che i nuovi contenuti vengono inseriti una volta alla volta. Questo ci ha spinto a provare delle tecniche per raggruppare i cambiamenti. A questo scopo, abbiamo esaminato tre approcci al windowing:
- Finestre a cascata
- Finestre scorrevoli
- Finestre di sessione
In ognuno di questi esempi, la pagina presenta variazioni del layout di varia gravità nel tempo. Ogni barra blu rappresenta una singola variazione del layout e la lunghezza rappresenta il punteggio di quella variazione. Le immagini illustrano i modi in cui diverse strategie di windowing raggruppano le variazioni del layout nel tempo.
Finestre a cascata
L'approccio più semplice consiste semplicemente nel suddividere la pagina in finestre di blocchi di dimensioni uguali. In questi casi si parla di finestre a cascata. Sopra noterai che la quarta barra sembra davvero che dovrebbe essere raggruppata nella seconda finestra a cascata, ma poiché le finestre sono tutte di dimensioni fisse, è invece nella prima finestra. Se esistono lievi differenze nella tempistica dei caricamenti o delle interazioni degli utenti sulla pagina, le stesse variazioni del layout potrebbero trovarsi su lati diversi dei bordi delle finestre a cascata.
Finestre scorrevoli
Un approccio che ci consente di vedere più possibili raggruppamenti della stessa durata è l'aggiornamento continuo della potenziale finestra nel tempo. L'immagine riportata sopra mostra una finestra scorrevole alla volta, ma per creare una metrica potremmo esaminare tutte le finestre scorrevoli possibili o un sottoinsieme di queste.
Finestre di sessione
Se volessimo concentrarci sull'identificazione delle aree della pagina con picchi di variazioni del layout, potremmo iniziare ogni finestra con una variazione e continuare a farla crescere finché non abbiamo riscontrato un divario di una determinata dimensione tra le variazioni del layout. Questo approccio raggruppa le variazioni di layout e ignora la maggior parte dell'esperienza utente che non cambia. Un potenziale problema è che se non ci sono lacune nelle variazioni di layout, una metrica basata sulle finestre di sessione potrebbe crescere in modo illimitato proprio come l'attuale metrica CLS. Pertanto, lo abbiamo provato anche con una dimensione massima della finestra.
Dimensioni finestre
La metrica potrebbe dare risultati molto diversi a seconda di quanto sono effettivamente grandi le finestre, quindi abbiamo provato più dimensioni di finestre diverse:
- Ogni turno come finestra separata (nessuna finestra)
- 100 ms
- 300 ms
- 1 secondo
- 5 secondi
Riassunto
Abbiamo provato molti modi per riassumere le diverse finestre.
Percentili
Abbiamo esaminato il valore massimo della finestra, nonché il 95° percentile, il 75° percentile e la mediana.
Nella media
Abbiamo esaminato il valore della finestra media.
Budget
Ci siamo chiesti se ci fosse un punteggio minimo per la variazione del layout che gli utenti non avrebbero notato e che potremmo conteggiare solo le variazioni di layout oltre quel "budget" nel punteggio. Di conseguenza, per vari valori potenziali di "budget", abbiamo esaminato la percentuale di variazioni rispetto al budget e il punteggio di variazione totale rispetto al budget.
Altre strategie
Inoltre, abbiamo esaminato molte strategie che non prevedevano finestre, come la variazione totale del layout divisa per il tempo sulla pagina e la media delle N variazioni individuali peggiori.
I risultati iniziali
Nel complesso, abbiamo testato 145 definizioni diverse di metriche in base alle permutazioni delle idee illustrate sopra. Per ogni metrica, abbiamo classificato tutti i percorsi degli utenti in base al loro punteggio sulla metrica, quindi abbiamo classificato le metriche in base alla loro vicinanza al ranking ideale.
Per ottenere un riferimento, abbiamo anche classificato tutti i siti in base al loro punteggio CLS attuale. La metrica CLS si è classificata al 32° posto e a pari merito con altre 13 strategie, quindi è risultato migliore della maggior parte delle permutazioni delle strategie precedenti. Per garantire che i risultati fossero significativi, abbiamo aggiunto anche tre ordini casuali. Come previsto, l'ordinamento casuale ha registrato un rendimento peggiore di quello di ogni strategia testata.
Per capire se il set di dati potrebbe essere in overfitting, dopo la nostra analisi abbiamo registrato alcuni nuovi video e tracce relative alle variazioni del layout, li abbiamo classificati manualmente e abbiamo visto che i ranking delle metriche erano molto simili sia per il nuovo set di dati che per quello originale.
Alcune strategie diverse si sono distinte nella classifica.
Strategie migliori
Quando abbiamo classificato le strategie, abbiamo riscontrato che tre tipi di strategie erano in cima all'elenco. Ognuno ha avuto all'incirca lo stesso rendimento, quindi abbiamo intenzione di procedere con un'analisi più approfondita di tutti e tre. Inoltre, ci piacerebbe ricevere il feedback degli sviluppatori per capire se ci sono fattori al di fuori dell'esperienza utente che dovremmo prendere in considerazione per decidere tra di loro. Vedi di seguito come inviare un feedback.
Percentili elevati di finestre lunghe
Alcune strategie di windowing hanno funzionato bene con finestre di grandi dimensioni:
- Finestre scorrevoli di 1 secondo
- Finestre di sessione limitate a 5 secondi con un intervallo di 1 secondo
- Finestre di sessione illimitate con un intervallo di 1 secondo
Si è classificato molto bene sia al 95° percentile che al massimo.
Ma per finestre di dimensioni così grandi, eravamo preoccupati di usare il 95° percentile, spesso stavamo guardando solo 4-6 finestre, e prendere il 95° percentile di questo è una molta interpolazione. Non è chiaro cosa faccia l'interpolazione in termini di valore della metrica. Il valore massimo è molto più chiaro, pertanto abbiamo deciso di procedere con il controllo del valore massimo.
Media di finestre di sessione con intervalli lunghi
La media dei punteggi di tutte le finestre di sessione senza limiti con intervalli di 5 secondi tra loro ha avuto un ottimo rendimento. Questa strategia presenta alcune caratteristiche interessanti:
- Se la pagina non presenta intervalli tra le variazioni del layout, si tratta di una finestra di sessione lunga con lo stesso identico punteggio della CLS corrente.
- Questa metrica non ha preso in considerazione direttamente il tempo di inattività; ha preso in considerazione soltanto i cambiamenti avvenuti sulla pagina e non i momenti in cui la pagina non stava cambiando.
Percentili elevati di finestre brevi
La finestra scorrevole massima di 300 ms si è classificata molto elevata, così come il 95° percentile. Per quanto riguarda le finestre più brevi, l'interpolazione percentile è inferiore rispetto a finestre di dimensioni maggiori, ma ci preoccupavamo anche di "ripetere" finestre scorrevoli: se un insieme di variazioni di layout si verifica su due frame, ci sono più finestre da 300 ms che le includono. Prendere il massimo è molto più chiaro e semplice rispetto a quello al 95° percentile. Anche in questo caso abbiamo deciso di andare avanti e controllare il massimo.
Strategie che non hanno funzionato
Le strategie che cercavano di considerare l'esperienza "media" del tempo trascorso sia senza variazioni del layout sia con le variazioni del layout hanno avuto un rendimento molto scarso. Nessuno dei riepiloghi mediano o del 75° percentile di qualsiasi strategia di windowing ha classificato bene i siti. Neanche la somma delle variazioni del layout nel tempo.
Abbiamo valutato una serie di "budget" diversi per le variazioni di layout accettabili:
- Percentuale di variazioni del layout al di sopra di un certo budget. Per vari budget, il loro ranking è stato piuttosto basso.
- Variazione media del layout superiore a una certa quantità eccessiva. La maggior parte delle varianti di questa strategia ha avuto un rendimento scarso, ma l'eccesso medio in una sessione lunga con un divario considerevole ha registrato un rendimento quasi uguale alla media delle finestre di sessione con intervalli lunghi. Abbiamo deciso di procedere solo con la seconda opzione perché è più semplice.
Passaggi successivi
Analisi su larga scala
Abbiamo implementato in Chrome le principali strategie elencate sopra, in modo da poter ottenere dati sull'utilizzo reale per un insieme molto più ampio di siti web. Abbiamo intenzione di utilizzare un approccio simile di ranking dei siti in base ai loro punteggi delle metriche per eseguire l'analisi su larga scala:
- Classificare tutti i siti in base alla metrica CLS e a ogni nuova metrica candidato.
- Quali siti sono classificati in modo più diverso in base alla CLS e a ciascun candidato? Troviamo qualcosa di inaspettato quando analizziamo questi siti?
- Quali sono le maggiori differenze tra le nuove metriche candidati? Qualcuna delle differenze evidenzia i vantaggi o gli svantaggi di un candidato specifico?
- Ripeti l'analisi riportata sopra, raggruppando i dati in bucket in base al tempo trascorso su ogni caricamento pagina. Vediamo un miglioramento previsto per i caricamenti delle pagine di lunga durata con una variazione del layout accettabile? Vediamo risultati imprevisti per le pagine di breve durata?
Feedback sul nostro approccio
Ci piacerebbe ricevere un feedback su questi approcci da parte di sviluppatori web. Alcuni aspetti da tenere a mente quando si prendono in considerazione i nuovi approcci:
Che cosa rimane invariato
Vogliamo chiarire che molte cose non cambieranno con un nuovo approccio:
- Nessuna delle idee per le metriche che utilizziamo cambia il modo in cui i punteggi della variazione del layout per i singoli frame vengono calcolati, ma solo il modo in cui riassumiamo più frame. Ciò significa che l'API JavaScript per le variazioni di layout rimarrà invariata e anche gli eventi sottostanti in Chrome utilizzati dagli strumenti per sviluppatori resteranno invariati, quindi i retti di spostamento del layout in strumenti come WebPageTest e Chrome DevTools continueranno a funzionare allo stesso modo.
- Continueremo a lavorare sodo per rendere le metriche facili da adottare per gli sviluppatori, includendole nella libreria web-vitals, documentandole su web.dev e segnalandole nei nostri strumenti per sviluppatori come Lighthouse.
Confronto tra metriche
Una delle strategie principali riassume le finestre con variazioni del layout come media, mentre le altre indicano la finestra massima. Per le pagine aperte da molto tempo, la media riporterà probabilmente un valore più rappresentativo, ma in generale sarà probabilmente più facile per gli sviluppatori agire su un'unica finestra: possono registrare quando si è verificato, gli elementi che sono cambiati e così via. Ci piacerebbe ricevere un feedback più importante per gli sviluppatori.
Trovi più facili da comprendere le finestre scorrevoli o di sessione? Le differenze sono importanti per te?
Come inviare un feedback
Puoi provare le nuove metriche di variazione del layout su qualsiasi sito usando le nostre implementazioni JavaScript di esempio o il nostro fork dell'estensione Core Web Vitals.
Invia un feedback via email al nostro gruppo Google web-vitals-feedback, inserendo nella riga dell'oggetto "[Layout Shift Metrics]". Non vediamo l'ora di conoscere la tua opinione.