CLS (Cumulative Layout Shift)

Cos’è il CLS (Cumulative Layout Shift)

Il CLS (Cumulative Layout Shift) è una metrica di performance introdotta da Google per misurare la stabilità visiva di una pagina web durante il caricamento. In pratica, quantifica quanto e quanto spesso gli elementi visibili della pagina si spostano in modo inatteso mentre l’utente la sta guardando o interagendo con essa.

Immagina di stare leggendo un articolo e, all’improvviso, un’immagine carica e sposta tutto il testo verso il basso, o peggio, stai per cliccare su un pulsante e compare un banner che fa scivolare il pulsante fuori dalla traiettoria del tuo dito. Questo è un layout shift: un’esperienza frustrante che Google misura e penalizza.

Il CLS è uno dei tre Core Web Vitals, le metriche chiave con cui Google valuta la qualità dell’esperienza utente, insieme a:

• LCP (Largest Contentful Paint) → velocità di caricamento percepita
• INP (Interaction to Next Paint) → reattività della pagina alle interazioni

Cosa misura esattamente il CLS

Il CLS considera solo gli spostamenti imprevisti del layout, quelli che l’utente non ha causato intenzionalmente. Se clicchi su un menu a tendina e la pagina si espande, non conta. Se invece un banner carica da solo e sposta il contenuto, quello conta eccome.

La metrica calcola ogni spostamento in base a due fattori:

1. Impatto visivo: la porzione di schermo occupata dall’elemento che si sposta
2. Distanza dello spostamento: quanto l’elemento si è mosso rispetto alla sua posizione originale

Il punteggio finale è la somma cumulativa di tutti gli shift rilevati durante l’intera sessione sulla pagina.

Quali punteggi CLS sono accettabili

Google ha definito soglie precise:

Un punteggio basso significa che la pagina è stabile e prevedibile durante il caricamento. Un punteggio alto segnala problemi che influiscono negativamente sull’user experience e, di riflesso, sul posizionamento.

Perché il CLS è importante per la SEO

Il CLS è un Core Web Vital e Google lo usa come segnale di ranking. Un punteggio scarso può penalizzare il posizionamento, specialmente in settori competitivi dove la qualità dell’esperienza utente fa la differenza tra la prima e la seconda pagina dei risultati.

Oltre all’impatto diretto sulla SEO, un CLS elevato causa effetti concreti sull’utente: clic involontari, interruzioni nella lettura, percezione di scarsa qualità e affidabilità del sito. Tutto questo si traduce in segnali comportamentali negativi, frequenza di rimbalzo più alta, tempo sulla pagina più basso, che Google interpreta come indicatori di bassa qualità.

Le cause più comuni di un CLS elevato

Nella maggior parte dei casi i problemi di layout shift nascono da scelte tecniche non ottimizzate:

• Immagini e video senza dimensioni specificate: il browser non sa quanto spazio riservare prima che il file venga caricato, quindi lo ridisegna una volta caricato
• Annunci o iframe caricati dinamicamente senza uno spazio riservato nella pagina
• Font web che causano cambi di layout durante il caricamento (FOIT/FOUT)
• Contenuti inseriti sopra elementi già visibili dopo il caricamento iniziale
• Componenti caricati in modo asincrono che modificano la struttura della pagina a caricamento avvenuto

Come misurare il CLS

Esistono diversi strumenti per rilevare e analizzare il punteggio CLS:

• Google Search Console → sezione Core Web Vitals, mostra i dati reali degli utenti aggregati per gruppo di pagine
• PageSpeed Insights → fornisce sia dati reali (field data) sia dati di laboratorio per una singola URL
• Chrome DevTools → per analisi tecniche dettagliate in fase di sviluppo
• Lighthouse → integrato in Chrome, utile per test rapidi

La distinzione tra dati di laboratorio e dati reali è importante: ai fini SEO, Google considera principalmente i dati reali degli utenti raccolti dal Chrome User Experience Report (CrUX).

Come migliorare il CLS

Risolvere i problemi di layout shift richiede interventi tecnici mirati, spesso in fase di sviluppo o durante la manutenzione del sito:

• Specificare sempre larghezza e altezza per immagini e video nel codice HTML
• Riservare spazio fisso per banner pubblicitari, iframe e contenuti dinamici prima che vengano caricati
• Ottimizzare il caricamento dei font usando font-display: swap o precaricando i font critici
• Evitare l’inserimento di elementi sopra la piega dopo il caricamento iniziale della pagina
• Testare su diversi dispositivi e condizioni di rete, perché il CLS può variare significativamente tra desktop e mobile

L’approccio più efficace è preventivo: progettare il layout tenendo conto degli spazi riservati a tutti gli elementi dinamici fin dall’inizio, invece di correggerli a posteriori.

Domande frequenti sul CLS

Il CLS è lo stesso su mobile e desktop? Non necessariamente. Il comportamento del layout può variare in modo significativo tra i due contesti, perché le dimensioni dello schermo cambiano lo spazio disponibile e l’ordine di caricamento degli elementi. È sempre consigliabile misurare il CLS separatamente per mobile e desktop, dato che Google valuta i Core Web Vitals principalmente sulla versione mobile delle pagine.

Un CLS elevato mi fa perdere posizioni su Google? È uno dei fattori di ranking, ma non l’unico. Google considera i Core Web Vitals come segnale di qualità dell’esperienza utente nel contesto di molti altri fattori. Un CLS scarso da solo non azzerà il posizionamento, ma in scenari competitivi può fare la differenza, specialmente quando tutti gli altri segnali SEO sono simili tra i competitor.

Come trovo quali elementi causano il CLS sul mio sito? Il modo più preciso è usare Chrome DevTools: nella scheda Performance puoi registrare una sessione di caricamento e vedere esattamente quali elementi si spostano e quando. In alternativa, PageSpeed Insights segnala le principali cause individuate durante l’analisi della pagina.