Il Cumulative Layout Shift (CLS) è uno dei principali indicatori delle Core Web Vitals e misura quanto gli elementi visivi di una pagina si spostano mentre questa viene caricata.
Un CLS elevato può penalizzare il posizionamento SEO e, soprattutto, frustrare gli utenti: clic mancati, letture interrotte, elementi che saltano all’improvviso. Ridurre il CLS in meno di 10 minuti è possibile se sappiamo dove agire subito e quali errori evitare.
In questo articolo ci concentriamo su azioni concrete e veloci che possiamo mettere in pratica sia quando stiamo progettando un sito web (o un template WordPress) sia in un momento successivo senza toccare l’intera architettura del sito, così da vedere subito miglioramenti.
Di cosa parleremo..
Cosa causa l’aumento del CLS?
Il CLS è causato da spostamenti improvvisi degli elementi durante il caricamento della pagina. Le principali fonti di problemi sono: immagini senza attributi width e height, che vengono caricate senza spazio riservato, font web che arrivano in ritardo e ricalcolano le dimensioni del testo, contenuti dinamici che si inseriscono sopra il fold, annunci pubblicitari che occupano spazio solo dopo essere stati caricati, e iframe esterni senza un contenitore fisso. Questi problemi possono essere aggravati se il template non è progettato per prevedere e fissare gli spazi già a livello di struttura iniziale.
Ecco le cause più comuni:
- immagini senza dimensioni fisse
- font caricati tardi senza fallback coerente
- ads esterne senza spazio riservato
- iframe senza container
- elementi dinamici inseriti sopra il fold
Come misurare il CLS velocemente e capire quali sono le cause
Per ridurre il CLS dobbiamo prima capire dove si verifica e quali elementi lo causano. Possiamo farlo velocemente usando strumenti messi a disposizione da Google.
Ad esempio con PageSpeed Insights otteniamo una panoramica chiara delle metriche Core Web Vitals, inclusi i punteggi di CLS e una lista delle problematiche principali.
Oppure con Lighthouse, integrato in Chrome DevTools (quindi presente su Chrome o browser basati su chromium come Brave), possiamo lanciare un audit dettagliato della pagina e vedere quali elementi causano i maggiori spostamenti direttamente tramite il browser.
Inoltre, con Chrome DevTools attivo, possiamo abilitare la voce Rendering → Layout Shift Regions per evidenziare visivamente sullo schermo gli elementi che si stanno muovendo.
Cosa fare per ridurre o azzerare del tutto il CLS
Per ridurre il CLS rapidamente, dobbiamo concentrarci su interventi specifici e mirati che colpiscono alla radice le cause principali degli spostamenti di layout. Molto spesso non servono grandi stravolgimenti del codice né rifacimenti strutturali: bastano pochi accorgimenti tecnici per garantire che ogni elemento della pagina abbia già uno spazio riservato al momento del caricamento, evitando così che l’arrivo ritardato di immagini, font, annunci o contenuti dinamici provochi movimenti indesiderati.
Inserire la struttura base CSS inline nell’header
Un accorgimento spesso trascurato è inserire inline nell’header la struttura base della pagina, così che il browser possa definire gli spazi principali già nella fase iniziale del rendering, ancora prima di caricare il resto dei CSS.
Un semplicissimo accorgimento, se ad esempio stai sviluppando il tuo template, che ti permette di evitare salti e ricalcoli quando arrivano i fogli di stile esterni, soprattutto su connessioni lente o con molte dipendenze. La struttura inline dovrebbe includere solo gli elementi fondamentali: layout generale, griglie, spazi riservati, così da garantire che il caricamento successivo aggiunga solo dettagli e rifiniture senza modificare la disposizione degli elementi.
Aggiungere width e height esplicite alle immagini
Uno degli errori più frequenti che genera CLS è caricare immagini senza specificarne le dimensioni. Quando il browser non sa quanto spazio deve riservare per un’immagine, posiziona temporaneamente gli altri elementi e poi li sposta non appena l’immagine viene caricata.
Per evitare questo, è fondamentale aggiungere sempre gli attributi width e height nel tag <img> oppure definire le dimensioni tramite CSS. In questo modo il browser può calcolare in anticipo lo spazio necessario, anche prima che l’immagine sia effettivamente disponibile. È importante farlo per tutte le immagini, anche quelle caricate dinamicamente o provenienti da fonti esterne, e testare i layout responsivi per assicurarsi che mantengano proporzioni corrette su ogni dispositivo.
Cose da valutare sempre:
- testare immagini provenienti da CDN o fonti esterne
- aggiungere width e height direttamente su ogni tag
<img> - verificare che le dimensioni siano coerenti anche sui breakpoints mobile
- includere immagini dinamiche nei controlli (es. slider, gallerie)
Riservare spazio fisso per le adv
Le pubblicità esterne sono una delle cause più difficili da gestire per il CLS, perché spesso vengono caricate con tempi variabili e senza dimensioni predefinite. Per evitare che gli annunci spingano in basso o lateralmente il contenuto quando arrivano, è fondamentale creare un div container di dimensione fissa già al momento del caricamento iniziale.
Questo vale soprattutto per le ads posizionate prima del content, dove gli spostamenti possono avere un impatto più evidente sull’esperienza utente. La regola è semplice: riserviamo sempre uno spazio predefinito e dimensionato per ogni blocco pubblicitario, anche quando usiamo formati responsivi.
Usare “font-display: swap” con fallback coerente
Quando carichiamo web font (come i Google Font), il browser inizialmente mostra un font di sistema temporaneo, oppure resta in attesa del font esterno prima di visualizzare il testo.
Si tratta di un processo che può causare movimenti improvvisi quando il font definitivo arriva e ricalcola lo spazio necessario per lettere e parole.
Per ridurre questo effetto, dobbiamo usare la regola font-display: swap, che dice al browser di mostrare subito un font di fallback e sostituirlo appena il font principale è disponibile. Ma non basta: il fallback deve essere coerente nelle dimensioni con il font finale, così da evitare spostamenti evidenti al momento della sostituzione.
Evitare contenuti dinamici sopra il fold
Inserire contenuti dinamici sopra il fold, cioè nella parte visibile subito al caricamento della pagina, è una delle pratiche più rischiose per il CLS. Questo accade, ad esempio, quando script o plugin aggiungono banner, notifiche, moduli o altri elementi dopo che il contenuto principale è già stato posizionato.
Il risultato è che il layout viene ricalcolato, spostando verso il basso tutto ciò che l’utente stava già guardando. Per evitare questo problema, è importante pianificare in anticipo gli spazi destinati a eventuali contenuti dinamici, riservando aree fisse o caricandoli solo sotto il fold.
