Spostamento cumulativo del layout (CLS)

Che cos'è il Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) è una metrica Core Web Vitals sviluppata da Google per misurare la stabilità visiva di una pagina web. Quantifica il totale di tutti gli spostamenti di layout inattesi che si verificano durante l'intero ciclo di vita della pagina. Gli spostamenti di layout si verificano quando un elemento visibile cambia posizione da un frame renderizzato all'altro.

Come si misura la CLS

I punteggi CLS vanno da 0, che non rappresenta alcuno spostamento, a valori superiori a 0 che indicano vari gradi di instabilità. La formula considera la frazione di impatto e la frazione di distanza di ogni spostamento, calcolando quanto si muovono gli elementi e quanta parte della finestra di visualizzazione coprono.

Interpretazione del punteggio CLS

• Buono: 0 - 0,1
• Necessità di miglioramento: 0.1 - 0.25
• Scarso: superiore a 0,25

Perché il CLS è importante?

Il CLS è fondamentale per l'esperienza dell'utente, poiché gli spostamenti imprevisti del layout possono causare frustrazione nell'utente. Ad esempio, se un utente sta per fare clic su un pulsante e il layout si sposta, facendogli fare involontariamente clic su qualcos'altro, l'esperienza dell'utente può risultare scadente e la potenziale perdita di conversioni.

Cause comuni di CLS insufficiente

1. Immagini senza dimensioni:

   • Includere immagini nell'HTML senza specificarne la larghezza e l'altezza può causare spostamenti di layout, poiché il browser non sa quanto spazio allocare inizialmente.

2. Annunci, embed e iframe senza dimensioni:

   • Questi elementi possono essere caricati dinamicamente e causare spostamenti del layout se le loro dimensioni non sono specificate in anticipo.

3. Contenuto iniettato dinamicamente:

   • L'aggiunta di contenuto al di sopra di quello esistente nel DOM può spingere gli elementi verso il basso, causando spostamenti.

4. Caratteri Web che causano FOIT/FOUT:

   • Flash of Invisible Text (FOIT) e Flash of Unstyled Text (FOUT) possono causare spostamenti di layout quando il browser carica i font web.

Migliori pratiche per ridurre al minimo le CLS

1. Includere gli attributi di dimensione su immagini e video:

   • Definite sempre la larghezza e l'altezza di immagini e video nell'HTML per riservare spazio nel layout prima del loro caricamento.

2. Riservare spazio per annunci e inserti:

   • Utilizzate i CSS per impostare le dimensioni degli spazi pubblicitari, degli iframe e degli embed per evitare spostamenti di layout durante il caricamento.

3. Evitare di iniettare dinamicamente contenuti al di sopra di quelli esistenti:

   • Aggiungete nuovi contenuti sotto la piega o all'interno di contenitori che hanno già uno spazio riservato.

4. Utilizzare strategie di caricamento dei caratteri:

   • Utilizzare la proprietà CSS font-display per controllare la visualizzazione dei font web e ridurre al minimo gli spostamenti dovuti a FOIT/FOUT.

5. Utilizzare CSS Transform per le animazioni:

   • Utilizzate la proprietà transform invece di top, bottom, left o right per animare gli elementi senza causare spostamenti del layout.

Conclusione

Lo spostamento cumulativo del layout (CLS) è un parametro fondamentale per garantire un'esperienza utente stabile e visivamente accattivante. Comprendendo i fattori che contribuiscono agli spostamenti di layout e implementando le migliori pratiche per ridurli al minimo, è possibile migliorare il punteggio CLS della pagina web e aumentare la soddisfazione complessiva dell'utente.

Per ulteriori informazioni sul miglioramento di CLS e di altri Core Web Vitals, si consiglia di consultare la documentazione di Google sui Web Vitals.