CLS: cause e correzioni

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.

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

• Dai a ogni immagine width e height, o un aspect-ratio: il browser riserva lo spazio prima di scaricare il file.
• Riserva l'altezza dei banner e dei blocchi di consenso nel markup, non con un'animazione all'apertura.
• Dai un'altezza minima a skeleton e liste lazy: un contenitore a zero pixel si apre quando arriva il dato e sposta tutto sotto.

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.