Come migliorare il CLS e prevenire gli spostamenti del layout
Migliora il CLS stabilizzando immagini, font, incorporamenti, annunci e contenuti dinamici del tuo sito.
Se il testo si sposta mentre leggi, un pulsante cambia posizione o un’immagine spinge verso il basso il resto della pagina, il sito ha un problema di stabilità visiva.
Questi movimenti imprevisti vengono misurati dal Cumulative Layout Shift (CLS), uno dei Core Web Vitals di Google. Un punteggio di 0,1 o meno è buono, mentre oltre 0,25 è scarso.
Che cos’è il CLS?
Il CLS misura gli spostamenti inattesi degli elementi visibili durante una visita. Un annuncio può comparire sopra un link proprio quando l’utente sta per selezionarlo, oppure una grande immagine può spostare l’articolo quando termina il caricamento.
La valutazione usa il 75° percentile delle visite, separando mobile e desktop. Per questo rappresenta ciò che gli utenti sperimentano davvero, non solo la velocità di download.
Cause comuni
Il browser spesso non conosce ancora la dimensione finale di un elemento. Le cause più frequenti sono immagini senza dimensioni, video e iframe senza spazio riservato, annunci, widget di terze parti, sostituzioni dei font, banner inseriti dopo il rendering e contenuti JavaScript senza un placeholder.
Stabilizzare immagini, embed e annunci
Indica sempre width e height per le immagini, così il browser può riservare il rapporto corretto:
<img src="esempio.jpg" alt="Esempio" width="1200" height="800">Con max-width: 100%; height: auto l’immagine resta responsive. Per video, mappe, moduli e contenuti social usa un contenitore con aspect-ratio: 16 / 9. Riserva in anticipo anche l’altezza prevista degli annunci.
Contenuti dinamici e font
Banner dei cookie, promozioni, risultati di ricerca, consigli e risposte API non dovrebbero spingere il contenuto già visibile. Riserva lo spazio prima del rendering o usa skeleton e altezze minime prevedibili.
Un font di fallback può avere metriche diverse dal webfont e cambiare la disposizione del testo. Scegli un fallback simile, configura con attenzione il caricamento e valuta size-adjust prima di rimuovere un font personalizzato.
Animazioni e diagnosi
Animare top, left, width, height o margin modifica il layout. Per movimento e ridimensionamento preferisci transform CSS come transform: translateX(20px).
PageSpeed Insights, Lighthouse e Chrome DevTools aiutano a trovare la causa. I dati sul campo descrivono dispositivi e reti reali; i dati di laboratorio servono per il debug. Prova anche scroll, menu, consensi, caricamento aggiuntivo e widget.
Un hosting più veloce non risolve automaticamente il CLS: individua prima l’elemento che si sposta e correggi HTML, CSS, JavaScript, media o servizi esterni.
Domande frequenti
Qual è un buon punteggio CLS?
0,1 o meno è buono, da 0,1 a 0,25 richiede miglioramenti e oltre 0,25 è scarso.
Il lazy loading causa CLS?
Non da solo. Il problema nasce quando mancano dimensioni o rapporto d’aspetto per riservare lo spazio.
Migliorare il CLS migliora la SEO?
I Core Web Vitals sono usati dai sistemi di ranking di Google, ma il CLS è solo uno dei molti segnali.
Crea un sito più stabile
Il principio essenziale è semplice: il browser deve sapere in anticipo quanto spazio serve a ogni elemento. Riserva quello spazio, testa le interazioni reali e controlla dati sul campo e di laboratorio.