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. La metrica si chiama variazione del layout cumulativa perché il punteggio di ogni singola variazione viene sommato per tutta la durata della pagina.
Sebbene tutti i cambiamenti di layout siano esperienze utente negative, si accumulano maggiormente nelle pagine aperte per più tempo. 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 hanno esperienze negative dopo il caricamento, durante lo scorrimento o la navigazione tra le pagine. Tuttavia, ci sono state segnalate preoccupazioni in merito all'impatto di questa misura sulle pagine a lungo termine, ovvero quelle che l'utente generalmente tiene aperte per 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 le applicazioni a pagina singola.
Un'analisi interna delle pagine di lunga durata con punteggi CLS elevati ha rilevato che la maggior parte dei problemi è stata causata dai seguenti pattern:
- Scorrimento continuo che sposta i contenuti man mano che 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.
Sebbene incoraggiamo gli sviluppatori a migliorare queste esperienze utente, ci stiamo adoperando anche per migliorare la metrica e ricerchiamo feedback su possibili approcci.
Come possiamo decidere se una nuova metrica è migliore?
Prima di iniziare a progettare le metriche, volevamo assicurarci di valutare le nostre idee su una vasta gamma di casi d'uso e pagine web 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 scelta dei percorsi degli utenti, abbiamo perseguito alcuni obiettivi:
- Vari tipi di siti, come quelli di notizie e di shopping.
- Una serie di percorsi utente, come il caricamento iniziale della pagina, lo scorrimento, la navigazione nelle app a pagina singola e le interazioni utente.
- Una varietà di numero e intensità delle singole variazioni di layout sui siti.
- Poche esperienze negative sui siti, a parte i cambiamenti di layout.
Abbiamo chiesto a 41 dei nostri colleghi di guardare due video alla volta e di valutare quale dei due fosse migliore in termini di cambiamento di layout. Da queste valutazioni abbiamo creato un ordine di ranking ideale dei siti. I risultati del ranking degli utenti hanno confermato i nostri sospetti che i nostri colleghi, come la maggior parte degli utenti, sono davvero frustrati dai cambiamenti di layout dopo il caricamento, in particolare durante lo scorrimento e la navigazione nelle app a pagina singola. 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, abbiamo avuto tutti i dettagli dei singoli cambiamenti di layout in ogni percorso dell'utente. Li abbiamo utilizzati per calcolare i valori delle metriche per ogni idea e per ogni percorso dell'utente. In questo modo abbiamo potuto vedere in che modo ogni variante della metrica classificava i percorsi degli utenti e quanto ciascuna differisse dal ranking ideale.
Quali idee per le metriche abbiamo testato?
Strategie di finestra temporale
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 tecniche per raggruppare i turni. Per farlo, abbiamo esaminato tre approcci alla definizione delle finestre:
- Finestre a cascata
- Finestre scorrevoli
- Finestre di sessione
In ciascuno di questi esempi, la pagina presenta variazioni del layout di gravità diversa nel tempo. Ogni barra blu rappresenta una singola variazione del layout e la lunghezza rappresenta il punteggio di quella variazione. Le immagini mostrano in che modo le diverse strategie di windowing raggruppano le modifiche del layout nel tempo.
Finestre a cascata
L'approccio più semplice consiste semplicemente nel suddividere la pagina in finestre di blocchi di dimensioni uguali. Queste sono chiamate finestre con aggregazione. Sopra noterai che la quarta barra sembra dover essere raggruppata nella seconda finestra con scorrimento, ma poiché le finestre sono tutte di dimensioni fisse, si trova nella prima finestra. Se ci sono lievi differenze nei tempi di caricamento o nelle interazioni degli utenti sulla pagina, le stesse variazioni del layout potrebbero trovarsi su lati diversi dei confini della finestra di rotazione.
Finestre scorrevoli
Un approccio che ci consente di vedere più raggruppamenti possibili della stessa lunghezza è aggiornare continuamente la finestra di opportunità 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 modifiche al layout e ignora la maggior parte dell'esperienza utente non mutevole. Un potenziale problema è che, se non sono presenti spazi vuoti nelle variazioni del layout, una metrica basata sulle finestre delle sessioni potrebbe crescere in modo illimitato, proprio come la metrica CLS attuale. Abbiamo quindi provato anche con una dimensione massima della finestra.
Dimensioni delle 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 riepilogare 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 ci fosse un punteggio minimo per la variazione del layout che gli utenti non avrebbero notato e che potremmo conteggiare solo le variazioni del layout oltre quel "budget" nel punteggio. Pertanto, per vari valori potenziali di "budget", abbiamo esaminato la percentuale di variazioni rispetto al budget e il punteggio di spostamento totale rispetto al budget.
Altre strategie
Abbiamo anche esaminato molte strategie che non prevedevano finestre, come la variazione totale del layout divisa per il tempo sulla pagina e la media dei peggiori N cambiamenti individuali.
I risultati iniziali
In totale, abbiamo testato 145 diverse definizioni di metriche in base alle permutazioni delle idee riportate sopra. Per ogni metrica, abbiamo classificato tutti i percorsi utente in base al relativo punteggio e poi le metriche in base alla vicinanza al ranking ideale.
Per ottenere un riferimento, abbiamo anche classificato tutti i siti in base al loro attuale punteggio CLS. CLS si è classificata al 32° posto, a pari merito con altre 13 strategie, quindi è stata migliore della maggior parte delle permutazioni delle strategie sopra indicate. Per garantire che i risultati fossero significativi, abbiamo aggiunto anche tre ordini casuali. Come previsto, le ordinazioni casuali hanno avuto un rendimento peggiore rispetto a tutte le strategie testate.
Per capire se il modello potrebbe essere soggetto a overfitting per il set di dati, dopo la nostra analisi abbiamo registrato alcuni nuovi video e tracce di variazione del layout, li abbiamo classificati manualmente e abbiamo notato che i ranking delle metriche erano molto simili per il nuovo set di dati e per quello originale.
Nei ranking sono emerse alcune strategie diverse.
Le migliori strategie
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. Vorremmo anche ricevere il feedback degli sviluppatori per capire se ci sono fattori al di fuori dell'esperienza utente che dovremmo prendere in considerazione per scegliere tra le due opzioni. (Scopri di seguito come inviare 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 con un limite di 5 secondi e un intervallo di 1 secondo
- Finestre di sessione senza limite con intervallo di 1 secondo
Si è classificato molto bene sia al 95° percentile che al massimo.
Tuttavia, per dimensioni delle finestre così grandi, eravamo preoccupati di utilizzare il 95° percentile: spesso esaminavamo solo 4-6 finestre e il 95° percentile di queste richiedeva un'interpolazione molto elevata. 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 non limitate con intervalli di 5 secondi 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 mobile massima di 300 ms ha ottenuto un punteggio molto elevato, così come il 95° percentile. Per le dimensioni della finestra più brevi, l'interpolazione percentile è inferiore rispetto alle dimensioni più grandi, ma ci preoccupavamo anche delle finestre scorrevoli "ripetute": se si verifica una serie di cambiamenti di layout in due frame, esistono più finestre di 300 ms che li includono. Il valore massimo è molto più chiaro e semplice del valore del 95° percentile. Anche in questo caso abbiamo deciso di andare avanti e controllare il massimo.
Strategie che non hanno funzionato
Le strategie che hanno cercato di esaminare l'esperienza "media" del tempo trascorso sia senza cambiamenti di layout sia con cambiamenti di layout hanno avuto scarsi risultati. Nessuno dei riepiloghi della mediana o del 75° percentile di qualsiasi strategia di finestratura ha assegnato un buon ranking ai siti. Né la somma delle variazioni di layout nel tempo.
Abbiamo valutato una serie di "budget" diversi per verificare la possibilità di apportare modifiche accettabili al layout:
- La percentuale di modifiche al layout supera un determinato budget. Per vari budget, tutti questi metodi hanno ottenuto un ranking 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 quest'ultima 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. Per l'analisi su larga scala, prevediamo di utilizzare un approccio simile per classificare i siti in base ai punteggi delle metriche:
- Classificare tutti i siti in base alla metrica CLS e a ogni nuova metrica candidato.
- Quali siti hanno un ranking più diverso in base al CLS e a ciascun candidato? Troviamo qualcosa di inaspettato quando esaminiamo questi siti?
- Quali sono le differenze maggiori tra le nuove metriche candidate? Alcune delle differenze si distinguono come vantaggi o svantaggi di un candidato specifico?
- Ripeti l'analisi precedente, ma raggruppando i dati in base al tempo trascorso per ogni caricamento di pagina. Notiamo un miglioramento previsto per i caricamenti di pagine di lunga durata con uno spostamento del layout accettabile? Sono presenti risultati inaspettati per le pagine di breve durata?
Feedback sul nostro approccio
Ci farebbe piacere ricevere il feedback degli sviluppatori web su questi approcci. Ecco alcuni aspetti da tenere presenti quando valuti i nuovi approcci:
Che cosa rimane invariato
Vogliamo chiarire che molte cose non cambieranno con il nuovo approccio:
- Nessuna delle nostre idee per le metriche cambia il modo in cui vengono calcolati i punteggi delle variazioni del layout per i singoli frame, ma solo il modo in cui riassumiamo più frame. Ciò significa che l'API JavaScript per i cambiamenti di layout rimarrà invariata, così come gli eventi sottostanti nelle tracce di Chrome utilizzati dagli strumenti per sviluppatori, pertanto i rettangoli 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 da parte degli sviluppatori, includendole nella libreria web-vitals, documentandole su web.dev e riportandole nei nostri strumenti per sviluppatori come Lighthouse.
Compromessi tra le metriche
Una delle strategie principali riassume le finestre di variazione del layout come media, mentre le altre riportano 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 il feedback via email al nostro gruppo Google web-vitals-feedback, inserendo "[Metriche relative allo spostamento del layout]" nella riga dell'oggetto. Non vediamo l'ora di conoscere la tua opinione.