Cos'è il Cumulative Layout Shift (CLS) e come risolverlo

Cos'è il Cumulative Layout Shift (CLS)?

Il Cumulative Layout Shift (CLS) rappresenta la parte di 'stabilità visiva' dei Core Web Vitals. Il Cumulative Layout Shift (CLS) misura i movimenti della pagina mentre il contenuto viene renderizzato o nuovo contenuto viene mostrato sulla pagina. Calcola un punteggio basato su quanto della pagina si muove inaspettatamente e quanto si sposta. Questi spostamenti del contenuto sono molto fastidiosi, facendoti perdere il punto in un articolo che hai iniziato a leggere o, peggio ancora, facendoti cliccare sul pulsante sbagliato!

Importanza del CLS nelle prestazioni web e nella user experience

Il Cumulative Layout Shift (CLS) è legato sia alle prestazioni web che alla user experience perché influisce direttamente su quanto stabile e prevedibile una pagina web appare durante il caricamento. Ecco perché è importante:

• UX, engagement e percezione del brand:  Gli spostamenti imprevisti del layout interrompono il flusso dell'utente, rendendo più difficile trovare informazioni, cliccare sui pulsanti e interagire con la pagina come previsto. Questa frustrazione può portare a esperienze negative in cui gli utenti abbandonano il sito web completamente.
  La user experience di un sito web riflette il brand che lo rappresenta. Spostamenti frequenti del layout possono dare l'impressione di un sito web mal progettato o mantenuto, interrompono l'engagement dell'utente portando a una diminuzione dell'interazione e potenzialmente tassi di rimbalzo più elevati.
  
• Accessibilità: Gli spostamenti del layout possono essere particolarmente problematici per gli utenti con disabilità che si affidano a tecnologie assistive o screen reader. Un layout stabile garantisce che tutti possano navigare e interagire efficacemente con il sito web.
  
• SEO e posizionamento nei motori di ricerca: I Core Web Vitals sono un fattore di ranking piccolo ma significativo in Google. Google, insieme ad altri motori di ricerca, dà priorità ai siti web che offrono una buona user experience. Il CLS è una delle metriche Core Web Vitals che Google considera nel posizionamento dei siti web. Ottimizzare il CLS può dare al tuo sito web un vantaggio competitivo nei risultati di ricerca.
  

Come viene misurato il CLS?

Il CLS di una pagina può essere misurato con la Layout Instability API. Il seguente è un semplice utilizzo di questa API

Calcolo del CLS

Il CLS viene facilmente calcolato utilizzando una formula semplice ma elegante:

CLS = sum(impact-fraction * distance-fraction)

La frazione di impatto misura quanto del contenuto visibile della pagina si è spostato. La frazione di distanza misura quanto lontano si è spostato il contenuto. Se, ad esempio, il 50% della pagina (quanto) si è spostato del 25% (quanto lontano) del viewport della pagina. Il punteggio CLS = .50 * .25 = 0.125

Layout shift attesi VS inattesi

Non tutti i layout shift sono negativi, solo quelli che non ti aspetti. Quando clicchi su un link 'carica altri elementi' ad esempio ti aspetteresti che più elementi appaiano sulla pagina e che il contenuto della pagina si sposti.

Ecco perché solo i layout shift inattesi contribuiranno al CLS. Ad esempio, se un utente clicca un pulsante e in risposta nuovo contenuto viene aggiunto alla pagina (ad esempio un menu a tendina) il layout shift verrà escluso dal CLS. Per essere precisi:
I layout shift che si verificano entro 500 millisecondi dall'input dell'utente verranno esclusi dai calcoli

Sessioni di layout shift

Quando il CLS è stato introdotto per la prima volta alcuni siti venivano ingiustamente penalizzati con un punteggio CLS scarso. Ad esempio una pagina che implementa lo scrolling infinito avrebbe avuto l'impatto del contenuto appena aggiunto sommato al punteggio CLS totale per ogni nuovo scroll. Ecco perché il CLS viene ora calcolato in sessioni. Ogni sessione ha una durata di 5 secondi. La sessione con il punteggio CLS più alto diventerà il punteggio CLS finale.
Se, ad esempio, durante i primi 5 secondi il punteggio CLS è 0.095, poi nella sessione di 5 secondi successiva il CLS è 0.15 e per l'ultima sessione il punteggio CLS è 0. Il punteggio CLS finale sarà il più alto dei tre: 0.15.

Un breve promemoria: CLS e i Core Web Vitals!

Il Cumulative Layout Shift (CLS) è una metrica importante e incentrata sull'utente per misurare la stabilità visiva. Il Cumulative Layout Shift (CLS) fa parte dei Core Web Vitals insieme al First Contentful Paint, al Largest Contentful Paint e al First Input Delay.

Come misurare i problemi di CLS

1. Usa Lighthouse per trovare i Cumulative Layout Shift

Il metodo più semplice per trovare i layout shift è utilizzare Lighthouse nel tuo browser Chrome. Basta eseguire un audit Lighthouse cliccando con il tasto destro in qualsiasi punto della pagina. Poi seleziona ispeziona elemento, seleziona la scheda Lighthouse nella console appena aperta ed esegui l'audit

I risultati dell'audit mostreranno il punteggio Cumulative Layout Shift (CLS). Scorri verso il basso fino a Diagnostics ed espandi le informazioni sul Cumulative Layout Shift per vedere quali nodi stanno causando il layout shift.

Ad essere onesti non uso mai realmente questo metodo. La mancanza di dettagli sulla distanza esatta del layout shift rende questi risultati più difficili da interpretare

2. Usa il CLS Visualizer per trovare i Cumulative Layout Shift

