CLS: definizione, calcolo e correzione
Aggiornato il February 22, 2026
Definizione rapida
Il CLS (Cumulative Layout Shift) è una metrica Core Web Vitals che misura l'instabilità visiva di una pagina web durante il caricamento, ovvero la somma degli spostamenti di layout inattesi. Il CLS è considerato buono se inferiore a 0,1, da migliorare tra 0,1 e 0,25, e scarso oltre 0,25. Il CLS quantifica l'esperienza frustrante in cui gli elementi di una pagina 'saltano' durante il caricamento, provocando clic accidentali.
Come funziona
Il CLS (Cumulative Layout Shift) misura quanto gli elementi visibili di una pagina si spostano in modo inatteso durante il caricamento. Ogni spostamento di layout viene calcolato moltiplicando la frazione di superficie impattata (proporzione dell'area visibile interessata) per la frazione di distanza percorsa (distanza relativa dello spostamento). Il punteggio CLS è la somma di tutti questi spostamenti avvenuti in finestre di sessione di 5 secondi. Le soglie ufficiali Google: buono (verde) se inferiore a 0,1, da migliorare (arancione) tra 0,1 e 0,25, scarso (rosso) oltre 0,25. Esempio concreto: un utente legge un articolo e preme 'Aggiungi al carrello' ma al momento di cliccare un annuncio si inserisce sopra il pulsante — il suo clic atterra sull'annuncio. È un layout shift tipico. Le cause comuni includono immagini e video senza dimensioni esplicite (width/height), pubblicità, embed o iframe caricati dinamicamente, font che provocano un FOUT (Flash of Unstyled Text) ed elementi iniettati da JavaScript sopra il contenuto esistente.
Perché è importante
Un punteggio CLS elevato genera un'esperienza utente frustrante: clic accidentali, perdita della posizione di lettura, sensazione di instabilità della pagina. Questa frustrazione si traduce direttamente in tassi di rimbalzo più elevati e tassi di conversione più bassi. Google ha incluso il CLS nei Core Web Vitals perché è uno dei fattori di abbandono più frequentemente citati dagli utenti. Un buon CLS contribuisce anche alla percezione di qualità e professionalità del sito.
Come migliorare o utilizzare
Per correggere il CLS: definisci sempre attributi `width` e `height` espliciti su immagini e video affinché il browser riservi lo spazio prima del caricamento. Usa `min-height` per le aree pubblicitarie e di embed. Pre-carica i tuoi font e usa `font-display: swap` per evitare spostamenti tipografici. Evita di inserire contenuti sopra il contenuto visibile esistente tramite JavaScript. Audita i tuoi layout shift con il tab Performance dei DevTools Chrome o PageSpeed Insights.
Con Sublim
Sublim ti permette di correlare i tuoi punteggi CLS per pagina con i tuoi dati di conversione e di tasso di rimbalzo in tempo reale. Così, dai priorità alla correzione delle pagine ad alto traffico dove un CLS elevato costa realmente clienti, invece di lavorare alla cieca. Tutti questi dati sono raccolti senza cookie in totale conformità con il GDPR europeo.
Domande frequenti
Come identificare gli elementi responsabili di un cattivo CLS?
Lo strumento più preciso è il tab Performance dei DevTools Chrome: attiva la registrazione al caricamento della pagina e cerca gli eventi 'Layout Shift'. Anche PageSpeed Insights e l'estensione Web Vitals Debugger di Chrome permettono di identificare visivamente gli elementi che si muovono. La proprietà CSS `content-visibility` può inoltre aiutare a isolare i problemi.
Le animazioni CSS influiscono sul CLS?
Non necessariamente. Google esclude dal calcolo del CLS gli spostamenti causati da interazioni utente (clic, digitazioni) che si verificano nei 500 ms successivi all'interazione. Le animazioni CSS che usano `transform` invece di proprietà che modificano il layout (top, left, margin) non influiscono sul CLS perché non provocano ricalcolo del layout.
Un buon CLS è sufficiente per posizionarsi bene su Google?
Il CLS è una delle tre metriche Core Web Vitals (insieme a LCP e INP) che costituiscono un segnale di Page Experience. Un buon CLS da solo non basta: le tre metriche devono essere nel verde affinché il segnale sia positivo. Inoltre, contenuto e autorità del dominio restano preponderanti nel ranking complessivo.
Termini correlati
I Core Web Vitals sono un insieme di tre metriche definite da Google p…
Il LCP (Largest Contentful Paint) è una metrica Core Web Vitals che mi…
L'INP (Interaction to Next Paint) è la metrica Core Web Vitals che mis…
La frequenza di rimbalzo è la percentuale di sessioni nel corso delle …