CLS (Cumulative Layout Shift)

Come funziona il Cumulative Layout Shift

Il Cumulative Layout Shift (CLS) misura la stabilità visiva di una pagina web durante il caricamento e l'utilizzo. È uno dei tre Core Web Vitals e quantifica quanto gli elementi della pagina si spostano in modo inaspettato mentre l'utente la sta leggendo o sta interagendo. Un CLS elevato genera frustrazione: l'utente clicca su un pulsante che si sposta all'ultimo momento, perdendo il punto di lettura.

Soglie di Google: CLS sotto 0,1 è "buono", tra 0,1 e 0,25 è "da migliorare", oltre 0,25 è "scarso". Il valore è adimensionale e calcolato come prodotto tra impact fraction (frazione di viewport coinvolta dallo shift) e distance fraction (distanza dello shift). Solo gli shift inaspettati contano: quelli causati da interazioni utente entro 500ms vengono ignorati.

Cause comuni di CLS elevato: immagini senza dimensioni esplicite, web font che generano FOUT/FOIT, ad banner con dimensioni dinamiche, contenuti iniettati in alto sopra il fold (cookie banner, notifiche), animazioni che modificano layout invece di transform/opacity. Soluzioni: width/height su immagini e iframe, font-display swap con preload, riservare spazio per ad e widget, usare transform invece di top/left.

Esempio pratico

Immagina Group implementa per i clienti audit CLS sistematici che identificano gli elementi che generano shift e li sistemano. Per un e-commerce con CLS 0,38 (zona rossa), abbiamo portato il valore a 0,04 (verde) intervenendo su: dimensioni esplicite delle immagini prodotto, riserva spazio per il banner di cookie consent, ottimizzazione del web font con preload e font-display swap.

Ottimizza il tuo CLS

Immagina Group offre audit di stabilità visiva e ottimizzazioni CLS per siti WordPress e WooCommerce. Scopri il servizio web development o richiedi un audit Core Web Vitals.