CLS misura uno dei tre Core Web Vitals introdotti da Google nel 2020 come segnali di esperienza utente. Per essere classificata come "buona", una pagina deve avere CLS ≤ 0,1 nel 75° percentile delle visite reali (Chrome User Experience Report). Tra 0,1 e 0,25 è "da migliorare"; oltre 0,25 è "scarsa" e penalizza il ranking.
Il calcolo del CLS è un prodotto: impact fraction × distance fraction. L'impact fraction è la porzione di viewport coperta dagli elementi che si spostano; la distance fraction è la massima distanza percorsa dallo shift, rapportata alla dimensione della viewport. Tutti gli shift "non attesi" (cioè non causati da un click o tap dell'utente entro 500ms) vengono sommati per ottenere il punteggio finale.
Le cause più comuni di CLS elevato includono: immagini senza attributi width e height espliciti, web fonts caricati con FOUT (Flash of Unstyled Text) che ridimensionano il layout, annunci pubblicitari che si caricano in modo asincrono senza spazio riservato, banner di cookie consent che spingono il contenuto in basso, e iniezioni dinamiche di contenuto (es. "you may also like") above-the-fold.
Le soluzioni più efficaci per ridurre CLS sono: specificare sempre width e height o aspect-ratio su tutte le immagini e iframe; usare font-display: optional o preload dei font critici; riservare spazio in CSS per banner pubblicitari (min-height sul container ad); evitare di iniettare contenuti above-the-fold dopo il primo render; su Next.js, il componente <Image> di next/image impone width/height obbligatori risolvendo il problema più frequente.
Per le PMI italiane il CLS è importante non solo per il ranking ma per la conversion rate: uno studio Google del 2023 ha mostrato che siti con CLS < 0,1 hanno tasso di abbandono inferiore del 24% rispetto a siti con CLS > 0,25. Su pagine di e-commerce e form di contatto, anche un piccolo shift può causare click accidentali e abbandono.
Ultimo aggiornamento: 13 maggio 2026