CLS e stabilità visiva: eliminare il layout shift che penalizza il sito WordPress sul mobile

Il CLS misura quanto i contenuti di una pagina si spostano mentre la pagina carica. Non è una metrica di velocità: è una metrica di stabilità. Un sito può caricare in un secondo e avere un CLS pessimo, perché mentre l'utente sta per cliccare un pulsante, un'immagine sopra si carica e sposta tutto in basso di 200 pixel. Sul mobile, dove lo schermo è piccolo e il dito è impreciso, il layout shift è particolarmente fastidioso e penalizzato.

Google considera buono un CLS sotto 0.1. Sopra 0.25 è pessimo. La maggior parte dei siti WordPress che vediamo con CLS alto non ha un problema di prestazioni generali: ha uno o due elementi specifici che si caricano tardi e spostano il contenuto. Trovare quelli è il lavoro.

Le cause più comuni su WordPress

Quattro colpevoli ricorrenti. Le immagini e i video senza attributi width e height: il browser non sa quanto spazio riservare, carica il testo, poi quando l'immagine arriva la spinge in basso. I font web che caricano dopo il testo: il testo viene renderizzato con un font di fallback, poi quando il font custom arriva le metriche cambiano e tutto si rimpagina. I banner cookie e i popup che appaiono dopo un secondo e spingono il contenuto. Gli annunci o i contenuti embed (YouTube, Twitter) senza dimensioni riservate.

1. Dimensioni sempre sulle immagini

La causa più frequente e la più facile da risolvere. Ogni immagine deve avere width e height espliciti, così il browser riserva lo spazio prima di scaricare il file. In HTML moderno basta questo:

<!-- Sbagliato: il browser non sa quanto spazio riservare -->
<img src="foto.jpg" alt="Descrizione" loading="lazy" />

<!-- Corretto: dimensioni esplicite, il browser riserva lo spazio -->
<img src="foto.jpg" alt="Descrizione"
     width="800" height="533" loading="lazy" decoding="async" />

<!-- Ancora meglio: aspect-ratio in CSS per immagini responsive -->
<img src="foto.jpg" alt="Descrizione"
     width="800" height="533" loading="lazy"
     style="aspect-ratio: 800 / 533;" />

2. Riservare lo spazio per i font

Quando il font custom arriva, le metriche dei caratteri cambiano e il testo si rimpagina. Due soluzioni. La prima: usare font-size-adjust per far sì che il font di fallback abbia dimensioni simili al font custom. La seconda, più efficace: pre-caricare il font e usare font-display: optional, che dice al browser di usare il font custom solo se è già disponibile, altrimenti resta sul fallback senza causare shift:

/* Pre-carica il font nell'head per ridurre il ritardo */
/* <link rel="preload" href="/fonts/font.woff2" as="font" type="font/woff2" crossorigin> */

@font-face {
    font-family: 'CustomFont';
    src: url('/fonts/font.woff2') format('woff2');
    /* optional: usa il font solo se già disponibile, niente shift */
    font-display: optional;
    /* Dimensioni della font-face per aiutare il fallback */
    size-adjust: 100%;
}

3. Banner cookie e popup fuori flusso

Il banner cookie che appare dal basso e spinge il contenuto è una causa di CLS enorme. La soluzione: posizionarlo con position: fixed o position: absolute, così occupa il suo spazio sopra il contenuto senza spostarlo. Lo stesso vale per i popup newsletter. Se un elemento deve apparire sopra il contenuto senza riservare spazio, deve essere fuori dal flusso normale del documento.

4. Embed e contenuti dinamici

I tweet, i video YouTube, i post Instagram embeddati spesso caricano un iframe senza dimensioni e causano shift. La soluzione è riservare un contenitore con aspect-ratio fisso e riempirlo solo quando il contenuto è pronto. Per i contenuti che appaiono dopo l'interazione (carica altri commenti, carica più prodotti), riserva lo spazio del contenitore prima di avviare il caricamento, così il contenuto sotto non salta.

Il CLS è la metrica Core Web Vitals più sottovalutata perché non appare come un problema di velocità nei test di laboratorio. Ma sui dati reali degli utenti, dove la connessione è variabile e il dispositivo è lento, è quella che rovina l'esperienza percepita. Un audit che misura il CLS sui dati reali, non solo in laboratorio, è il punto di partenza per capire se il tuo sito ha questo problema e dove.