# CLS: cause e correzioni

CLS misura gli spostamenti inattesi del layout: buono sotto 0,1. Le quattro cause che lo alzano e le correzioni che si vedono nel p75.

> Pagina: https://ui.eneawork.it/blog/cls-cause-e-fix
> Markdown: https://ui.eneawork.it/blog/cls-cause-e-fix.md

*2026-11-01*

CLS misura quanto il layout si sposta senza aspettarselo: sotto 0,1 è buono. Le cause sono immagini senza dimensioni, font che cambiano metrica, banner inseriti sopra il contenuto e componenti che partono da altezza zero.

Il beacon ha registrato 209 letture CLS tra il 25 ottobre e il 1 novembre 2026: p75 0,012, con 28 letture sopra 0,1. Per device: 0,004 su 61 letture desktop, 0,007 su 99 letture mobile. Numeri misurati dal beacon e riletti da GET /api/rum/summary. Il catalogo EneUI misura 111.985 componenti, 1.556 blocchi e 12.808 icone da 1.472 librerie, letti da /api/stats il 1 novembre 2026. Formula e finestra: web.dev, CC BY 4.0.

## Come si calcola

Ogni spostamento vale impact fraction per distance fraction: quanto spazio occupa l'elemento instabile e quanto si muove. Gli spostamenti entro 500 ms da un input non contano, e il punteggio somma solo la finestra di 5 secondi peggiore.

## Le quattro cause che contano

## Attribuire lo spostamento

new PerformanceObserver((list) => { for (const entry of list.getEntries()) { if (entry.hadRecentInput) continue; console.log(entry.value.toFixed(4), entry.sources?.map((s) => s.node)); } }).observe({ type: "layout-shift", buffered: true });

In DevTools il pannello Performance mostra gli stessi eventi come Layout Shift, con il rettangolo dell'elemento che si muove. Se sources è vuoto lo spostamento arriva da un nodo rimosso dal DOM: parti dalla lista dei componenti renderizzati sopra la piega.

## Tre correzioni che si vedono nel p75

## La limitazione da dichiarare

CLS non dice se lo spostamento dà fastidio: un banner che si muove di 3 px con lo stesso font vale quasi zero, un titolo che salta di 200 px rovina la lettura. Il nostro p75 di 0,012 su 209 letture descrive questo sito, non il tuo, e un registro locale non sostituisce il campo.

## Dove continuare

Nel catalogo: componenti card, image auto slider e empty state. Le guide: immagini senza dimensioni e cosa sono i Core Web Vitals; l'articolo gemello su font-display e il confronto copy-paste o headless.

## FAQ

### CLS è espresso in secondi?

No. È un punteggio senza unità, fra 0 e 1 e oltre: nasce dal prodotto tra la frazione di spazio occupata e la frazione di distanza percorsa.

### Qual è la soglia di CLS?

0,1 al 75° percentile delle visite, separate per mobile e desktop. Sopra 0,25 la pagina è da correggere.

### Gli spostamenti voluti contano?

No. Un movimento entro 500 ms da un input dell'utente viene escluso, perché è una risposta attesa e non un salto inatteso.

### Perché un'immagine senza dimensioni alza CLS?

Perché il browser non conosce l'altezza finché non ha scaricato il file. Nel frattempo il contenuto sotto sta più in alto e salta quando l'immagine prende il suo spazio.

### CLS si misura in Lighthouse?

Sì, ma su una singola esecuzione senza interazione. Un CLS di laboratorio pari a zero non esclude salti causati da banner o dati caricati dopo.