Cos’è il CLS?

📌 Cos’è il CLS?

Il CLS misura quanto spesso e di quanto si spostano gli elementi visibili su una pagina web durante il caricamento, causando movimenti improvvisi e indesiderati.

Un CLS alto indica una pagina instabile, dove i contenuti si spostano mentre l’utente sta leggendo o interagendo, creando un’esperienza frustrante.

📊 Come si calcola il CLS?

Il valore CLS è dato dalla combinazione di due fattori:

Impact Fraction – la percentuale dell’area visibile della pagina interessata dallo spostamento.
Distance Fraction – la distanza dello spostamento rispetto all’area visibile.

💡 Formula semplificata:CLS=ImpactFraction×DistanceFractionCLS = Impact Fraction \times Distance FractionCLS=ImpactFraction×DistanceFraction

Più grande è il numero, maggiore è l’instabilità percepita dall’utente.

✅ Quali sono i valori ideali di CLS?

Buono: CLS ≤ 0.1 ✅
Da migliorare: CLS tra 0.1 e 0.25 ⚠️
Scarso: CLS ≥ 0.25 ❌

🔍 Esempi di problemi CLS

📌 Un’immagine o un banner caricato senza dimensioni predefinite, che fa slittare i contenuti.
📌 Un font o un’icona che cambia stile dopo il caricamento, spostando il testo.
📌 Un annuncio pubblicitario caricato in ritardo, che spinge il contenuto verso il basso.

🚀 Come migliorare il CLS?

Dichiarare le dimensioni di immagini, video e banner pubblicitari.
Evitare contenuti dinamici che si caricano all’improvviso senza spazio riservato.
Utilizzare font system o font-display: swap per evitare il ricalcolo del layout.

Se vuoi analizzare il CLS del tuo sito, puoi usare strumenti come: