Cos'è il CLS
Una metrica di stabilità visiva. Misura gli spostamenti inattesi del layout durante il caricamento della pagina. Per esempio: stai leggendo un testo, carica un'immagine senza dimensioni e il testo scivola in basso: quello è un CLS scarso.
Valori soglia
- Buono → sotto 0,1
- Da migliorare → 0,1–0,25
- Scadente → oltre 0,25
Cause di un CLS scarso
- Immagini senza dimensioni:
<img>privo di width/height - Contenuto dinamico: banner e pubblicità inseriti dopo il caricamento
- Web font: FOIT (Flash of Invisible Text) o FOUT (Flash of Unstyled Text)
- Animazioni che cambiano le dimensioni degli elementi
Come migliorare il CLS
- Imposta le dimensioni delle immagini con gli attributi width e height
- Riserva spazio per il contenuto dinamico (skeleton screen)
- font-display: swap per i web font
- Evita di inserire contenuto sopra il contenuto esistente
- Usa transform invece di cambiare width/height/top/left
Esempi di codice
html
<!-- Bad: no dimensions -->
<img src="hero.jpg" alt="Hero">
<!-- Good: with dimensions -->
<img src="hero.jpg" alt="Hero" width="1200" height="600">
<!-- Good: aspect-ratio -->
<img src="hero.jpg" alt="Hero" style="aspect-ratio: 16/9; width: 100%;">Il CLS si calcola come prodotto dell'impact fraction (quanto viewport si è spostato) per la distance fraction (di quanto). Google raccoglie i dati tramite il Chrome User Experience Report: testa con utenti reali, non solo con strumenti da lab.
FAQ
Perché il CLS è importante per la SEO?
CLS è uno dei tre Core Web Vitals che compongono il fattore Page Experience. Un CLS scarso porta a rimbalzi alti (l'utente si infastidisce quando il pulsante «Acquista» si sposta), e questo incide indirettamente sul posizionamento.
Come testare il CLS sul mio sito?
Usa Google PageSpeed Insights, Google Search Console (report Core Web Vitals), Lighthouse in DevTools e l'estensione Chrome Web Vitals.
Il lazy loading incide sul CLS?
Sì, se le dimensioni delle immagini non sono specificate. Con il lazy loading un'immagine può caricarsi dopo lo scroll e spostare il contenuto. Imposta sempre width/height o usa un contenitore CSS con aspect ratio fissa.
Cosa sono FOIT e FOUT e come si legano al CLS?
FOIT (Flash of Invisible Text) nasconde il testo finché non carica il web font. FOUT (Flash of Unstyled Text) mostra prima un font di fallback e poi lo scambia. Entrambi possono causare CLS se la sostituzione cambia l'altezza delle righe. Usa font-display: swap e font di fallback con metriche simili.
Come sistemare il CLS causato dai blocchi pubblicitari?
Riserva uno spazio fisso per la pubblicità. Per gli annunci dinamici usa un contenitore con min-height e skeleton loading, così il blocco non compare all'improvviso.