CLS A/B testing

CLS (Cumulative Layout Shift) è una delle tre Core Web Vitals definite da Google, e misura la stabilità visiva di una pagina web: in altre parole, il modo in cui gli elementi si spostano in maniera inaspettata durante il caricamento.
Nell’ambito dell’A/B testing, il CLS è una trappola frequente che può falsare i risultati di un test o danneggiare l’esperienza utente, anche se la variazione testata sembra migliore nella sostanza.

🎯 Perché è critico in A/B testing

Un A/B test mira a isolare l’impatto di un cambiamento specifico sul comportamento dell’utente (clic, conversione…). Ma se la variazione introduce uno spostamento visivo (es.: pulsante che salta, immagine che spinge il contenuto verso il basso), allora:

• L’interazione dell’utente viene disturbata: clic mancato, cattiva impressione, attenzione deviata,
• Il risultato del test diventa distorto: il calo di performance non deriva dal contenuto testato, ma dalla qualità dell’esecuzione tecnica.

💡 Un CLS troppo elevato non sarà visibile nei KPI classici, ma influenzerà il CVR senza che se ne capisca il motivo.

🧪 Come un A/B test può provocare CLS

Ecco gli scenari frequenti in cui una variazione genera CLS involontariamente:

• Aggiunta di un’immagine o di un blocco HTML senza riservare spazio: il contenuto "spinge" il resto della pagina una volta caricato,
• Caricamento di script A/B test tramite un tag manager lento (invece di un’integrazione diretta nel <head>),
• Inserimento dinamico di un messaggio o di un banner promozionale sopra il contenuto senza spazio riservato,
• Cambio di font o di peso del font senza preload, provocando “salti” del testo,
• Utilizzo di animazioni CSS non controllate (es.: effetto di slide o fade-in che ridisegna la pagina).

📌 Rischi diretti in test A/B:

• Perdita di conversioni su mobile (dove i salti visivi sono amplificati),
• Risultati statisticamente significativi ma falsi,
• Calo del CVR senza spiegazione apparente,
• Rifiuto della variazione per motivi sbagliati.

✅ Buone pratiche CRO per evitare di impattare il CLS:

1. Prevedere lo spazio riservato per ogni blocco aggiunto in una variazione (es.: riservare l'altezza di un'immagine con CSS aspect-ratio o classi placeholder),
2. Evitare l'iniezione tardiva di contenuto con JavaScript (preferire gli inserimenti lato server o il più presto possibile lato client),
3. Testare tutte le variazioni con Lighthouse o PageSpeed Insights prima del deployment per verificare il punteggio CLS,
4. Integrare gli script di A/B test direttamente nel codice (head) per evitare il flickering,
5. Misurare i Core Web Vitals in live su ogni variazione con uno strumento come Web Vitals Extension, SpeedCurve, Datadog RUM o BigQuery + GA4.