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 viene chiamata variazione del layout cumulativa perché il punteggio di ogni singolo adattamento viene sommato per tutta la durata della pagina.
Sebbene tutte le variazioni di layout rappresentino un'esperienza utente scadente, si sommano di più nelle pagine aperte più a lungo. Ecco perché il team per le metriche di velocità di Chrome 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 hanno spesso esperienze negative dopo il caricamento, durante lo scorrimento o la navigazione nelle pagine. Tuttavia, abbiamo sentito qualche preoccupazione in merito all'impatto sulle pagine di lunga durata, ossia quelle che l'utente generalmente ha aperto da molto tempo. Esistono diversi tipi di pagine che tendono a rimanere aperte più a lungo. Alcuni dei 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:
- Strumenti di scorrimento infiniti che spostano i contenuti mentre l'utente scorre la pagina.
- I gestori di input richiedono più di 500 ms per aggiornare l'interfaccia utente in risposta a un'interazione dell'utente, senza alcun tipo di segnaposto o schema di modello.
Incoraggiamo gli sviluppatori a migliorare queste esperienze utente, ma stiamo anche lavorando per migliorare la metrica e cercando feedback sui possibili approcci.
Come possiamo decidere 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.
Innanzitutto, abbiamo registrato video e tracce di Chrome di 34 percorsi degli utenti su vari siti web. Per selezionare i percorsi degli utenti, ci siamo concentrati su alcuni aspetti:
- Una varietà di tipi di siti, ad esempio siti di notizie e di shopping.
- Una serie di percorsi degli utenti, ad esempio caricamento iniziale della pagina, scorrimento, navigazioni nelle app su un'unica pagina e interazioni degli utenti.
- Cambiamenti relativi al numero e all'intensità delle singole variazioni di layout sui siti.
- Poche esperienze negative sui siti a parte variazioni del layout.
Abbiamo chiesto a 41 dei nostri colleghi di guardare due video alla volta, valutando quale dei due si è rivelato migliore in termini di variazione del layout. In base a queste valutazioni, abbiamo creato un ordine di ranking dei siti idealizzato. I risultati del ranking degli utenti hanno confermato i nostri sospetti che i nostri colleghi, come la maggior parte degli utenti, siano davvero frustrati dalle variazioni di layout dopo il caricamento, soprattutto durante lo scorrimento e le navigazioni nelle app di una sola pagina. Abbiamo notato che alcuni siti offrono esperienze utente molto migliori durante queste attività rispetto ad altri.
Poiché abbiamo registrato le tracce di Chrome insieme ai video, avevamo tutti i dettagli delle singole variazioni di layout in ogni percorso dell'utente. Le abbiamo usate per calcolare i valori delle metriche per ogni idea per ogni percorso dell'utente. In questo modo, abbiamo potuto vedere in che modo ciascuna variante di metrica classificava i percorsi degli utenti e quanto si differenziava dal ranking ideale.
Quali idee per le metriche abbiamo testato?
Strategie di windowing
Spesso le pagine presentano più variazioni di layout ravvicinate tra loro, perché gli elementi possono spostarsi più volte man mano che i nuovi contenuti vengono aggiunti pezzo per pezzo. Questo ci ha spinti a provare delle tecniche per raggruppare i cambiamenti. A questo scopo, abbiamo esaminato tre approcci di windowing:
- Finestre cadenti
- Finestre scorrevoli
- Finestre sessione
In ognuno di questi esempi, la pagina presenta variazioni del layout con gravità variabile nel tempo. Ogni barra blu rappresenta una singola variazione del layout e la lunghezza rappresenta il punteggio per quella variazione. Le immagini mostrano i modi in cui le diverse strategie di windowing raggruppano i cambiamenti del layout nel tempo.
Finestre cadenti
L'approccio più semplice consiste nel suddividere la pagina in finestre di blocchi di dimensioni uguali. Questi si chiamano finestre rotanti. Sopra puoi notare che la quarta barra sembra davvero essere raggruppata nella seconda finestra, ma poiché le finestre hanno tutte dimensioni fisse, si trova nella prima finestra. Se ci sono lievi differenze nella tempistica dei caricamenti o delle interazioni degli utenti sulla pagina, le stesse variazioni del layout potrebbero trovarsi su lati diversi dei confini delle finestre cadenti.
Finestre scorrevoli
Un approccio che ci consente di visualizzare un numero maggiore di raggruppamenti possibili della stessa lunghezza consiste nell'aggiornare continuamente la finestra potenziale nel tempo. L'immagine qui sopra mostra una finestra scorrevole alla volta, ma per creare una metrica potremmo osservare tutte le possibili finestre scorrevoli o un loro sottoinsieme.
Finestre sessione
Se volevamo concentrarci sull'identificazione delle aree della pagina con serie di variazioni del layout, potremmo avviare ogni finestra con un adattamento e continuare a farla crescere fino a trovare un divario di una data dimensione tra le variazioni di layout. Questo approccio raggruppa le variazioni di layout e ignora la maggior parte dell'esperienza utente permanente. Un potenziale problema è che, se non ci sono lacune nelle variazioni del layout, una metrica basata sulle finestre di sessione potrebbe crescere senza limitazioni, proprio come l'attuale metrica CLS. Quindi abbiamo provato anche con la dimensione massima della finestra.
Dimensioni finestra
La metrica potrebbe fornire risultati molto diversi a seconda delle dimensioni effettive delle finestre, quindi abbiamo provato a utilizzare finestre di dimensioni diverse:
- Ogni spostamento come finestra separata (nessuna finestra)
- 100 ms
- 300 ms
- 1 secondo
- 5 secondi
Riassunto
Abbiamo provato diversi 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 medio della finestra.
Budget
Ci siamo chiesti se forse esistesse un punteggio minimo di variazione del layout che gli utenti non avrebbero notato e potevamo semplicemente conteggiare le variazioni del layout oltre quel "budget" nel punteggio. Quindi, per i vari valori di "budget" potenziali, abbiamo esaminato la percentuale di variazioni rispetto al budget e il punteggio totale di spostamento rispetto al budget.
Altre strategie
Abbiamo anche esaminato molte strategie che non prevedevano finestre, ad esempio la variazione totale del layout diviso per il tempo sulla pagina e la media degli N singoli cambiamenti peggiori.
I risultati iniziali
Complessivamente, abbiamo testato 145 definizioni di metriche diverse in base alle permutazioni delle idee precedenti. Per ogni metrica, abbiamo classificato tutti i percorsi degli utenti in base al loro punteggio sulla metrica e, successivamente, abbiamo classificato le metriche in base al loro ranking ideale.
Per ottenere una base di riferimento, abbiamo anche classificato tutti i siti in base al loro punteggio CLS corrente. Il CLS si è classificato 32°, in parità con altre 13 strategie, pertanto il risultato è stato migliore della maggior parte delle permutazioni delle strategie di cui sopra. Per garantire che i risultati fossero significativi, abbiamo anche aggiunto tre ordinamenti casuali. Come previsto, gli ordinamenti casuali sono risultati peggio di ogni strategia testata.
Per capire se potremmo eseguire un overfitting per il set di dati, dopo la nostra analisi abbiamo registrato alcuni nuovi video e tracce sulle variazioni del layout, li abbiamo classificati manualmente e abbiamo visto che i ranking delle metriche erano molto simili per il nuovo set di dati e quello originale.
Alcune strategie diverse sono state messe in evidenza nella classifica.
Strategie migliori
Quando abbiamo classificato le strategie, abbiamo scoperto che in cima all'elenco ci sono tre tipi di strategie. Ognuno ha ottenuto all'incirca lo stesso rendimento, quindi prevediamo di procedere con un'analisi più approfondita. 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 al momento di decidere. Leggi di seguito per informazioni su come inviare un feedback.
Percentili elevati di finestre lunghe
Ecco alcune strategie di windowing che 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 senza limiti con un intervallo di 1 secondo
Tutti questi si sono classificati 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 esaminando solo 4-6 finestre e prendere il 95° percentile di questa cifra equivale a molta interpolazione. Non è chiaro cosa stia facendo l'interpolazione in termini di valore della metrica. Il valore massimo è molto più chiaro, quindi abbiamo deciso di procedere con il controllo del valore massimo.
Media delle finestre di sessione con intervalli lunghi
La media dei punteggi di tutte le finestre di sessione senza limite con intervalli di 5 secondi tra loro ha funzionato davvero bene. Questa strategia presenta alcune caratteristiche interessanti:
- Se la pagina non presenta intervalli vuoti tra le variazioni di layout, si tratta di una lunga finestra di sessione con lo stesso punteggio esatto della metrica CLS corrente.
- Questa metrica non prendeva direttamente in considerazione il tempo di inattività; prendeva in considerazione soltanto le variazioni avvenute nella pagina e non i momenti in cui la pagina non veniva spostata.
Percentili elevati di finestre brevi
La finestra scorrevole massima di 300 ms ha ottenuto un ranking molto elevato, nonché il 95° percentile. Per le dimensioni delle finestre più brevi, c'è un'interpolazione meno percentile rispetto alle dimensioni delle finestre più grandi, ma eravamo anche preoccupati della "ripetizione" delle finestre scorrevoli: se un insieme di variazioni di layout si verifica in due frame, ci sono più finestre da 300 ms che le includono. Ottenere il massimo è molto più chiaro e semplice rispetto al 95° percentile. Anche in questo caso abbiamo deciso di andare avanti e controllare il valore massimo.
Strategie che non hanno dato buoni risultati
Le strategie che hanno cercato di prendere in considerazione l'esperienza "media" del tempo trascorso sia senza variazioni del layout sia con variazioni del layout hanno dato risultati molto scarsi. Nessuno dei riepiloghi della mediana o del 75° percentile di alcuna strategia di windowing ha classificato bene i siti. E nemmeno la somma delle variazioni di layout nel tempo.
Abbiamo valutato diversi "budget" per variazioni del layout accettabili:
- Percentuale di variazioni del layout al di sopra del budget. Per budget diversi, questi hanno un ranking molto basso.
- Variazione media del layout sopra un po' di eccesso. La maggior parte delle variazioni di questa strategia ha dato risultati scarsi, ma gli eccessi medi in una sessione lunga con un ampio divario sono stati quasi pari alla media delle finestre di sessione con intervalli lunghi. Abbiamo deciso di procedere solo con quest'ultimo perché è più semplice.
Passaggi successivi
Analisi su larga scala
Abbiamo implementato le principali strategie elencate sopra in Chrome, in modo da poter ottenere dati sull'utilizzo reale per una serie molto più ampia di siti web. Prevediamo di utilizzare un approccio simile per il ranking dei siti in base ai punteggi delle metriche per eseguire l'analisi su larga scala:
- Ranking di tutti i siti in base al CLS e a ogni nuova metrica candidata.
- Quali siti vengono classificati in modo più diverso in base al CLS e a ciascun candidato? Troviamo qualcosa di inaspettato quando esaminiamo questi siti?
- Quali sono le maggiori differenze tra le nuove metriche candidati? Qualcuna delle differenze si distingue come vantaggi o svantaggi di un candidato specifico?
- Ripeti l'analisi descritta sopra, ma esegui il bucketing in base al tempo trascorso a ogni caricamento pagina. Noti un miglioramento previsto per i caricamenti di 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 feedback dagli sviluppatori web su questi approcci. Alcuni aspetti da tenere presenti durante la valutazione dei nuovi approcci:
Che cosa rimane invariato
Ci teniamo a chiarire che molte cose non cambieranno con un nuovo approccio:
- Nessuna delle nostre idee per le metriche cambia il modo in cui vengono calcolati i punteggi di variazione del layout per i singoli frame, ma solo il modo in cui riassumiamo più frame. Ciò significa che l'API JavaScript per le variazioni del layout rimarrà invariata e anche gli eventi sottostanti nelle tracce di Chrome usate dagli strumenti per sviluppatori rimarranno invariati, quindi i comandi di spostamento del layout in strumenti come WebPageTest e Chrome DevTools continueranno a funzionare allo stesso modo.
- Continueremo a impegnarci per semplificare l'adozione delle metriche per gli sviluppatori, incluse le metriche nella libreria degli elementi vitali web, la documentazione su web.dev e la segnalazione nei nostri strumenti per sviluppatori come Lighthouse.
Compromissioni tra le metriche
Una delle strategie principali riassume le finestre di variazione del layout come media, mentre le altre indicano la finestra massima. Nel caso di pagine aperte da molto tempo, la media probabilmente riporterà un valore più rappresentativo, ma in generale gli sviluppatori saranno probabilmente più facili da gestire su un'unica finestra: potranno registrare quando si è verificata, gli elementi che sono cambiati e così via. Ci piacerebbe ricevere un feedback su ciò che è più importante per gli sviluppatori.
Trovi più facili da comprendere le finestre di scorrimento o di sessione? Le differenze sono importanti per te?
Come inviare un feedback
Puoi provare le nuove metriche relative alla variazione del layout su qualsiasi sito utilizzando le nostre implementazioni JavaScript di esempio o il nostro fork dell'estensione Core Web Vitals.
Invia un feedback al nostro gruppo Google web-vitals-feedback, inserendo "[Layout Shift Metrics]" nella riga dell'oggetto. Non vediamo l'ora di sapere cosa ne pensi.