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 vogliamo spiegare come stiamo evolvendo la misurazione dei Cumulative Layout Shift (CLS) metrica su diverse piattaforme di strumenti web di Chrome. Per gli sviluppatori, queste modifiche rifletteranno meglio l'esperienza utente pagine di lunga durata (come quelle con scorrimento continuo o app a pagina singola). Questi aggiornamenti di CLS verranno implementati con strumenti come Lighthouse, PageSpeed Insights e report sull'esperienza utente di Chrome.
Ci piacerebbe vedere meno variazioni del layout sul web. È qui 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 per i contenuti, come immagini o annunci, contenuti che potrebbero contribuire a sorprendere i loro utenti.
La metrica è denominata "cumulativa" perché il punteggio di ogni singolo turno viene sommato per tutta la durata di una pagina. Anche se tutte le variazioni di layout sul web causano un'esperienza utente scadente, 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 adattamenti, Ora la metrica CLS può essere misurata in modo più coerente, indipendentemente dalla durata della sessione.
Come annunciato nella sezione Evolvere della metrica CLS, stiamo regolando la metrica CLS in modo che finestra massima della sessione con un intervallo di 1 secondo, limitato a 5 secondi, questo aggiornamento riflette meglio l'esperienza utente per le pagine di lunga durata. Con questa modifica, il 70% delle origini non dovrebbe aspettarsi di vedere variazioni della CLS al 75° percentile, mentre il restante 30% vedrà un miglioramento.
Implementazione della regolazione del windowing per CLS
Abbiamo parlato dell'aggiornamento della definizione CLS, ovvero una finestra massima di sessione con un intervallo di 1 secondo. è limitato a 5 secondi. Cosa significa tutto questo per gli strumenti?
A partire da oggi, questa modifica a CLS è stata implementata in 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 degli aggiustamenti del windowing della CLS. nonché gli strumenti che consentono di confrontare i dati con l'implementazione originale.
| Strumento | Regolazione in tempo reale del windowing CLS | "Precedente" Disponibilità CLS |
|---|---|---|
| Riquadro DevTools di Lighthouse | Canale canary, 2 giugno 2021 | N/D |
| Interfaccia a riga di comando Lighthouse | v8, rilasciata il 1° giugno 2021 | Disponibile come totalCumulativeLayoutMaiusc in Lighthouse v8 |
| CI Lighthouse | v0.7.3, 3 giugno 2021 | N/D |
| PageSpeed Insights (PSI) | 1 giugno 2021 | ND |
| API PSI | 1 giugno 2021 | Disponibile in lighthouseResult come totalCumulativeLayoutShift. Non disponibile nei dati del campo loadingExperience |
| Report sull'esperienza utente di Chrome (CrUX) - BigQuery | set di dati 202105, pubblicato l'8 giugno 2021 | Disponibile come da experimental.uncapped_cumulative_layout_shift fino al 202111 |
| Report sull'esperienza utente di Chrome (CrUX) - API | 1 giugno 2021 | Dopo il 1° giugno 2021, disponibile come
experimental_uncapped_cumulative_layout_shift
14 dicembre 2021 |
A breve anche Chrome DevTools verrà aggiornato per supportare la regolazione del windowing. L'aggiornamento alla CLS è stato apportato anche a Search Console e sarà aggiornato a partire dal 1° giugno 2021.
Per la maggior parte degli sviluppatori, Ci si aspetta che questa modifica avvenga senza problemi, senza bisogno di alcuna azione per sfruttare i dati della correzione.
"Precedente" CLS
Ricorda che la "vecchia" La metrica CLS misura la variazione del layout nell'intera durata della pagina. Poiché alcuni sviluppatori potrebbero voler monitorare la definizione precedente di CLS insieme all'aggiustamento del windowing, abbiamo una buona notizia da condividere: stiamo mettendo in evidenza i "vecchi CLS" in Lighthouse e CrUX.
In Lighthouse v8,
è disponibile nel file JSON
audits['cumulative-layout-shift'].details.items[0].totalCumulativeLayoutShift.
È indicato 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 dell'API CrUX restituiranno la "vecchia CLS" metrica:
{
"origin": "https://web.dev",
"metrics": [
"experimental_uncapped_cumulative_layout_shift"
]
}
Dopo l'8 giugno, i seguenti BigQuery di CrUX confronterà la vecchia e la nuova 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 sulla presenza di questi dati per un periodo massimo di 6 mesi. con "vecchia CLS" verrà ritirato il 14 dicembre 2021.
Aggiornamento della ponderazione CLS in Lighthouse
Quando la CLS è stata introdotta per la prima volta in Lighthouse, era una nuova metrica brillante. Di conseguenza, per garantire che gli sviluppatori abbiano il tempo di testare, confrontare e ottimizzare in base a questo, la metrica CLS è stata ponderata meno nel punteggio delle prestazioni.
Dopo aver avuto un po' di tempo nelle mani degli sviluppatori, il punteggio Lighthouse ha aumentato la ponderazione della CLS dal 5% al 15%, coerente con la metodologia che prevede i Core Web Vitals essere le metriche più ponderate nel punteggio Lighthouse.
Puoi trovare le ponderazioni aggiornate delle metriche in Lighthouse v8 nella calcolatore del punteggio.
L'implementazione della funzionalità CLS di Lighthouse 8.0 include sia il windowing sia il contributo CLS dei frame secondari. Prima della versione 8.0, la metrica CLS in Lighthouse non includeva i sottoframe CLS nel calcolo delle metriche, ma ora sì. E, solo per conferma, il campo CLS misurato da CrUX gestisce anche windowing e frame secondari in modo simile.
Tuttavia, la differenza principale tra la CLS del lab e quella del campo è che la finestra di osservazione della CLS del lab termina al "caricamento completo" come stabilito in condizioni di laboratorio, mentre sul campo la finestra di osservazione si estende all'intera durata della pagina, inclusa l'attività post-caricamento. Detto questo, l'aggiustamento del windowing mitiga sostanzialmente questa differenza.
Misurare l'attività sul campo in autonomia
Se vuoi misurare l'ultima implementazione di CLS, puoi anche registrarlo per i dati dei campi tramite RUM utilizzando il seguente snippet PerformanceObserver.
Oppure affidandoti direttamente Libreria JavaScript Web Vitals, che è stato anche aggiornato con questa modifica.
Aggiornamenti aggiuntivi
Al di fuori degli aggiornamenti a Cumulative Layout Shift, ai nostri strumenti web sono stati apportati anche i seguenti aggiornamenti relativi alle metriche:
- Stiamo effettuando l'aggiornamento a la definizione più recente della metrica Largest Contentful Paint. API CrUX, PSI, 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 di First Contentful Paint sono state aggiornate in modo da Buono: [0-1,8 s], Richiede miglioramenti: (1,8 s-3 s), Scarso: [3 s-∞]
Conclusioni
Ci aspettiamo che questo cambiamento rispecchi una transizione senza problemi per la maggior parte dei siti e ti invitiamo a consultare Web Vitals e Ottimizzazione della metrica CLS per suggerimenti utili su come misurare e ottimizzare il layout non è più necessario. Come sempre, non esitare a contattarci sul gruppo web-vitals-feedback per ricevere feedback sulle metriche e sui nostri strumenti forum di feedback specifici per Lighthouse e Report sull'esperienza utente di Chrome per risolvere 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