Cos’è il Cumulative Layout Shift (CLS)?
Cumulative Layout Shift, traducibile in italiano come “Stabilità visiva del layout” è uno dei parametri che caratterizzano i Core Web Vitals. Rileva tutti i movimenti non previsti in fase di caricamento di una pagina, come ad esempio un elemento visibile che cambia la sua posizione improvvisamente. Sarà capitato a tutti di cliccare su un pulsante o un link e questo si è improvvisamente spostato, costringendoci a cliccare nuovamente. Questo avviene perché la pagina è ancora in fase di caricamento e gli elementi si stanno assestando.
Questi spostamenti si possono verificare quando i contenuti si caricano con velocità diverse, come banner pubblicitari che si caricano improvvisamente, oppure video o immagini che appaiono d’improvviso a causa di dimensioni eccessive, tutte queste cose sono andranno ad incidere negativamente sul punteggio del CLS.
Inoltre, l’esperienza di navigazione e di conseguenza i problemi che ne potrebbero conseguire, sono diversi a seconda se stiamo navigando da desktop o da mobile, uno spostamento di layout può risultare colossale su uno schermo più piccolo. Il problema degli spostamenti imprevisti è aggravato anche dal fatto che il traffico su mobile è maggiore di quello da computer. Quindi analizzare e ridurre il CLS è fondamentale per offrire agli utenti una buona esperienza utente e garantire al nostro sito un miglior posizionamento.
Non tutti gli spostamenti sono considerati negativi. Uno spostamento di layout è considerato negativo solo quando non è intenzionale. I cambiamenti che si verificano in risposta a determinate interazioni da parte dell’utente vanno bene, purché lo spostamento avvenga entro 500 millisecondi in modo consequenziale e rapido e che la correlazione tra le azioni sia chiara.
Consiglio: Se una determinata richiesta, a seguito di un’interazione da parte dell’utente, impiega più tempo del dovuto ad essere completata è meglio prevedere uno spazio per l’inserimento di un indicatore di caricamento, per evitare uno spostamento di layout. In questo modo possiamo bloccare l’utente dal tentativo di fare clic su qualche altro elemento e comunicargli che la pagina non si è bloccata ma sta appunto caricando, restituendo quindi un feedback di risposta.
Quando si considera corretto un CLS?
Per essere considerato buono un CLS deve essere inferiore a 0,1.
A differenza delle altre metriche Core Web Vitals che, come unità di misura di riferimento hanno il tempo, il CLS misura lo spazio. Come spiegato nel paragrafo precedente, vengono identificate le variazioni di spostamento del layout durante il caricamento della pagina che hanno un impatto negativo sulla user experience.
Come si calcola il CLS?
Vengono moltiplicate due misure, ossia: la frazione di impatto e quella di distanza.
La frazione di impatto: Misura la porzione di schermo interessata dalle variazioni di spostamento del layout, dalla posizione iniziale che gli elementi instabili hanno quando vengono visualizzati per la prima volta in pagina, a quella che andranno ad “occupare” al termine del caricamento.
L’unione tra queste due aree rappresenta la frazione di impatto; quindi, l’area totale che gli elementi vanno ad occupare in questi due momenti. Per fare un esempio pratico, osserviamo l’immagine sotto:
Il blocco di testo nella prima schermata occupa il 50% del viewport, mentre successivamente si sposta verso il basso del 25%. La parte tratteggiata in rosso rappresenta l’unione tra queste due misure, che in questo caso sarà il 75%. Ne possiamo dedurre che la frazione di impatto sarà 0,75.
La frazione di distanza: misura la distanza (verticale o orizzontale) percorsa dagli elementi instabili all’interno della finestra, divisa per la dimensione maggiore della schermata (larghezza o altezza). Esempio pratico: sempre nell’immagine precedente possiamo notare che l’altezza è la dimensione maggiore del viewport e il blocco di testo si è spostato del 25% dall’altezza della schermata, pertanto la frazione di distanza è del 0,25.
Unendo questi due risultati possiamo avere il risultato complessivo dello spostamento del layout che sarà 0.75 * 0.25 = 0.1875.
Ok, ma com’è possibile analizzarlo?
Il CLS, esattamente come per gli altri Core Web Vitals, si misura con lo strumento PageSpeed Insights:
1. Aprire il sito di PSI e inserire, nel campo compilabile, l’URL del sito che vogliamo analizzare.
2. Fare clic su “Analizza”.
3. Restituiti i risultati è possibile visualizzali sia su dispositivi mobili che su desktop. Il punteggio può variare a seconda del tipo di dispositivo, in questo caso 0,04 è un buon punteggio.
4. È possibile cliccare sulla metrica interessata per avere ulteriori informazioni riguardo il punteggio.
Come ottimizzare il CLS
In che modo è possibile ottimizzare questa metrica? Riportiamo alcuni esempi delle ottimizzazioni più comuni che possono aiutarci a migliorare il nostro CLS:
Definire dimensioni per contenuti multimediali e annunci:
Uno dei modi migliori per impedire ad elementi come immagini e video di spostarsi improvvisamente è quella di impostare un’altezza e una larghezza, come nell’esempio sotto:
<img src= "example.jpg" width= "400" height= "300" alt= "image" >Riservare uno spazio per banner pubblicitari:
Annunci pubblicitari, come banner che compaiono improvvisamente, possono spingere il contenuto verso il basso, per questa ragione è necessario riservare un “segnaposto” per impedire spostamenti non di layout troppo “violenti”. Utilizzando le proprietà CSS min-height e min-width si può assegnare una dimensione nel seguente modo:
<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>È consigliabile sempre inserire anche le @mediaquery per specificare i valori di dimensioni minime a seconda della dimensione dello schermo:
@media screen and (max-width: 970px) {
#ad-slot {
min-height: 250px;
}
}In questo modo gli annunci, anche nel caso non dovessero caricarsi, non genereranno spostamenti di layout.
Utilizzare un Web Font per i testi:
Scegliere di utilizzare un font personalizzato per le tue pagine web può aumentare il rischio di un CLS alto causando due fenomeni ben distinti: Il FOUT e il FOIT.
- FOUT (Flash of Unstyled Text) si verifica quando il font scelto non è pronto per essere visualizzato e il browser utilizza momentaneamente un carattere di fallback (un font alternativo) fino a quando il font predefinito non sia stato completamente caricato, a quel punto andrà a sostituirsi al carattere momentaneo.
- FOIT (Flash of Invisible Text) quando il font scelto non è ancora stato caricato e al suo posto vediamo solo spazi vuoti fino al momento in cui i blocchi di testo appaiono bruscamente.
Una soluzione potrebbe essere quella di utilizzare un carattere di sistema o Web Font, che sono progettati appositamente per adattarsi alle diverse dimensioni degli schermi e sono personalizzabili con il CSS.
In alternativa se si vuole utilizzare necessariamente utilizzare un font personalizzato si può precaricare con l’aggiunta dell’attributo “preload” nel seguente modo:
<head>
<link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>
</head>Un’altra soluzione è l’inserimento dell’attributo font-display: optional. Questo si comporta esattamente come il FOUT cioè mostra il testo con il font di fallback ma non lo sostituisce con il carattere personalizzato scelto per il layout se questo non carica entro 100ms.
Contenuto inserito dinamicamente:
I contenuti dinamici vengono spesso utilizzati nei siti web per dare, appunto, dinamicità alla pagina, ma contenuti di questo tipo che appaiono nella parte alta della pagina, possono spostare il resto dei contenuti verso il basso aumentando il CLS, sarebbe quindi meglio in generale evitare di inserire questa tipologia di elementi nella parte alta, altre possibili soluzioni possono essere:
- Caricare i contenuti fuori schermo: Dal momento che il CLS non viene calcolato su quegli elementi che non appaiono nel viewport, una soluzione potrebbe essere quella di caricare il contenuto dinamico fuori da questa zona e invogliare gli utenti a scorrere verso il basso, ad esempio, con un’indicazione tipo “scorri verso il basso”.
- Utilizzare un contenitore con dimensioni fisse: Come abbiamo spiegato prima per i contenuti multimediali, avere delle dimensioni fisse impedisce uno spostamento significativo del layout, ad esempio l’utilizzo di un carosello è una valida alternativa per sostituire i contenuti con altri senza che si verifichino spostamenti imprevisti.
Conclusioni
Il CLS è una metrica che incide molto sulla valutazione che Google fa del nostro sito. Conoscere questa metrica anche non necessariamente a fondo ma comprenderne l’importante è fondamentale, per troppo tempo questo problema è stato ignorato in fase di sviluppo portando a pessime esperienze di navigazione. Per avere un buon punteggio, è fondamentale che il CLS che sia basso. Questo garantisce una buona user experience e un efficace posizionamento in SERP.
