Cos’è il CLS e come funziona
Il CLS (Cumulative Layout Shift, in italiano spostamento cumulativo del layout) è la metrica dei Core Web Vitals che misura quanto gli elementi di una pagina si spostano senza preavviso mentre l’utente la sta ancora guardando: sotto 0,1 il layout è stabile, sopra 0,25 diventa un problema che pesa anche sul posizionamento.
CLS: i punti fermi
- Cosa misura: il CLS somma tutti gli spostamenti di layout non previsti da un’interazione dell’utente, lungo l’intera visita alla pagina.
- Soglie: un punteggio sotto 0,1 è buono, tra 0,1 e 0,25 è da migliorare, sopra 0,25 è scarso.
- Cause più comuni: immagini e video senza dimensioni dichiarate, banner e popup iniettati dopo il caricamento, font che arrivano in ritardo.
- Come si interviene: riservare lo spazio con width, height e aspect-ratio, evitare contenuti che si inseriscono sopra ciò che l’utente sta già guardando, gestire il caricamento dei font con font-display.
- Come si misura: con dati di laboratorio come Lighthouse per il test in locale e con dati di campo come Search Console e PageSpeed Insights per vedere cosa succede agli utenti reali.
Come funziona il CLS
Il CLS registra ogni volta che un elemento visibile – un’immagine, un blocco di testo, un pulsante, un banner – cambia posizione mentre la pagina è ancora in caricamento o mentre l’utente sta scorrendo. Non è un valore puntuale come l’LCP, misurato in un solo istante: il CLS si accumula lungo tutta la sessione di visita, e per questo un sito può peggiorare anche dopo i primi secondi di caricamento, per esempio quando un annuncio pubblicitario di terze parti si carica con ritardo.
Il caso più frequente è questo: l’utente sta per toccare un pulsante e in quel momento si carica un’immagine o un banner sopra di esso, il pulsante scende di qualche decina di pixel e il clic finisce da un’altra parte. Nel mio lavoro lo trovo quasi sempre nelle pagine con pubblicità di terze parti o con moduli di iscrizione caricati via JavaScript dopo il contenuto principale.
Il CLS conta uno spostamento solo se non è la conseguenza diretta di un’azione dell’utente: se un menu si apre perché qualcuno lo ha cliccato, quello spostamento non entra nel calcolo. Conta invece tutto ciò che si muove da solo, senza che nessuno lo abbia chiesto.
Soglie di valutazione del CLS
Il CLS si valuta su tre fasce, le stesse che uso quando controllo un report in Search Console: buono, da migliorare, scarso.
| Giudizio | Valore CLS | Cosa significa per l’utente |
|---|---|---|
| Buono | inferiore a 0,1 | il layout resta stabile, niente spostamenti percepibili |
| Da migliorare | tra 0,1 e 0,25 | spostamenti saltuari, non sempre fastidiosi |
| Scarso | superiore a 0,25 | la pagina risulta instabile, con clic sbagliati frequenti |
Il CLS non si legge sulla media di tutte le visite: Google guarda il 75° percentile delle sessioni, sia da mobile sia da desktop. In pratica, per rientrare nella soglia buona serve che almeno tre visite su quattro ottengano un punteggio sotto 0,1; una pagina può avere un CLS medio accettabile e risultare comunque da migliorare in Search Console perché un quarto delle visite peggiori la fa scendere sotto la soglia.
Il calcolo del punteggio non è una semplice somma di spostamenti: ogni movimento pesa per la quota di schermo che l’elemento occupa prima e dopo (componente d’impatto), moltiplicata per la distanza percorsa rispetto all’altezza o larghezza della finestra (componente di distanza). In una guida che ho consultato per questo articolo viene fatto un esempio concreto: un blocco di testo che occupa metà schermo e si sposta verso il basso per un quarto dell’altezza della finestra produce un impatto di 0,75 e una distanza di 0,25, quindi un punteggio di 0,75 × 0,25 = 0,1875, già nella fascia da migliorare.
Cosa alza il CLS
Il CLS sale quasi sempre per tre motivi ricorrenti, e li trovo spesso insieme sulla stessa pagina.
Immagini e video senza dimensioni dichiarate
Se un’immagine o un video non hanno gli attributi width e height nel markup, il browser non sa quanto spazio riservare prima che il file arrivi: lo spazio si crea solo a caricamento avvenuto, spingendo in basso tutto quello che viene dopo. Succede spesso con le immagini caricate da un CMS che non genera automaticamente queste dimensioni, o con i video incorporati da una piattaforma esterna senza un contenitore proporzionato.
Contenuti iniettati dinamicamente
Banner pubblicitari, popup di iscrizione alla newsletter e banner dei cookie sono la causa più frequente di CLS scarso quando vengono inseriti sopra un contenuto già visibile, senza che l’utente li abbia richiesti con un clic. Un annuncio di terze parti che si carica due secondi dopo il resto della pagina sposta tutto quello che sta sotto, ed è un problema che non dipende da chi scrive i contenuti ma da come è configurato lo slot pubblicitario.
Font web lenti
Quando un font personalizzato arriva in ritardo, il browser mostra prima un font di sistema e poi lo sostituisce: se le due famiglie hanno dimensioni diverse, il testo cambia altezza e sposta tutto quello che segue. Questo fenomeno si chiama FOUT/FOIT (flash di testo non stilizzato o invisibile) e pesa di più sui siti con molto testo sopra la piega.
Come ridurre il CLS
Il CLS si abbassa intervenendo sulle stesse tre cause, nell’ordine in cui di solito le trovo quando analizzo un sito.
- Dichiara sempre width e height per immagini, video e iframe, o usa la proprietà CSS aspect-ratio per i contenitori che si caricano dopo: il browser riserva lo spazio prima ancora che il file arrivi.
- Riserva lo spazio per widget e annunci di terze parti definendo un’altezza minima nel contenitore, così l’inserimento non sposta il contenuto sottostante.
- Evita di inserire elementi sopra un contenuto già visibile, a meno che non siano la risposta diretta a un clic: un banner che appare sopra un testo appena letto è l’errore più comune che vedo nelle pagine con troppa pubblicità sopra la piega.
- Ottimizza il caricamento dei font con font-display: optional o swap, e precarica i font critici con un tag link rel=”preload”: riduce lo scarto di dimensioni tra il font di sistema e quello definitivo.
Dimensioni e aspect-ratio
La soluzione più immediata resta quella più trascurata: impostare le dimensioni native dell’immagine nel markup, anche quando poi il CSS la ridimensiona in modo responsivo. L’aspect-ratio funziona bene anche per i contenitori di embed esterni, come mappe o video di piattaforme terze, dove non si conosce in anticipo l’altezza esatta del contenuto.
Spazio per widget e annunci
Per gli annunci pubblicitari conviene riservare l’altezza massima prevista dal formato, non quella media. Un annuncio più piccolo del previsto lascia uno spazio vuoto, ma non sposta nulla, ed è questo il risultato da cercare rispetto a uno slot troppo stretto che si allarga quando l’annuncio arriva.
Caricamento ottimale dei font
Sconsiglio di caricare più di due famiglie di font personalizzati nella parte sopra la piega: ogni famiglia aggiunge un punto in cui il testo può ancora spostarsi, e il guadagno estetico raramente giustifica il rischio sul CLS.
Come misurare il CLS
Il CLS si controlla con due tipi di dati, che danno risposte diverse e vanno letti insieme, non uno al posto dell’altro.
| Tipo di dato | Strumenti | Cosa mostra | Limite |
|---|---|---|---|
| Lab data | Lighthouse, Chrome DevTools | una simulazione ripetibile, utile per confrontare una modifica prima e dopo | non riflette la varietà dei dispositivi e delle connessioni reali |
| Field data | Search Console, PageSpeed Insights, CrUX | le prestazioni reali registrate dagli utenti Chrome nei 28 giorni precedenti | manca per le pagine con poco traffico, che restano senza dati sufficienti |
Dati di laboratorio
Lighthouse calcola il CLS su un singolo caricamento simulato: è lo strumento giusto per verificare se una correzione funziona prima di pubblicarla, perché il risultato non cambia a ogni esecuzione come succede con i dati reali.
Dati di campo
Il rapporto Core Web Vitals in Search Console raggruppa le pagine per URL o per modello e mostra lo stato reale rilevato dal CrUX, cioè i dati raccolti dagli utenti che navigano con Chrome e hanno accettato la sincronizzazione della cronologia. È la fonte più affidabile perché misura quello che succede davvero, non quello che succede nel mio test in locale.
Casi limite ed errori frequenti nel CLS
Il CLS ha alcune eccezioni che non sempre vengono spiegate, e che cambiano la lettura di un report.
Se lo spostamento nasce da un clic: non conta
Se apri un accordion, un menu a tendina o una scheda e il contenuto sottostante si sposta, quello spostamento non entra nel calcolo del CLS: Google lo considera voluto, perché arriva entro una finestra molto breve dall’interazione. Se un elemento si muove diversi secondi dopo un clic, anche un clic reale non lo esclude dal conteggio.
Se il sito genera contenuti via JavaScript: verifica con uno strumento
Nelle pagine costruite come applicazioni a pagina singola, con contenuto che arriva dopo il primo rendering, le guide che ho consultato per questo articolo non documentano in modo uniforme il comportamento esatto del CLS rispetto ai diversi framework. In questi casi apro il pannello delle prestazioni degli strumenti per sviluppatori del browser e registro una sessione reale, invece di fidarmi di un dato aggregato.
Se il punteggio cambia tra mobile e desktop: valuta entrambi
Il CLS di una stessa pagina può risultare buono su desktop e scarso su mobile, perché cambiano le dimensioni dello schermo e quindi la componente di distanza del calcolo. Controllo sempre i due report separati in Search Console prima di dire che una pagina è a posto.
Il CLS nei Core Web Vitals e nella SEO
Il CLS è una delle tre metriche che compongono i Core Web Vitals, insieme all’LCP, che misura il tempo di caricamento dell’elemento più grande, e all’INP, che misura la reattività alle interazioni: quest’ultimo ha sostituito il vecchio FID a partire da marzo 2024, secondo le guide di settore più recenti che ho confrontato.
Google li considera parte dei segnali di Page Experience da quando li ha introdotti nel 2020, e dal 2021 pesano, seppure in modo contenuto, nel ranking organico. Pesano meno della qualità dei contenuti e della SEO tecnica nel suo complesso, ed entrano in gioco soprattutto quando due pagine si equivalgono per gli altri fattori: in quel caso un CLS scarso può costare qualche posizione.
Sconsiglio di inseguire un punteggio perfetto se il resto del sito ha problemi più seri: un CLS a 0,02 su una pagina con contenuti deboli non sposta il posizionamento quanto un title scritto bene.
Domande frequenti sul CLS
Cos’è il CLS in una pagina web?
Il CLS è la metrica che misura quanto gli elementi visibili di una pagina si spostano in modo inatteso durante tutta la visita, non solo nei primi secondi di caricamento. Un punteggio basso significa che l’utente non vede testo, immagini o pulsanti cambiare posizione mentre naviga.
Quale valore di CLS è considerato buono?
Un CLS inferiore a 0,1 è considerato buono da Google; tra 0,1 e 0,25 la pagina è da migliorare; sopra 0,25 il punteggio è scarso e segnala un problema reale di stabilità visiva.
Come si calcola il punteggio del CLS?
Il punteggio nasce dal prodotto tra la componente d’impatto, cioè la quota di schermo coinvolta nello spostamento, e la componente di distanza, cioè quanto l’elemento si è spostato rispetto alla finestra. Un esempio diffuso nelle guide tecniche dà 0,75 di impatto e 0,25 di distanza, per un totale di 0,1875.
Cosa causa più spesso un CLS alto?
Le cause più comuni sono immagini o video senza dimensioni dichiarate, banner e popup inseriti sopra un contenuto già visibile, e font personalizzati che arrivano in ritardo rispetto al font di sistema mostrato inizialmente.
Con quali strumenti si misura il CLS?
Il CLS si misura con dati di laboratorio come Lighthouse, utili per testare una modifica prima di pubblicarla, e con dati di campo come il rapporto Core Web Vitals in Search Console o PageSpeed Insights, che mostrano le sessioni reali degli utenti.
Uno spostamento causato da un clic peggiora il CLS?
No, se lo spostamento avviene entro una finestra breve dopo un’interazione diretta dell’utente, come l’apertura di un menu, Google non lo conta nel punteggio del CLS: conta solo ciò che si muove senza un’azione esplicita a monte.
