I migliori consigli per correggere i problemi di CLS in Search Console

Table of contents

CLS: Il contesto

Cumulative Layout Shift misura i movimenti inaspettati del layout. Ogni volta che un elemento visibile cambia posizione mentre una pagina si carica o viene usata, viene calcolato un punteggio di spostamento. Il punteggio cumulativo è il CLS.

Cause comuni:

• Immagini o iframe senza attributi espliciti width e height
• Annunci che si espandono dopo che il contenuto circostante è già stato renderizzato
• Contenuto iniettato dinamicamente (banner, avvisi sui cookie, widget di chat) inserito sopra il contenuto esistente
• Font web che causano un flash e reflow al caricamento (FOUT/FOIT)
• JavaScript di terze parti che aggiunge elementi di UI dopo il rendering iniziale

Correlato: Come correggere i problemi di LCP in Search Console

Misurare il CLS

Google Search Console

Il rapporto Core Web Vitals di Search Console è il punto di partenza. Mostra le pagine segnalate come “Scarso” (CLS ≥ 0,25) o “Da migliorare” (0,1–0,25), raggruppate per tipo di problema. Usa questo rapporto per ottenere l’elenco degli URL interessati.

PageSpeed Insights

PageSpeed Insights (PSI) mostra sia dati di laboratorio (simulazione Lighthouse) che dati reali da utenti reali tramite il Chrome UX Report (CrUX). I dati reali contano di più per il ranking — riflettono le esperienze effettive degli utenti, non solo un test sintetico.

PSI simula solo il viewport iniziale al caricamento, quindi potrebbe non rilevare CLS attivato dallo scrolling o dall’interazione dell’utente. Per questi casi, usa Chrome DevTools.

Chrome DevTools e l’estensione Web Vitals

L’estensione Web Vitals per Chrome (mantenuta da Google) mostra i punteggi CLS in tempo reale mentre scorri e interagisci con una pagina. È il modo più rapido per riprodurre manualmente gli spostamenti di layout. Il pannello Performance di Chrome DevTools evidenzia anche i record di spostamento del layout con annotazioni che mostrano quali elementi si sono spostati e di quanto.

Correggere i problemi di CLS

Aggiungere width e height a tutte le immagini e iframe

Questa è la correzione con il maggiore impatto per la maggior parte dei siti. Senza dimensioni esplicite, il browser non sa quanto spazio riservare mentre un’immagine si carica, quindi il contenuto sottostante viene spinto verso il basso quando l’immagine appare.

<!-- Male: nessuna dimensione -->
<img src="photo.jpg" alt="…">

<!-- Bene: le dimensioni esplicite permettono al browser di riservare spazio -->
<img src="photo.jpg" alt="…" width="800" height="450">

I CSS moderni (aspect-ratio) ottengono lo stesso effetto per le immagini responsive, ma impostare esplicitamente gli attributi width e height nell’HTML è l’approccio più affidabile ed è gestito automaticamente dalla maggior parte dei framework moderni e dei pipeline di immagini dei CMS.

Riservare spazio per gli annunci

Gli annunci sono la causa più comune di CLS elevato sui siti monetizzati. Le reti pubblicitarie servono dimensioni dinamiche e, se non si riserva spazio, la pagina rifluisce quando l’annuncio si carica.

1. Riserva un container fisso (min-height corrispondente alla dimensione dell’annuncio più comune) prima che il tag annuncio si carichi.
2. Non comprimere il container se non viene servito alcun annuncio — un segnaposto vuoto evita un secondo reflow.
3. Fai particolare attenzione agli annunci posizionati vicino alla parte superiore del viewport. Gli annunci non fissi inseriti sopra la piega causano i peggiori punteggi CLS.
4. Usa i dati storici di impressione della tua rete pubblicitaria per determinare quali dimensioni degli annunci sono più comuni per ogni posizione, poi dimensiona il container di conseguenza.

Evitare di inserire contenuto sopra il contenuto esistente

I banner di consenso ai cookie, i prompt di notifica e i widget di chat che si caricano in modo asincrono e appaiono sopra il contenuto esistente sono una fonte frequente di CLS. Opzioni:

• Caricali in un overlay a posizione fissa (non influenzano il flusso del documento).
• Pre-alloca spazio nel layout se devono apparire inline.
• Per i banner sui cookie in particolare, considera un posizionamento nella parte inferiore dello schermo — evita completamente il CLS ed è ugualmente conforme alla normativa.

Correggere il caricamento dei font web (FOIT e FOUT)

FOIT (Flash of Invisible Text) si verifica quando un browser nasconde il testo fino al caricamento di un font personalizzato. FOUT (Flash of Unstyled Text) si verifica quando viene mostrato prima un font di fallback, poi sostituito — la differenza nelle metriche del font causa uno spostamento del layout.

La correzione è font-display: swap combinato con <link rel="preload"> per i font critici:

<link rel="preload" href="/fonts/my-font.woff2" as="font" type="font/woff2" crossorigin>

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/my-font.woff2') format('woff2');
  font-display: swap;
}

