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 sta spostando inaspettatamente e quanto lontano 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 risulta una pagina web durante il caricamento. Ecco perché è importante:

• UX, engagement e percezione del brand:  Gli spostamenti inattesi 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 completamente il sito web.
  La user experience di un sito web si riflette sul brand che lo sostiene. Spostamenti frequenti del layout possono dare l'impressione di un sito web mal progettato o mantenuto, interrompono l'engagement degli utenti portando a una diminuzione dell'interazione e potenzialmente a 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 con il sito web in modo efficace.
  
• 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 esempio semplice di utilizzo di questa API

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('Layout shift:', entry);
  }
}).observe({type: 'layout-shift', buffered: true});

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 il contenuto si è spostato. 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

Spostamenti del layout attesi VS inattesi

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

Ecco perché solo gli spostamenti del layout 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) lo spostamento del layout verrà escluso dal CLS. Per essere precisi:
Gli spostamenti del layout 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 cattivo punteggio CLS. Ad esempio, una pagina che implementa lo scrolling infinito avrebbe ricevuto 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 nelle successive sessioni di 5 secondi 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 rapido promemoria: CLS e i Core Web Vitals!

Il Cumulative Layout Shift (CLS) è un'importante metrica 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. Usare Lighthouse per trovare i Cumulative Layout Shift

Il metodo più semplice per trovare gli spostamenti del layout è utilizzare Lighthouse nel tuo browser Chrome. Basta eseguire un audit Lighthouse facendo clic 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 fino a Diagnostics ed espandi le informazioni sul Cumulative Layout Shift per vedere quali nodi stanno causando lo spostamento del layout.

Ad essere sinceri, non uso mai questo metodo personalmente. La mancanza di dettagli sulla distanza esatta dello spostamento del layout rende questi risultati più difficili da interpretare

2. Usare 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 gli spostamenti del layout sulla pagina vengono visualizzati. Questa è la prima soluzione a cui ricorro quando cerco di determinare uno spostamento del layout su una pagina. È semplice e fornisce un'ottima panoramica visiva del Cumulative Layout Shift.

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

Di gran lunga il modo migliore per fare il debug di uno spostamento del layout è 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 gli Strumenti per sviluppatori)
- Premi Ctrl-Shift-E (Avvia la profilazione e ricarica la pagina)

Ora ispeziona la timeline fotogramma per fotogramma passando il mouse sulla timeline in alto e cerca gli spostamenti del layout (gli spostamenti del layout sono anche colorati in rosso nella sezione Experience della scheda Performance). 

4. Usare 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 gli spostamenti del layout è fondamentalmente la stessa. Ad 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

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

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

Nota che le dimensioni possono anche essere definite come una proprietà di stile o anche 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 font che non sono installati sul tuo computer locale o telefono ma scaricati da internet. Mentre il web font non è ancora stato 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.

Ci sono molti metodi per 'correggere' lo spostamento del layout causato dai web font. Si basano su 2 tecniche:

1. Far corrispondere il font di fallback al web font più fedelmente. 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 è precaricare i web font critici, 

Problemi di CLS causati da interazioni utente lente

Nell'esempio qui sotto il pulsante carica altro chiaramente attiva uno spostamento del layout. Tuttavia lo spostamento del layout non verrà aggiunto alle metriche CLS. Questo perché lo spostamento del layout è intenzionale

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

Assicurati che le interazioni utente si completino entro 500ms

Problemi di CLS causati da AJAX

AJAX permette 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 massiccio spostamento del layout. Ecco perché è saggio riservare lo spazio utilizzato per il nuovo contenuto. Ovviamente non conosci l'altezza del nuovo contenuto in anticipo, ma quello che puoi fare è fare una stima ragionata.

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) è comunque 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 pubblicitari

Gli annunci pubblicitari spesso si caricano (molto) più tardi sulla pagina. Questo rende i Cumulative Layout Shift causati dagli annunci particolarmente fastidiosi. Quando più annunci si stanno caricando 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>