Guide

CLS, abbreviazione di Cumulative Layout Shift, è uno dei Core Web Vitals di Google, le metriche che Google usa per valutare quanto una pagina risulta piacevole da usare. Il CLS misura la stabilità visiva: mentre una pagina carica, gli elementi restano al loro posto o saltano qua e là? Un CLS basso significa che il layout è stabile e prevedibile; un CLS alto significa che il contenuto si sposta sotto i tuoi occhi proprio mentre provi a leggere una riga o a toccare un pulsante, una delle cose più frustranti che una pagina web possa fare.

Come si misura e si calcola il CLS

Il nome descrive ciò che rileva. È cumulativo perché somma gli spostamenti del layout che si verificano durante la vita della pagina, e uno spostamento del layout è ogni volta che un elemento visibile cambia posizione da un frame renderizzato al successivo senza che tu lo abbia richiesto. Il movimento che hai innescato non viene conteggiato: cliccare un link, aprire un accordion o un menu è un movimento previsto ed escluso. Un'immagine che carica in ritardo e spinge in basso il paragrafo che stavi leggendo non è prevista, ed è esattamente ciò che il CLS è progettato per rilevare.

Il CLS è uno dei tre Core Web Vitals, insieme al Largest Contentful Paint, che misura il caricamento, e all'Interaction to Next Paint, che misura la reattività. Il CLS è quello che copre la stabilità visiva. Una pagina può caricare in fretta e rispondere all'istante e ottenere comunque un CLS scadente se le cose si muovono dopo essere apparse per la prima volta, quindi le tre metriche misurano davvero qualità diverse e una pagina deve superarle tutte.

A differenza di una metrica basata sul tempo come LCP o INP, il CLS è un punteggio senza unità di misura anziché un numero di millisecondi. Ogni singolo spostamento viene valutato moltiplicando due frazioni: la frazione di impatto, quanta parte del viewport gli elementi in movimento hanno interessato, e la frazione di distanza, quanto si sono spostati rispetto al viewport. Questi punteggi di spostamento vengono combinati nel valore che Google riporta, così contano sia quanto si è mosso sia la distanza percorsa.

Le soglie di Google

Le soglie di Google, misurate al 75° percentile dei caricamenti reali, sono facili da ricordare. Un CLS di 0,1 o meno è Good. Tra 0,1 e 0,25 è Needs improvement. Oltre 0,25 è Poor. Poiché il punteggio è cumulativo, diversi piccoli spostamenti possono sommarsi fino a una valutazione insufficiente anche quando nessun singolo salto sembra drammatico, ed è per questo che la stabilità deve essere un'abitudine su tutta la pagina e non una correzione per un solo elemento visibile.

• Che cos'è: il Cumulative Layout Shift, uno dei tre Core Web Vitals, insieme al Largest Contentful Paint e all'Interaction to Next Paint.
• Cosa misura: la stabilità visiva, quanto il contenuto visibile si muove in modo inatteso mentre una pagina carica.
• Come viene calcolato: un valore senza unità ottenuto sommando i punteggi di spostamento, ciascuno la frazione di impatto moltiplicata per la frazione di distanza.
• Soglie al 75° percentile: Good è 0,1 o meno, Needs improvement è da 0,1 a 0,25, Poor è oltre 0,25.
• Come migliorarlo: impostare dimensioni o aspect-ratio sui media, riservare spazio per contenuti tardivi come pubblicità e banner, regolare i web font e animare con transform.

Che cosa provoca gli spostamenti del layout

La maggior parte degli spostamenti del layout deriva da una manciata di cause note. Immagini, video e iframe inseriti senza attributi width e height non hanno spazio riservato, quindi il browser deve ricalcolare il layout quando arrivano e ne conosce la dimensione reale. I web font possono causare uno spostamento quando un font di fallback viene sostituito dal web font e il testo si ricompone in una dimensione diversa. E il contenuto iniettato sopra ciò che stai già leggendo, come pubblicità, embed o un banner di cookie o consenso tardivo, spinge in basso tutto ciò che sta sotto.

Come correggere e prevenire gli spostamenti

Le correzioni derivano direttamente dalle cause. Imposta sempre gli attributi width e height su immagini e video, oppure riserva lo spazio con la proprietà CSS aspect-ratio, così il browser conosce la dimensione prima che il media carichi. Riserva spazio per tutto ciò che arriva in ritardo, inclusi gli spazi pubblicitari e i banner, invece di lasciarlo apparire sopra il contenuto esistente. Per i web font usa la proprietà font-display e fai combaciare il più possibile le metriche del font di fallback, così la sostituzione sposta il testo il meno possibile.

Anche l'animazione conta. Se devi spostare un elemento, animalo con la proprietà CSS transform anziché cambiando proprietà come top, left, width o height. Le transform sono gestite dal compositor del browser e non innescano il layout, quindi spostano un elemento visivamente senza contare come spostamento del layout, il che ti permette di mantenere il movimento nel design senza danneggiare il punteggio.

Come misurare il CLS

Il CLS si valuta meglio sui dati sul campo, utenti reali su dispositivi e connessioni reali, che puoi vedere nel Chrome User Experience Report e nel report Core Web Vitals di Google Search Console. Per il debug in laboratorio, il pannello Performance dei Chrome DevTools evidenzia gli spostamenti del layout e gli elementi responsabili, Lighthouse riporta un valore di CLS, e la libreria JavaScript web-vitals lo misura direttamente nel browser. Su questo sito, il nostro verificatore di web vitals ti permette di inserire i valori misurati e vedere all'istante se superano le soglie di Google.

In sintesi

In sintesi: il CLS premia le pagine il cui layout resta fermo. La maggior parte del lavoro è difensiva, riservare spazio per immagini, media, font e tutto ciò che viene iniettato tardi, così che nulla debba spingere via il contenuto esistente. Fallo bene e una pagina risulta calma e stabile invece che instabile, che è esattamente ciò che la metrica intende incoraggiare.