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:

1. Impact Fraction – la percentuale dell’area visibile della pagina interessata dallo spostamento.
2. 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:

• Google PageSpeed Insights
• Lighthouse (DevTools di Chrome)
• Web Vitals Extension

Ti serve aiuto con un caso specifico? 😊
Contattaci

Per approfondire l'argomento, potrebbero interessarti anche i nostri articoli su Largest Contentful Paint (LCP) e Come migliorare la velocità del tuo sito web.