Il CLS Visualizer è un'estensione Chrome scritta da me. Con un singolo clic su un pulsante tutti i layout shift sulla pagina vengono visualizzati. Questa è la prima soluzione a cui ricorro quando cerco di determinare un layout shift su una pagina. È semplice e fornirà un'ottima panoramica visiva del Cumulative Layout Shift.

3. Usa la scheda Performance di Chrome per trovare il CLS

Di gran lunga il modo migliore per debuggare un layout shift è attraverso la scheda Performance di Chrome. Per aprire la scheda Performance naviga su qualsiasi pagina in Chrome e usa questa combinazione di scorciatoie:
- Premi Ctrl-Shift-I (Apri Dev Tools)
- Premi Ctrl-Shift-E (Avvia il profiling e ricarica la pagina)

Ora ispeziona la timeline fotogramma per fotogramma posizionando il mouse sulla timeline in alto e cerca i layout shift (i layout shift sono anche colorati di rosso nella sezione Experience della scheda Performance). 

4. Usa strumenti RUM come Core/Dash

RUM sta per Real User Monitoring e i dati RUM possono fornire preziose informazioni in tempo reale sui Core Web Vitals. Strumenti RUM come Core/Dash possono suddividere i Cumulative Layout Shift in segmenti come browser, elemento, tipo di navigazione, URL specifico o tipo di pagina. Questo aiuterà a identificare e correggere le pagine con prestazioni scarse e gli elementi problematici

Cause comuni del Cumulative Layout Shift e come risolverle

L'origine di tutti i layout shift è sostanzialmente la stessa. A un certo punto un elemento posizionato sopra un altro elemento ha occupato più o meno spazio di prima. Questo è tipicamente dovuto a una o più di queste cause:

• Immagini, iFrame o video
• Annunci pubblicitari
• Contenuto iniettato
• Animazioni
• Interazioni lente
• Web font

CLS causato da immagini, video e iFrame

I layout shift causati da immagini, video o iFrame sono sempre causati da dimensioni mancanti. Più comunemente questo accade perché l'altezza e la larghezza dell'elemento non sono definite nell'HTML. Un pattern comune e buona pratica è impostare la larghezza intrinseca dell'immagine nell'HTML e utilizzare lo stile per ridimensionare automaticamente l'immagine nel suo contenitore padre.

<img src="img.jpg" >
<style>
   img{
      max-width:100%;
      height:auto
   }
</style>

Nota che le dimensioni possono essere definite anche come proprietà di stile o impostando la proprietà di stile aspect-ratio.

CLS causato dai web font

Un Cumulative Layout Shift può essere causato dai web font. I web font sono caratteri che non sono installati sul tuo computer o telefono locale ma scaricati da internet. Mentre il web font non è ancora scaricato la pagina viene solitamente renderizzata con un font di fallback. La dimensione di questo font di fallback può differire dal font finale. In questo esempio il font di fallback è leggermente più piccolo del web font finale.

Esistono molti metodi per 'risolvere' il layout shift causato dai web font. Si basano su 2 tecniche:

1. Far corrispondere il font di fallback più fedelmente al web font. Il modo più efficace è sovrascrivendo i descrittori @font-face

Il secondo modo è velocizzare i web font. Questo li renderà disponibili al browser prima che il browser inizi il rendering. Un modo comune per farlo è fare il preload dei tuoi web font critici, 

Problemi di CLS causati da interazioni lente dell'utente

Nell'esempio sottostante il pulsante carica altro chiaramente provoca un layout shift. Tuttavia il layout shift non verrà aggiunto alle metriche CLS. Questo perché questo layout shift è intenzionale

Un browser lo saprà perché gli elementi ora visibili hanno un attributo chiamato 'hadRecentInput'. Quando questo è impostato su true E il layout shift avviene entro 500 ms dall'evento di input (il clic del pulsante) il layout shift non verrà segnalato dal browser.

Assicurati che le interazioni dell'utente si completino entro 500ms

Problemi di CLS causati da AJAX

AJAX consente alle pagine web di essere aggiornate in modo asincrono scambiando dati con un server web dietro le quinte. Ovviamente iniettare nuovo contenuto in qualsiasi pagina web potrebbe portare a un layout shift massiccio. Ecco perché è saggio riservare lo spazio che viene utilizzato per il nuovo contenuto. Ovviamente non conosci in anticipo l'altezza del nuovo contenuto ma quello che puoi fare è fare una stima ragionevole.

Ad esempio, se il contenuto AJAX medio occupa il 50% dello schermo è saggio riservare quel 50%. Quando il nuovo contenuto finisce per occupare il 40 o il 60% dello schermo il CLS (50% - 40% = 10% frazione di distanza) è ancora molto più piccolo del 50% di frazione di distanza.

Ecco un esempio su come farlo:

<style>
   #ajax{height:400px}
   #ajax.loaded{height:auto;}
</style>
<script>
   fetch('/ajax-content)
   .then(response => response.json())
   .then(result => {
      let el = document.getElementById('ajax');
      el.innerHTML(result.html);
      el.classList.add('loaded');
   })
<script>

Risolvere i problemi di CLS causati dagli annunci

Gli annunci spesso si caricano (molto) più tardi sulla pagina. Questo rende i Cumulative Layout Shift causati dagli annunci particolarmente fastidiosi. Quando più annunci si caricano nel viewport visibile la 'pagina semplicemente non sta ferma'. Per risolvere questo problema riserva anche lo spazio per gli annunci, specialmente quelli nel viewport visibile.

<style>
// rectangle mobile ad
.ad{min-height:250px;background:#dedede}
// banner desktop ad
@media only screen and (min-width: 600px) {
.ad{min-height:90px}
}
</style>