Che cos'è il Cumulative Layout Shift (CLS)?

Il Cumulative Layout Shift quantifica la stabilità visiva, ossia la frequenza con cui gli elementi si spostano dopo che la pagina ha iniziato il rendering. In un contesto di commerce, il CLS è la metrica che cattura la frustrazione di toccare per errore un banner promozionale perché una product tile si è spostata all'ultimo momento. È privo di unità di misura, calcolato sul 75° percentile delle sessioni reali degli utenti e fa parte dei Core Web Vitals.

Definizione

Il CLS somma la frazione di impatto moltiplicata per la frazione di distanza di ogni spostamento inatteso del layout tra il caricamento della pagina e lo scaricamento completo, aggregandola in finestre di sessione. Un buon punteggio è inferiore a 0,1, uno scarso è superiore a 0,25. Tra le cause tipiche ci sono immagini prive degli attributi width e height, web font a caricamento tardivo che provocano il reflow del testo, banner di terze parti caricati dopo il first paint, script di A/B test che iniettano nuovi nodi DOM e badge che arrivano in modo asincrono da un servizio di personalizzazione. Il CLS è una metrica di runtime, quindi il solo HTML renderizzato lato server non può risolverlo; il comportamento del client conta altrettanto.

Perché è importante

Gli spostamenti del layout erodono la fiducia e aumentano direttamente i clic errati sui CTA di aggiunta al carrello e di checkout. Il CLS è particolarmente dannoso sulle PDP, dove prezzi, messaggi sulla disponibilità e trust badge spesso arrivano da servizi separati. Come parte del segnale di page experience, influisce sulla search engine optimization (SEO). Per gli storefront composable con un uso intensivo di A/B testing e personalizzazione, il CLS rivela quanto il frontend sia disciplinato nel riservare spazio per i contenuti asincroni. È inoltre il Vital più facile da peggiorare quando i team procedono velocemente con gli esperimenti di conversion rate optimization (CRO).

Casi d'uso

I team che usano Next.js, Nuxt o Astro correggono il CLS impostando width e height espliciti sulle immagini, dichiarando l'aspect-ratio in CSS, precaricando i font critici e usando font-display:optional per evitare il reflow tardivo del testo. Gli slot dei banner provenienti da un content management system (CMS) vengono renderizzati con box segnaposto in modo che i contenuti personalizzati si inseriscano nello spazio riservato. Edge Rendering e ISR riducono la varianza servendo un HTML iniziale stabile, mentre i framework di esperimenti lato client sono configurati per modificare solo l'interno di container con dimensioni fisse. Le dashboard RUM segmentano il CLS per template per individuare regressioni legate a nuovi moduli di merchandising o al rollout di hyperpersonalization.

Correlati

Esplora Performance and Core Web Vitals · Composable Headless Frontend.