font-display: swap causa FOUT (testo visibile ma non stilizzato) invece di FOIT (testo invisibile), il che è meglio per il CLS perché il testo è visibile immediatamente. Per ridurre ulteriormente l’impatto della sostituzione sulla metrica, usa la proprietà CSS size-adjust per far corrispondere le metriche del font di fallback al font personalizzato — questo minimizza il reflow quando il font personalizzato subentra.

JavaScript di terze parti

Gli script di terze parti (pulsanti di condivisione, widget di commenti, chat live, popup di analytics) si caricano in modo asincrono e spesso iniettano elementi di UI dopo che la pagina è già stata renderizzata. Per minimizzare il loro impatto sul CLS:

• Sposta gli elementi visivi di terze parti sotto il viewport iniziale quando possibile — il contenuto più in basso nella pagina ha più tempo per caricarsi prima che l’utente vi arrivi.
• Pre-definisci le dimensioni del container prima che lo script venga eseguito, in modo che il browser sappia già quanto spazio riservare.
• Usa la scheda Network di Chrome DevTools filtrata per origini di terze parti per identificare quali script contribuiscono agli spostamenti di layout.

Lazy loading e segnaposto

Il lazy loading differisce il caricamento delle immagini finché non sono vicine al viewport, risparmiando larghezza di banda. Ma se non viene impostato alcun segnaposto, il container dell’immagine crolla a zero di altezza e poi balza aprendosi quando l’immagine si carica.

Assicurati sempre che gli elementi con lazy loading abbiano dimensioni esplicite o aspect-ratio impostato tramite CSS, in modo che il browser riservi lo spazio corretto anche prima che l’immagine si carichi. Questo vale sia per il loading="lazy" nativo che per i lazy loader basati su JavaScript.

CLS — FAQ 2026

FID è ancora un segnale di ranking nel 2026?

No. Google ha ufficialmente ritirato FID (First Input Delay) come Core Web Vital nel marzo 2024 e lo ha sostituito con INP (Interaction to Next Paint). Il trio CWV attuale è LCP, INP e CLS. Aggiorna qualsiasi documentazione interna o strumento che fa ancora riferimento a FID.

Qual è un buon punteggio CLS da raggiungere?

Le soglie di Google: sotto 0,1 è “buono”, 0,1–0,25 è “da migliorare”, sopra 0,25 è “scarso”. Punta a stare sotto 0,1. Il punteggio viene misurato al 75° percentile dei caricamenti di pagina nei dati reali di CrUX.

Il CLS influenza il ranking?

Sì, ma è un segnale tra tanti. I Core Web Vitals sono un fattore di ranking legato all’esperienza di pagina dalla metà del 2021. Un CLS scarso non affosserà una pagina forte, ma può fare la differenza in caso di pareggio e danneggerà direttamente le metriche di coinvolgimento degli utenti (frequenza di rimbalzo, profondità della sessione) per i propri meriti.

Il mio punteggio PSI mostra un buon CLS ma Search Console segnala la pagina come scarsa — quale ha ragione?

Fidati di Search Console (dati reali) rispetto ai dati di laboratorio di PSI in caso di conflitto. I test di laboratorio PSI simulano solo il caricamento iniziale del viewport; perdono il CLS attivato dallo scrolling dell’utente, dalle sostituzioni di font su connessioni più lente o dagli annunci caricati dopo l’interazione. I dati reali CrUX in Search Console riflettono utenti reali in condizioni reali.

Letture correlate:

• Come correggere i problemi di LCP in Search Console
• Come ottimizzare la velocità del tuo sito web
• Audit SEO tecnico

La versione breve

Se stai leggendo questo perché il flusso di lavoro descritto ti sta mangiando la settimana, è esattamente il tipo di loop per cui costruisco agenti IA. Due slot di sviluppo aperti alla volta.

Aggiornato per maggio 2026

La storia di Google nel 2026 è quella delle AI Overviews ovunque: l’esperimento SGE del 2023 è diventato una funzione predefinita nel maggio 2024 e ora appare su circa il ~60% delle query informative negli USA. Per gli operatori di SEO e advertising:

• Il CTR organico sulle query con AI Overviews è sceso del 15–30% in media secondo studi pubblicati da Ahrefs, Authoritas e simili (dati 2024–25).
• Google Ads ha rinominato diverse funzionalità di PMax come AI-powered Search; l’interfaccia di gestione delle campagne ora suggerisce per impostazione predefinita strategie di offerta con IA.
• Search Console ha aggiunto un filtro “impressioni AI Overview” alla fine del 2025 — se un articolo qui fa riferimento ai report GSC, il playbook necessita di aggiornamento.
• I ricavi pubblicitari di Google hanno superato ~265 miliardi di dollari nel 2024; Search rimane circa il 57% dei ricavi totali di Alphabet.

La risposta a “come guadagna Google” nel 2026: ancora principalmente gli annunci Search (dominanti), ma YouTube Ads, Cloud e Abbonamenti (YouTube Premium + Google One) sono ora linee significative.