Tutti lo abbiamo vissuto: stiamo leggendo un articolo e il testo scivola in basso perché sopra è comparsa una pubblicità; stiamo per toccare un pulsante e, un istante prima, al suo posto arriva un altro elemento. È la sensazione di una pagina “instabile”, e tra i Core Web Vitals ha una metrica dedicata: il CLS, Cumulative Layout Shift. Delle tre metriche è la meno intuitiva da calcolare, ma spesso la più semplice da correggere, e il suo impatto sull’esperienza e sulle conversioni è molto concreto.
Che cosa misura il CLS
Il CLS misura la stabilità visiva di una pagina, cioè quanto gli elementi visibili cambiano posizione in modo inatteso mentre l’utente la usa. Non conta il tempo, come LCP e INP, ma lo spostamento: è infatti l’unico dei tre Core Web Vitals che non si esprime in secondi o millisecondi, ma con un punteggio senza unità di misura.
Le soglie, valutate come per le altre metriche al 75° percentile delle visite reali, sono queste: fino a 0,1 il risultato è buono, tra 0,1 e 0,25 è da migliorare, oltre 0,25 è scarso. Un solo spostamento importante può bastare a superare la soglia.
È importante il termine “inatteso”. Se l’utente tocca un pulsante che apre un pannello e il contenuto si sposta per fargli spazio, lo spostamento è una risposta prevista e non viene conteggiato: sono esclusi gli spostamenti che avvengono entro 500 millisecondi da un’interazione come un clic, un tocco o la pressione di un tasto. Lo scorrimento della pagina, invece, non conta come interazione di questo tipo, e le animazioni realizzate con la proprietà CSS transform non producono spostamenti di layout.
Come si calcola il punteggio
Ogni volta che un elemento visibile cambia posizione tra un fotogramma e il successivo, il browser calcola il punteggio di quello spostamento moltiplicando due valori. La frazione d’impatto è la porzione di viewport occupata dall’elemento prima e dopo lo spostamento, considerate insieme. La frazione di distanza è lo spostamento più ampio, divisa per la dimensione maggiore della viewport.
Nell’esempio, un blocco alto metà dello schermo scende di un quarto dell’altezza dello schermo: insieme, la posizione iniziale e quella finale coprono il 75% della viewport, e lo spostamento è pari al 25%. Il punteggio è 0,75 × 0,25 = 0,19, già sopra la soglia buona. Due conseguenze pratiche: gli elementi grandi pesano molto più di quelli piccoli, e anche uno spostamento di pochi pixel di un blocco che occupa gran parte dello schermo può costare caro. Per questo sugli smartphone, dove un’immagine o un banner occupano quasi tutta la viewport, il CLS tende a essere peggiore che su desktop.
Le finestre di sessione
Il “cumulative” del nome non significa che tutti gli spostamenti di una visita vengano sommati. Dal 2021 il CLS raggruppa gli spostamenti in finestre di sessione: una finestra si chiude quando passa più di un secondo senza spostamenti, e non può durare più di cinque secondi. Il CLS della visita è la somma degli spostamenti della finestra peggiore.
Questo accorgimento evita di penalizzare le pagine che restano aperte a lungo, come le applicazioni o gli articoli con scorrimento infinito, dove qualche piccolo spostamento isolato si accumulerebbe in modo irrealistico. Ma significa anche che una raffica di spostamenti concentrati in pochi secondi, tipica del caricamento iniziale, pesa quanto basta per compromettere il risultato.
Perché il CLS è una questione di business
Uno spostamento di layout non è solo fastidioso. Produce clic sbagliati: su un annuncio al posto del link cercato, su “annulla” invece che su “conferma”, su un prodotto diverso da quello desiderato. Fa perdere il punto di lettura, costringe a ritrovare il testo, trasmette l’idea di un sito poco curato proprio mentre l’utente sta decidendo se fidarsi. Negli e-commerce e nei siti editoriali, dove pubblicità, banner promozionali e widget si caricano spesso dopo il contenuto, il CLS è uno dei primi indicatori da controllare. E, come parte dei Core Web Vitals, contribuisce alla valutazione dell’esperienza della pagina da parte di Google.
Le cause più comuni
- Immagini e video senza dimensioni. Se il browser non conosce in anticipo larghezza e altezza di un’immagine, le riserva zero pixel e sposta tutto ciò che segue quando il file arriva.
- Pubblicità, embed e iframe. Spazi pubblicitari, video incorporati, mappe e widget social hanno spesso dimensioni note solo a caricamento avvenuto, e a volte variabili a seconda dell’annuncio servito.
- Contenuti inseriti dopo il rendering. Barre di avviso, banner promozionali, avvisi dei cookie in cima alla pagina, messaggi personalizzati, badge delle recensioni: qualsiasi elemento aggiunto sopra il contenuto già visibile lo spinge in basso.
- Web font. Quando il font del sito sostituisce quello di ripiego, testo con metriche diverse cambia altezza e larghezza delle righe, spostando i blocchi successivi.
- Stili che arrivano tardi. CSS caricato in modo asincrono o dopo un’interazione, come accade con alcune tecniche di rimozione del CSS inutilizzato o con componenti inizializzati dal JavaScript ritardato, trasforma l’aspetto della pagina dopo il primo rendering.
- Animazioni sulle proprietà di layout. Animare
top,heightomarginsposta gli elementi vicini a ogni fotogramma.
Come si riduce
La regola generale è una sola: ogni elemento deve avere il suo spazio riservato fin dal primo rendering. Per le immagini basta indicare le dimensioni nel markup, lasciando che il CSS le adatti mantenendo le proporzioni:
<img src="prodotto.webp" width="1200" height="800" alt="…">
img {
max-width: 100%;
height: auto; /* il browser usa width/height per calcolare le proporzioni */
}
/* spazio riservato per un banner pubblicitario di altezza nota */
.slot-adv {
min-height: 250px;
}- Riservare lo spazio a pubblicità ed embed con un’altezza minima o con
aspect-ratio, anche quando l’annuncio potrebbe non arrivare: meglio uno spazio vuoto di uno spostamento. - Non inserire contenuti sopra quelli già visibili. Barre e avvisi vanno previsti nel layout fin dall’inizio, sovrapposti in basso o mostrati in risposta a un’interazione.
- Allineare i font di ripiego. Precaricare il font principale e usare descrittori come
size-adjuste le correzioni delle metriche nel font di ripiego riduce lo spostamento al momento della sostituzione. - Animare con transform e opacity. Queste proprietà non cambiano il layout e non producono spostamenti.
- Rendere le pagine idonee alla back/forward cache. Quando l’utente torna indietro, una pagina ripristinata dalla cache del browser appare istantaneamente e senza spostamenti.
Come si misura, e perché il laboratorio non basta
Il CLS si misura sia in laboratorio sia sul campo, ma con una differenza importante. Lighthouse, e quindi la sezione di laboratorio di PageSpeed Insights, osserva solo il caricamento iniziale, senza scorrere e senza interagire. Tutto ciò che accade dopo, come un’immagine senza dimensioni che entra nello schermo durante lo scorrimento, un annuncio che si carica a metà pagina o un banner che compare dopo dieci secondi, nel laboratorio non esiste. I dati degli utenti reali, invece, registrano l’intera visita. Per questo non è raro trovare un CLS perfetto in laboratorio e insufficiente sul campo: è una delle ragioni per cui CrUX e laboratorio servono entrambi.
Per individuare gli spostamenti, i DevTools di Chrome mostrano le regioni che si spostano durante il caricamento e, nel pannello Performance, una traccia dedicata agli spostamenti di layout con gli elementi coinvolti. Sul campo, la libreria open source web-vitals nella versione con attribuzione indica l’elemento responsabile dello spostamento più grande:
import { onCLS } from 'web-vitals/attribution';
onCLS( ( { value, attribution } ) => {
console.log( 'CLS', value.toFixed( 3 ), {
elemento: attribution.largestShiftTarget,
momento: Math.round( attribution.largestShiftTime ),
statoDelCaricamento: attribution.loadState,
} );
} );Sapere quale elemento si sposta, e se succede durante il caricamento o più tardi, è spesso sufficiente per trovare la causa. E, come per le altre metriche, i miglioramenti si vedono nei dati di CrUX gradualmente, lungo la finestra di 28 giorni.
In sintesi
Il CLS misura quanto la pagina si sposta sotto gli occhi e sotto le dita dell’utente. Ogni spostamento inatteso vale frazione d’impatto per frazione di distanza, gli spostamenti vengono raggruppati in finestre di sessione e conta la finestra peggiore; la soglia buona è 0,1 al 75° percentile. Le cause sono quasi sempre le stesse: immagini e annunci senza spazio riservato, contenuti inseriti sopra quelli visibili, font e stili che arrivano tardi.
La buona notizia è che, a differenza di LCP e INP, il CLS raramente richiede interventi sull’infrastruttura: nella maggior parte dei casi basta progettare il layout in modo che ogni elemento abbia il suo posto fin dall’inizio. È uno degli investimenti con il miglior rapporto tra sforzo e risultato, per gli utenti e per il business.
