Cumulative Layout Shift (CLS)
Core Web Vital che misura quanto il contenuto della pagina salta e si sposta inaspettatamente durante il caricamento: la spiacevole esperienza di stare per cliccare e vedere il pulsante spostarsi. Misura la stabilità visiva. Obiettivo: sotto 0,1.
Cosa misura: il CLS somma tutti gli spostamenti di layout inattesi (elementi che si muovono dopo essere già stati renderizzati), pesati in base a quanta parte dello schermo si è mossa e di quanto. Cause classiche: immagini e video senza dimensioni specificate (il contenuto salta al caricamento; si risolve con width/height o aspect-ratio), pubblicità e embed che compaiono e spingono giù il contenuto, web font che si scambiano (FOUT con dimensione diversa) e contenuto inserito sopra quello esistente. Ottimizzazione: riservare sempre lo spazio per media e contenuti dinamici (aspect-ratio, dimensioni fisse, segnaposto skeleton), usare font-display con metriche di fallback corrispondenti e non inserire elementi sopra ciò che l'utente sta guardando. È uno dei tre Core Web Vitals e spiega direttamente perché esistono aspect-ratio e gli attributi di dimensione. Correlato a Largest Contentful Paint e aspect-ratio.