Cumulative Layout Shift: stabilità visiva e impatto sulla SEO

Il Cumulative Layout Shift (CLS) è una delle tre metriche dei Core Web Vitals introdotte da Google per misurare l’esperienza utente reale di un sito.
A differenza di altre metriche legate alla velocità, il CLS non misura quanto un sito è rapido, ma quanto è stabile mentre si carica. Insieme al Largest Contentful Paint e all’INP, permettono di capire quando il sito sia performante e gradevole da usare per l’utente.

Ti è mai capitato di voler cliccare su un bottone e, all’improvviso, la pagina si sposta e finisci per cliccare su tutt’altro?
Ecco, quello è un layout shift — uno spostamento imprevisto degli elementi della pagina.
Il CLS serve proprio a misurare la frequenza e l’intensità di questi movimenti durante il caricamento.

Un punteggio CLS basso indica una pagina stabile, fluida e prevedibile.
Un punteggio alto, invece, significa che il layout “salta” troppo e compromette l’esperienza di chi naviga.

Come il CLS influisce sull’esperienza utente

Un sito può anche caricarsi velocemente, ma se i suoi contenuti si muovono di continuo, l’esperienza risulta comunque frustrante e disorientante.
È come leggere un libro mentre qualcuno ti cambia le pagine sotto gli occhi.

Google considera il CLS un segnale diretto di qualità dell’esperienza utente (Page Experience).
Un layout instabile non solo peggiora la percezione del brand, ma può ridurre il tempo di permanenza e aumentare il tasso di abbandono (bounce rate).

Per questo motivo, anche se spesso trascurato rispetto a LCP e INP, il CLS ha un impatto reale sulla SEO.
Siti stabili e piacevoli da navigare hanno maggiori probabilità di ottenere un buon posizionamento.

Cosa causa spostamenti di layout

Gli spostamenti di layout hanno molte cause, spesso invisibili a prima vista.
Ecco le più comuni, e come riconoscerle:

• Immagini e video senza dimensioni definite: quando un’immagine o un video vengono caricati senza larghezza e altezza dichiarate, il browser non sa quanto spazio riservare e il contenuto sottostante “salta” durante il rendering.
• Inserzioni pubblicitarie o widget dinamici: banner, iframe o box social che si caricano in ritardo possono spostare testi o pulsanti, causando salti improvvisi nel layout.
• Font web non ottimizzati: i font scaricati da server esterni, se non gestiti correttamente, possono far “ballare” il testo durante il caricamento.
  È il classico caso in cui il font di default viene sostituito da quello definitivo dopo qualche secondo.
• Elementi dinamici in JavaScript: componenti che si espandono o appaiono in ritardo (come banner cookie, pop-up o alert) modificano la struttura della pagina già caricata.
• Contenuti caricati tardivamente: immagini, pulsanti o moduli che compaiono quando l’utente inizia a scorrere la pagina possono alterare il posizionamento degli altri elementi, specialmente se non gestiti con placeholder.

Come migliorare la stabilità visiva

Ottimizzare il CLS significa garantire coerenza e fluidità visiva durante tutto il caricamento della pagina.
Ecco le azioni più efficaci per farlo.

1. Imposta dimensioni fisse per immagini e video

Definisci sempre larghezza e altezza (o aspect-ratio) per ogni immagine o video.
Questo aiuta il browser a riservare subito lo spazio corretto, evitando “salti” successivi.

2. Gestisci correttamente i font

Utilizza l’attributo font-display: swap per mostrare subito un font temporaneo e poi sostituirlo con quello finale senza spostare il testo.

3. Riserva spazio per banner e widget

Crea contenitori con dimensioni predefinite per le aree destinate a pubblicità, pop-up o componenti dinamici.
Meglio uno spazio vuoto temporaneo che un blocco di testo che si sposta all’improvviso.

4. Evita animazioni che alterano il layout

Preferisci transizioni fluide o trasformazioni CSS (transform e opacity) invece di cambiamenti improvvisi di dimensioni o margini.

5. Usa immagini e video lazy loading in modo consapevole

Il caricamento differito è utile, ma applicalo solo agli elementi below the fold.
Evita di usare lazy loading per le immagini visibili subito all’apertura.

Un sito visivamente stabile comunica affidabilità, cura e attenzione: qualità che Google premia, ma che soprattutto le persone percepiscono.

Come misurare il CLS con i tool di Google

Il Cumulative Layout Shift si misura in un punteggio numerico compreso tra 0 e oltre 0,25:
più è vicino allo zero, più la pagina è stabile.
Ecco come monitorarlo nel tempo con strumenti affidabili:

PageSpeed Insights

Mostra il valore reale del CLS e suggerisce miglioramenti mirati per ciascun elemento che causa spostamenti.

Search Console (Rapporto Core Web Vitals)

Raccoglie dati reali dagli utenti e segnala le pagine con CLS “da migliorare” o “scarse”.

Lighthouse

Permette di analizzare la pagina direttamente dal browser Chrome, con una sezione dedicata al CLS e ai “Layout Shifts”.

Chrome DevTools

Visualizza, nella sezione “Performance”, il grafico dei layout shifts in tempo reale per capire quali elementi generano movimenti.

WebPageTest

Consente di vedere il rendering passo dopo passo e identificare con precisione quando e dove avvengono gli spostamenti di layout.

In sintesi

Il Cumulative Layout Shift è una metrica spesso sottovalutata, ma fondamentale per la credibilità visiva di un sito.
Ridurre gli spostamenti di layout significa offrire un’esperienza coerente, rassicurante e piacevole — e migliorare, di conseguenza, anche il posizionamento su Google.

Perché un sito stabile non è solo più bello da vedere: è anche più facile da vivere.