A partire da oggi, è stata implementata una modifica a CLS su diverse piattaforme di strumenti web di Chrome, tra cui Lighthouse, PageSpeed Insights e Report sull'esperienza utente di Chrome.
Oggi vorremmo parlare di come stiamo evolvendo la misurazione della metrica Cumulative Layout Shift (CLS) su diverse piattaforme di strumenti web di Chrome. Per gli sviluppatori, queste modifiche rifletteranno meglio l'esperienza utente relativa alle pagine di lunga durata (ad esempio quelle con app a scorrimento continuo o a pagina singola). Questi aggiornamenti a CLS verranno implementati in strumenti come Lighthouse, PageSpeed Insights e Report sull'esperienza utente di Chrome.
Speriamo tutti di vedere meno modifiche del layout sul web. È in questi casi che la metrica CLS si è rivelata utile per misurare la stabilità visiva di una pagina web. Contribuisce a incoraggiare i siti a impostare meglio le dimensioni dei contenuti, ad esempio immagini o annunci, che potrebbero contribuire a sorprendenti salti di contenuti per gli utenti.
La metrica è denominata "cumulativa" perché il punteggio di ogni singola variazione viene sommato per tutta la durata di una pagina. Sebbene tutte le variazioni di layout sul web comportino un'esperienza utente negativa, le pagine di lunga durata come le app a pagina singola (APS) o le app a scorrimento continuo accumulano naturalmente più CLS nel tempo. Limitando l'aggregazione alla "finestra" peggiore di variazioni, la metrica CLS può ora essere misurata in modo più coerente, indipendentemente dalla durata della sessione.
Come annunciato durante l'evoluzione della metrica CLS, stiamo regolando la metrica CLS su una finestra massima di sessione con un intervallo massimo di 1 secondo, limitato a 5 secondi, questo aggiornamento riflette meglio l'esperienza utente delle pagine di lunga durata. Con questa modifica, il 70% delle origini non dovrebbe aspettarsi alcuna variazione della CLS al 75° percentile, mentre il restante 30% delle origini vedrà un miglioramento.
Implementazione della regolazione delle finestre a CLS
Abbiamo parlato della definizione CLS aggiornata, ovvero una finestra massima di sessione con un intervallo di 1 secondo, limitato a 5 secondi. Cosa significa per gli strumenti?
A partire da oggi, questa modifica a CLS è stata implementata su diverse piattaforme di strumenti web di Chrome, tra cui Lighthouse, PageSpeed Insights e Report sull'esperienza utente di Chrome. Di seguito puoi vedere un riepilogo dell'implementazione delle modifiche alle finestre CLS, nonché degli strumenti che offrono ancora la possibilità di confrontare l'implementazione originale.
| Strumento | Regolazione della finestra CLS in tempo reale | Disponibilità CLS "precedente" |
|---|---|---|
| Riquadro Lighthouse DevTools | Canale Canary, 2 giugno 2021 | N/A |
| interfaccia a riga di comando Lighthouse | v8, rilasciata il 1° giugno 2021 | Disponibile come totalCumulativeLayoutShift in Lighthouse v8 |
| IC Lighthouse | v0.7.3, 3 giugno 2021 | N/A |
| PageSpeed Insights (PSI) | 1 giugno 2021 | NA |
| API PSI | 1 giugno 2021 | Disponibile nel lighthouseResult come totalCumulativeLayoutShift. Non disponibile nel campo dei dati loadingExperience |
| Report sull'esperienza utente di Chrome (CrUX) - BigQuery | Set di dati 202105, pubblicato l'8 giugno 2021 | Disponibili come experimental.uncapped_cumulative_layout_shift fino al 202111 |
| Report UX di Chrome (CrUX) - API | 1 giugno 2021 | Dopo il 1° giugno 2021, disponibile come
experimental_uncapped_cumulative_layout_shift
e fino al 14 dicembre 2021 |
A breve verrà aggiornato anche Chrome DevTools per supportare la regolazione delle finestre. L'aggiornamento al CLS è stato apportato anche a Search Console e si rifletterà a partire dal 1° giugno 2021.
Per la maggior parte degli sviluppatori, questo cambiamento dovrebbe avvenire senza problemi e non richiede alcuna azione per sfruttare i dati raccolti.
CLS "vecchio"
Ti ricordiamo che il CLS "precedente" misura lo spostamento del layout durante l'intera durata della pagina. Poiché alcuni sviluppatori potrebbero voler monitorare la definizione precedente di CLS insieme all'aggiustamento delle finestre, abbiamo una buona notizia da condividere: stiamo esponendo il "CLS precedente" in Lighthouse e CrUX.
In Lighthouse v8 è disponibile nel formato JSON come audits['cumulative-layout-shift'].details.items[0].totalCumulativeLayoutShift.
Lo troverai come
experimental_uncapped_cumulative_layout_shift
nell'API CrUX e come
experimental.uncapped_cumulative_layout_shift in CrUX BigQuery.
Dopo il 1° giugno, le richieste API di CrUX restituiranno la metrica "CLS precedente":
{
"origin": "https://web.dev",
"metrics": [
"experimental_uncapped_cumulative_layout_shift"
]
}
Dopo l'8 giugno, il seguente CrUX BigQuery confronterà il vecchio e il nuovo CLS:
WITH
new_data AS (
SELECT
cls
FROM
`chrome-ux-report.all.202105`,
UNNEST(layout_instability.cumulative_layout_shift.histogram.bin) AS cls
WHERE
origin = 'https://web.dev'
AND effective_connection_type.name = '4G'
AND form_factor.name = 'phone'),
old_data AS (
SELECT
uncapped_cls
FROM
`chrome-ux-report.all.202105`,
UNNEST(experimental.uncapped_cumulative_layout_shift.histogram.bin) AS uncapped_cls
WHERE
origin = 'https://web.dev'
AND effective_connection_type.name = '4G'
AND form_factor.name = 'phone')
SELECT
cls.start AS start,
cls.`END` AS `end`,
cls.density AS cls_density,
uncapped_cls.density AS uncapped_cls_density
FROM
new_data
INNER JOIN
old_data
ON
new_data.cls.start = old_data.uncapped_cls.start
Potrai continuare a fare affidamento su questi dati per rimanere presente per un periodo fino a 6 mesi, con il ritiro del "CLS precedente" il 14 dicembre 2021.
Aggiornamento della ponderazione CLS in Lighthouse
Quando la CLS è stata introdotta per la prima volta in Lighthouse, era una metrica completamente nuova. Di conseguenza, per fare in modo che gli sviluppatori avessero il tempo di eseguire test, benchmark e ottimizzazione, CLS è stato valutato meno pesantemente nel punteggio delle prestazioni.
Ora, dopo aver avuto un po' di tempo nelle mani degli sviluppatori, il punteggio Lighthouse ha aumentato il peso della metrica CLS dal 5% al 15%, in linea con la metodologia per cui Segnali web essenziali sono le metriche con un peso maggiore nel punteggio Lighthouse.
Puoi trovare le ponderazioni aggiornate delle metriche in Lighthouse v8 nel calcolatore dei punteggi.
L'implementazione CLS di Lighthouse 8.0 include sia il windowing che il contributo CLS dai sottoframe. Prima della versione 8.0, CLS in Lighthouse non includeva il valore CLS dei frame secondari nel calcolo delle metriche, ma ora lo fa. A titolo di conferma, la metrica CLS sul campo misurata da CrUX gestisce anche le finestre e i frame secondari in modo simile.
Tuttavia, la differenza principale tra il CLS di laboratorio e quello sul campo è che la finestra di osservazione del CLS del lab termina con il valore "completamente caricato", come determinato in base alle condizioni di laboratorio, mentre la finestra di osservazione sul campo si estende all'intera durata della pagina, inclusa l'attività post-caricamento. Detto questo, la modifica delle finestre mitiga sostanzialmente questa differenza.
Misurare personalmente l'attività sul campo
Se vuoi misurare l'implementazione CLS più recente, puoi anche registrarla per i dati dei campi tramite RUM utilizzando il seguente snippet PerformanceObservationr.
In alternativa, puoi affidarti direttamente alla libreria JavaScript di Web Vitals, che è stata aggiornata anch'essa con questa modifica.
Aggiornamenti aggiuntivi
Oltre agli aggiornamenti di Cumulative Layout Shift, abbiamo apportato anche i seguenti aggiornamenti relativi alle metriche ai nostri strumenti web:
- Stiamo aggiornando la definizione più recente della metrica Largest Contentful Paint. API CrUX, PSI, API PSI e Search Console verranno aggiornate il 1° giugno 2021. CrUX BigQuery verrà aggiornato l'8 giugno 2021.
- In CrUX, le soglie di tri-binning della First Contentful Paint sono state aggiornate in Buono: [0-1,8 s], Richiede miglioramenti: (1,8 s-3 s), Scadente: [3 s-∞]
Conclusioni
Prevediamo che questa modifica rifletta una transizione senza problemi per la maggior parte dei siti e ti invitiamo a consultare Web Vitals e Optimize CLS per suggerimenti utili su come misurare e ottimizzare le variazioni del layout. Come sempre, non esitare a contattare il gruppo web-vitals-feedback per ricevere feedback sulle metriche, i nostri forum di feedback specifici sugli strumenti per Lighthouse e il Report sull'esperienza utente di Chrome per i problemi relativi agli strumenti. Un saluto!
Grazie a Johannes Henkel, Rick Viscomi, Vivek Sekhar, Rachel Andrew, Milica Mihajlija, Jeff Jose e Paul Ireland per il loro feedback.
Immagine hero di Barn Images / @barnimages su Unsplash