Cumulative Layout Shift (CLS)

Cosa controlla questo check

Legge il CLS da PageSpeed Insights. CLS è un punteggio adimensionale: la somma cumulativa di ogni spostamento di layout inatteso durante il caricamento della pagina, pesato per quanto si è mossa la viewport e quanto lontano.

Valore CLS	Verdetto
≤ 0,1	Buono
0,1–0,25	Da migliorare
> 0,25	Scarso

Perché è importante

Una pagina che salta è una pagina frustrante. Clicchi un pulsante, la pagina si sposta, clicchi la cosa sbagliata. Stai leggendo un paragrafo, parte una pubblicità, il paragrafo si sposta. I layout shift sono una delle metriche più correlate con il bounce rate.

CLS è il terzo Core Web Vital insieme a LCP e INP. È anche il più semplice da correggere una volta trovati gli elementi colpevoli: la maggior parte del CLS arriva da un numero ristretto di pattern.

Come risolvere

1. Riserva spazio per immagini e embed. Imposta sempre gli attributi width e height (o aspect-ratio in CSS):

<img src="/hero.webp" width="1200" height="600" alt="..." />

Il browser riserva il box prima che l’immagine carichi. Senza, l’immagine appare e il testo sotto salta giù.

2. Riserva spazio per gli annunci. Se usi AdSense o simili, imposta un’altezza minima sul contenitore dell’annuncio che corrisponda al formato più comune:

.ad-slot {
  min-height: 250px;
}

3. Evita i webfont che caricano tardi. Usa font-display: swap (il testo si renderizza con il fallback, fa swap quando arriva il webfont — CLS piccolo) o font-display: optional (niente swap; CLS migliore, branding peggiore). I woff2 self-hosted con preload minimizzano la finestra di swap.

4. Non inserire contenuto sopra contenuto esistente. Banner cookie, prompt “iscriviti” e toast “hai una nuova notifica” che spingono giù la pagina = CLS garantito. Posizionali come overlay (position: fixed).

5. Usa le trasformazioni CSS per le animazioni, non top/left. transform: translateY() non causa layout shift. Animare top sì.

Domande frequenti

Come viene calcolato il CLS?

Il punteggio è la finestra peggiore di 5 secondi di layout shift durante la sessione di pagina, non la somma di tutta la durata. Google l’ha aggiornato nel 2021 per non penalizzare le pagine lunghe in modo sproporzionato.

E gli spostamenti avviati dall’utente?

Clic, tocchi e invii di moduli che causano cambi di layout sono esclusi dal CLS per 500 ms dopo l’interazione. Quindi aprire un accordion non conta — contano solo gli spostamenti “a sorpresa”.

Perché il mio CLS picca su mobile ma non su desktop?

Le viewport mobile sono più strette, quindi uno spostamento di N pixel è una frazione maggiore dello schermo. Stessa causa, penalità più grande. Testa sempre il profilo mobile in PageSpeed.