CLS Ottimizzazione — Ridurre i Layout Shift per una Stabilità Visiva che Aumenta le Conversioni

Il tuo sito carica veloce, ma mentre leggi il contenuto il testo salta, un pulsante si sposta e clicchi per errore su un banner. È successo anche a te, vero? Questo è il Cumulative Layout Shift (CLS), e non è solo un fastidio: è un costo. Noi, di Meteora Web, lo vediamo ogni giorno nei progetti che ci arrivano: un sito apparentemente veloce perde visite perché l'utente non riesce a leggere senza che la pagina balli. E Google lo penalizza. In questa guida operativa ti mostriamo come diagnosticare e risolvere i layout shift, con codice che funziona e strategie che abbiamo testato su clienti reali.

Cosa provoca un layout shift e perché incide sul fatturato?

Un layout shift avviene quando un elemento della pagina cambia posizione dopo che il browser ha già disegnato il primo frame. Le cause più comuni? Immagini senza dimensioni esplicite, annunci pubblicitari caricati in ritardo, font che si sostituiscono, contenuti iniettati da terze parti (widget social, embeds). Il risultato: l'utente perde il punto di lettura, clicca accidentamente su un altro link, abbandona. Se il tuo e-commerce ha un CLS sopra 0.1 (la soglia Google per "good"), stai pagando per far frustrare i visitatori. Calcolando un tasso di conversione medio del 2%, un CLS alto può costare fino al 20% delle vendite. Noi abbiamo visto un cliente dimezzare il tasso di abbandono semplicemente risolvendo i layout shift sulle pagine prodotto.

Come si misura il CLS nel tuo sito?

Prima di ottimizzare, devi sapere dove colpire. Il CLS si calcola come il prodotto della frazione di spostamento per la distanza spostata, sommato su tutta la vita della pagina. I tool che usiamo quotidianamente:

• Chrome DevTools: Apri, vai a "Performance" e registra un caricamento. La sezione "Experience" mostra ogni shift in rosso.
• Lighthouse: Report automatico con la metrica CLS e consigli.
• Search Console: Report Core Web Vitals — ti dice quante pagine hanno CLS scarso.
• web.dev/measure: Test di campo con dati reali CrUX.

Non fidarti solo del lab: il CLS reale dipende dalla connessione, dal dispositivo. Per questo noi incrociamo sempre dati di laboratorio e dati di campo.

Quali tecniche concrete per ridurre il CLS?

1. Aggiungi dimensioni esplicite a immagini e video

Il metodo più efficace: ogni tag <img> deve avere width e height. Nel CSS, usa aspect-ratio per adattare le responsive image. Esempio per un'immagine che deve stare al 100% della larghezza:

.hero-image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

In HTML:

<img src="prodotto.jpg" alt="Prodotto" width="800" height="600" style="max-width: 100%; height: auto;" />

Per immagini che carichi via JavaScript (es. lazy loading con Intersection Observer), riserva lo spazio con un placeholder CSS che abbia lo stesso aspect ratio. Noi usiamo questo snippet:

.image-container {
  position: relative;
  width: 100%;
  padding-bottom: 75%; /* 4:3 aspect ratio */
}
.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

2. Riserva spazio per annunci e widget di terze parti

Annunci pubblicitari e widget social caricano in modo asincrono e spesso spostano il layout. La soluzione? Un contenitore con dimensioni fisse. Noi usiamo un div con min-height e width: 100% basato sul formato dell'annuncio tipico. Esempio per un banner 728x90:

<div id="ad-slot" style="width: 100%; min-height: 90px;"></div>

Se l'annuncio non arriva, mostriamo uno spazio vuoto invece di far collassare tutto. Questo elimina lo shift.

3. Carica i font in modo che non causino shift

I webfont spesso si sostituiscono al font di sistema, cambiando le dimensioni dei caratteri e spostando il testo. Per evitarlo, usa font-display: swap nel CSS @font-face, ma assicurati di pre-caricare il font primario. Ancora meglio: allinea le metriche dei font con size-adjust della proprietà @font-face. Esempio:

@font-face {
  font-family: 'CustomFont';
  src: url('custom.woff2') format('woff2');
  font-display: swap;
  size-adjust: 90%; /* compensa la differenza di altezza */
}

Un cliente con un sito di news aveva un CLS di 0.35 solo per i font. Dopo aver applicato size-adjust e preload, è sceso a 0.05.

4. Evita di inserire contenuti sopra il fold con JavaScript

Qualsiasi elemento che viene aggiunto al DOM dopo il primo paint, sopra la piega, provoca shift. Se devi caricare dinamicamente un banner o un pop-up, fallo con una transizione che non cambi il layout degli altri elementi (es. posizionamento assoluto o fixed).

5. Usa Intersection Observer per lazy loading senza shift

Il lazy loading nativo (loading="lazy" sulle immagini) riserva automaticamente lo spazio se sono presenti dimensioni. Se usi Intersection Observer, devi riservare tu lo spazio con un placeholder. Ecco un pattern che usiamo:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.classList.add('loaded');
      observer.unobserve(img);
    }
  });
});
document.querySelectorAll('.lazy').forEach(img => observer.observe(img));

Con CSS che tiene lo spazio:

.lazy {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  background: #eee;
}

Come verificare la stabilità visiva dopo le ottimizzazioni?

Non fermarti al test locale. Usa:

• Lighthouse in Chrome DevTools (modalità throttled).
• PageSpeed Insights: dà il dato di campo (CrUX) e di laboratorio. Punta a CLS < 0.1.
• Web Vitals Chrome Extension: mostra CLS in tempo reale durante la navigazione.
• GTmetrix o WebPageTest: filmato del caricamento per vedere visivamente gli shift.

Noi seguiamo una checklist dopo ogni deploy: registriamo 5 caricamenti con DevTools, osserviamo gli shift, controlliamo che non ci siano nuovi elementi inseriti senza dimensioni. Se trovi un shift, isola l'elemento con il selettore CSS e aggiungi spazio riservato.

In sintesi: cosa fare adesso per il tuo CLS

1. Misura il CLS attuale con PageSpeed Insights e Search Console per le tue pagine chiave.
2. Identifica le cause: apri DevTools, registra il caricamento e cerca gli shift rossi nella timeline.
3. Applica le dimensioni a ogni immagine, video, iframe, annuncio.
4. Usa font-display: swap con size-adjust per i font personalizzati.
5. Rimuovi o posticipa contenuti sopra il fold caricati dinamicamente.
6. Ripeti il test: punta a CLS < 0.1.
7. Monitora settimanalmente con Search Console.

Se hai bisogno di una mano, noi di Meteora Web facciamo audit di performance su misurar, partendo dal tuo stack e dai tuoi numeri. Il CLS non è magia: è tecnica, e si risolve.

Per approfondire l'intero quadro delle performance, leggi la nostra guida Pillar su Core Web Vitals e PageSpeed.