Il CLS (Cumulative Layout Shift) è uno dei Core Web Vitals critici per la SEO e l'esperienza utente. Se i tuoi elementi si muovono sulla pagina durante il caricamento o l'interazione, stai perdendo ranking e conversioni. Questa guida copre come misurarlo, le cause comuni e le strategie pratiche di correzione.
Il CLS si riduce quando il browser conosce lo spazio di ogni elemento prima che arrivino immagini, font e contenuti dinamici. Placeholder dimensionati, animazioni trasformate e componenti prevedibili rendono la pagina più stabile per persone e motori di ricerca.
Il CLS, o Cumulative Layout Shift, misura la stabilità visiva di una pagina web. Tecnicamente, è il movimento inaspettato degli elementi sulla pagina durante il caricamento e l'interazione dell'utente.
Immagina di leggere un articolo e all'improvviso un'immagine si carica sopra il testo che stavi leggendo, spingendolo verso il basso. O ancora: clicchi un bottone, ma nel mezzo millisecondo un banner si inserisce e il bottone si sposta altrove. Questo è CLS.
Google misura il CLS in una scala 0-1:
Per posizionarsi bene su Google, devi mantenere il CLS sotto 0.1 (core web vital threshold).
Il CLS è uno dei tre Core Web Vitals che Google utilizza per il ranking. Non è 'importante' — è critico. Se il tuo CLS è alto, perdi traffico organico.
Google ha confermato che il CLS influenza il ranking dal 2021 con l'aggiornamento 'Page Experience'. Se due pagine hanno stesso contenuto e backlink, ma una ha CLS sotto 0.1 e l'altra CLS 0.3, Google favorisce la prima. È un tiebreaker potente.
Un layout shift accidentale è frustrante. Se l'utente sta per cliccare un bottone 'Acquista' ma si sposta, potrebbe cliccare un link sbagliato. Questo genera:
Conclusione: Ridurre il CLS non è solo una questione tecnica SEO, è una questione di user experience e revenue.
Il CLS non appare casualmente. Ci sono cause specifiche e prevedibili. Riconoscerle è il primo passo per eliminarle.
Questa è la causa numero uno. Se un'immagine non ha width e height (o aspect-ratio), il browser non sa quanta spazio allocare. Quando l'immagine finisce di caricarsi, il browser ripensa il layout. Soluzione: Specifica sempre width e height, o aspect-ratio in CSS.
Quando carichi un custom font da CDN, il browser mostra prima il fallback, poi il font custom. Se il font custom è più largo o più alto, gli elementi si spostano. Soluzione: Usa font-display: swap per minimizzare l'impatto.
Annunci pubblicitari, notifiche, cookie banner che si inseriscono sopra il fold. Se non è riservato spazio per loro, spingono il contenuto verso il basso. Soluzione: Riserva spazio fisso per l'area ad nel layout.
Chat widget, modali, popup che appaiono dopo che l'utente ha iniziato a leggere. Soluzione: Carica il widget in overlay (position: fixed), non inline.
Serif, sans-serif, monospace hanno metriche diverse. Un fallback serif è più alto di quello sans-serif. Assicurati che il fallback abbia le stesse metriche approssimative.
Animazioni su proprietà come 'top', 'margin', 'width' causano reflow e shift. Soluzione: Usa sempre transform: translateY() o similar per le animazioni.
Misurare il CLS è facile. Hai vari tool:
Vai su pagespeed.web.dev, inserisci l'URL, e Google ti restituisce il CLS della pagina mobile e desktop. È il tool più affidabile perché usa lo stesso algoritmo che Google usa per il ranking.
Come leggerlo: Guardarella sezione 'Web Vitals'. Se il CLS è verde (sotto 0.1), sei a posto. Se è arancione (0.1-0.25), agisci. Se è rosso (oltre 0.25), urgente.
Se sei proprietario del sito in Search Console, vai a 'Esperienza utente' → 'Core Web Vitals'. Google mostra un report di tutte le pagine del tuo sito raggruppate per stato (Buona, Deve migliorare, Scarsa).
Vantaggio: Vedi i dati reali degli utenti (Real User Monitoring), non simulati.
Apri DevTools (F12) → Lighthouse → Audit. Lighthouse analizza la tua pagina e dà un punteggio Performance. Il CLS è incluso. Utile per debug locale.
Se vuoi tracciare il CLS in tempo reale nel tuo sito, carica la libreria web-vitals di Google e invia i dati a Google Analytics.
<script type="module">\n import {getCLS} from 'https://web-vitals.dev/base.js';\n getCLS(console.log);\n</script>Questo misura il CLS reale degli utenti e aiuta con A/B testing.
Ora che sai come misurare, ecco come ridurre concretamente il CLS.
HTML:
<img src="hero.jpg" width="1200" height="630" alt="..." />
CSS con aspect-ratio (moderno):
img {\n width: 100%;\n aspect-ratio: 16/9;\n object-fit: cover;\n}Questa è la fix più impattante perché il 60% dei CLS issues derivano da immagini.
CSS (Google Fonts):
@import url('https://fonts.googleapis.com/css2?family=Poppins:display=swap');Il 'swap' indica al browser: mostra il fallback, poi quando il font è pronto, sostituiscilo. Non ritardare il rendering iniziale.
CSS:
.ad-container {\n width: 300px;\n height: 250px;\n min-height: 250px; /* Riserva lo spazio prima che l'ad carichi */\n}Il min-height previene il shift quando l'ad si carica.
Sbagliato (causa CLS):
animation: myAnimation 1s;\n@keyframes myAnimation {\n from { top: 0; }\n to { top: 20px; } /* Causa reflow */\n}Giusto:
animation: myAnimation 1s;\n@keyframes myAnimation {\n from { transform: translateY(0); }\n to { transform: translateY(20px); } /* Nessun reflow */\n}Chat, popup, notifiche dovrebbero essere position: fixed per evitare di spingere il contenuto. Non inserirli inline nel flow del documento.
Immagini below-the-fold dovrebbero essere lazy-loaded, ma con un placeholder. YouTube usa questo: mostra un thumbnail fisso, poi carica il video su richiesta.
<img loading="lazy" src="image.jpg" width="1200" height="630" />
Un buon CLS non è una conseguenza del design. È il risultato di decisioni specifiche: immagini dimensionate, font ottimizzati, spazio riservato per i contenuti dinamici. Ogni decision conta.
Approfondisci i Core Web Vitals e l'ottimizzazione delle prestazioni:
CLS, LCP, INP: ti aiutiamo a misurare e correggere i tuoi Core Web Vitals per un ranking stabile e user experience superiore.