Piani per migliorare la metrica CLS affinché sia più equo per le pagine di lunga durata.
Di recente, il team per le metriche della velocità di Chrome ha descritto la nostra ricerca iniziale sulle opzioni per rendere la metrica CLS più equa per le pagine aperte da molto tempo. Abbiamo ricevuto molti feedback utili e, dopo aver completato l'analisi su larga scala, abbiamo finalizzato la modifica che prevediamo di apportare alla metrica: finestra massima della sessione con un intervallo di 1 secondo, limitato a 5 secondi.
Leggi per i dettagli.
Come abbiamo valutato le opzioni?
Abbiamo esaminato tutti i feedback ricevuti dalla community di sviluppatori e li abbiamo presi in considerazione.
Abbiamo anche implementato le opzioni principali in Chrome e eseguito un'analisi su larga scala delle metriche in milioni di pagine web. Abbiamo verificato quali tipi di siti sono migliorati per ogni opzione e come sono state messe a confronto le varie opzioni, in particolare esaminando i siti a cui è stato assegnato un punteggio diverso a seconda delle opzioni. Nel complesso, abbiamo riscontrato che:
- Tutte le opzioni hanno ridotto la correlazione tra il tempo trascorso sulla pagina e il punteggio di variazione del layout.
- Nessuna delle opzioni ha portato a un punteggio peggiore per una pagina. Non è quindi necessario preoccuparsi che questo cambiamento peggiorino i punteggi del vostro sito.
Punti decisionali
Perché una finestra di sessione?
Nel post precedente, abbiamo trattato alcune strategie di windowing diverse per raggruppare le variazioni di layout garantendo al contempo che il punteggio non aumenti senza limiti. Il feedback che abbiamo ricevuto dagli sviluppatori ha preferito in gran parte la strategia relativa alla finestra della sessione perché raggruppa le variazioni di layout in modo più intuitivo.
Per esaminare le finestre di sessione, ecco un esempio:
Nell'esempio precedente, molte variazioni del layout si verificano nel tempo quando l'utente visualizza la pagina. Ciascuno dei due è rappresentato da una barra blu. Sopra puoi notare che le barre blu hanno altezze diverse, che rappresentano il punteggio di ogni singola variazione del layout. Il periodo iniziale di una sessione inizia con la prima variazione del layout e continua a espandersi finché non c'è un divario senza variazioni. Quando si verifica la successiva variazione del layout, viene avviata una nuova finestra di sessione. Poiché ci sono tre lacune senza variazioni del layout, nell'esempio sono presenti tre finestre di sessione. Analogamente alla definizione attuale di CLS, i punteggi di ogni variazione vengono sommati in modo che il punteggio di ogni finestra sia la somma delle singole variazioni del layout.
In base alla ricerca iniziale, abbiamo scelto un intervallo di 1 secondo tra le finestre delle sessioni e questo divario ha funzionato bene nella nostra analisi su larga scala. Pertanto, il "Intervallo sessione" mostrato nell'esempio precedente è di 1 secondo.
Perché scegliere il periodo massimo per la sessione?
Nella nostra ricerca iniziale, abbiamo ristretto le strategie di riassunto a due opzioni:
- Il punteggio medio di tutte le finestre di sessione, per le finestre di sessione molto grandi (finestre non limitate con intervalli di 5 secondi tra loro).
- Il punteggio massimo di tutte le finestre di sessione, per periodi di sessione più piccoli (con limite di 5 secondi, con intervalli di 1 secondo tra loro).
Dopo la ricerca iniziale, abbiamo aggiunto ogni metrica a Chrome in modo da poter eseguire un'analisi su larga scala su milioni di URL. Nell'analisi su larga scala, abbiamo trovato molti URL con modelli di variazione del layout come questo:
In basso a destra, puoi vedere che c'è una sola piccola variazione del layout nella finestra sessione 2, che assegna un punteggio molto basso. Ciò significa che il punteggio medio è piuttosto basso. Ma cosa succede se lo sviluppatore risolve questo piccolo cambiamento del layout? A questo punto, il punteggio viene calcolato proprio nella finestra sessione 1, il che significa che il punteggio della pagina quasi raddoppia. Sarebbe molto confuso e scoraggiante per gli sviluppatori migliorare le variazioni del layout per poi scoprire che il punteggio è peggiorato. Inoltre, rimuovere questa piccola variazione del layout è ovviamente leggermente migliore per l'esperienza utente, quindi non dovrebbe peggiorare il punteggio.
A causa di questo problema con le medie, abbiamo deciso di procedere con il numero massimo ridotto, limitato e limitato. Quindi, nell'esempio precedente, la finestra della sessione 2 verrebbe ignorata e verrà riportata solo la somma delle variazioni di layout nella finestra della sessione 1.
Perché 5 secondi?
Abbiamo valutato diverse dimensioni delle finestre e riscontrato due aspetti:
- Per le finestre brevi, i caricamenti delle pagine più lenti e le risposte alle interazioni degli utenti più lente potrebbero suddividere le variazioni del layout in più finestre e migliorare il punteggio. Volevamo mantenere la finestra abbastanza grande in modo da non premiare i rallentamenti.
- Alcune pagine presentano un flusso continuo di piccole variazioni di layout. Ad esempio, una pagina di risultati sportivi che cambia leggermente a ogni aggiornamento dei risultati. Questi cambi sono fastidiosi, ma con il passare del tempo non diventano più fastidiosi. Abbiamo quindi voluto assicurarci che la finestra fosse limitata per questi tipi di variazioni del layout.
Tenendo a mente questi due aspetti, confrontando diverse dimensioni di finestre su molte pagine web reali, abbiamo concluso che 5 secondi sarebbero un buon limite alle dimensioni delle finestre.
In che modo ciò influirà sul punteggio CLS della mia pagina?
Poiché questo aggiornamento limita il CLS di una pagina, nessuna pagina avrà un punteggio peggiore a causa di questa modifica.
In base alla nostra analisi, il 55% delle origini non noterà alcun cambiamento nel CLS al 75° percentile. Questo perché le loro pagine non presentano al momento variazioni di layout o le modifiche sono già limitate a una singola sessione di sessione.
Il resto delle origini noterà miglioramenti ai punteggi al 75° percentile con questa modifica. La maggior parte noterà solo un lieve miglioramento, ma circa il 3% vedrà migliorare i propri punteggi passando da una valutazione "Richiede miglioramenti" o "Scadente" a una valutazione "Buona". Queste pagine tendono a utilizzare scorrimenti infiniti o ad avere molti aggiornamenti dell'interfaccia utente lenti, come descritto nel nostro post precedente.
Come posso provarlo?
A breve aggiorneremo i nostri strumenti per utilizzare la nuova definizione di metrica. Fino ad allora, puoi provare la versione aggiornata di CLS su qualsiasi sito utilizzando le implementazioni JavaScript di esempio o il fork dell'estensione Web Vitals.
Grazie a tutte le persone che hanno letto il post precedente e condividere il loro feedback.