I Core Web Vitals sono un insieme di metriche definite da Google per misurare la qualità dell’esperienza utente durante la navigazione di una pagina web. Introdotte ufficialmente come segnali di ranking nel 2021, rappresentano il tentativo di andare oltre i tradizionali indicatori di velocità e di valutare in modo più completo come un utente percepisce l’interazione con un sito. Le metriche sono state pensate per essere misurabili sia sul campo, tramite dati reali raccolti dagli utenti, sia in laboratorio, attraverso strumenti di diagnostica come Lighthouse.
Il termine “CLS” è l’acronimo di Cumulative Layout Shift, ovvero spostamento cumulativo del layout. Si tratta di una delle tre metriche che compongono i Core Web Vitals, insieme al Largest Contentful Paint e al First Input Delay, quest’ultimo sostituito in seguito dall’Interaction to Next Paint. Il CLS misura la stabilità visiva della pagina, cioè quanto gli elementi dell’interfaccia si spostano in modo inaspettato durante il caricamento o l’interazione. Un valore basso di CLS indica una pagina stabile e prevedibile, mentre un valore alto segnala un’esperienza frustrante per l’utente.
Che cosa misura il Cumulative Layout Shift
Il CLS quantifica la somma degli spostamenti imprevisti degli elementi visibili all’interno del viewport. Non tutti i movimenti vengono conteggiati: sono esclusi quelli che avvengono entro cinquecento millisecondi da un’interazione dell’utente, perché in quel caso lo spostamento è considerato atteso. Il punteggio si basa su due componenti: l’impatto, cioè la porzione di schermo interessata dallo spostamento, e la distanza, ovvero quanto l’elemento si è mosso dalla posizione originale.
Il calcolo combina questi due fattori per ogni spostamento e li somma, producendo un valore adimensionale. Più il valore è basso, migliore è la stabilità della pagina. Un CLS pari a zero indica assenza di spostamenti imprevisti, mentre valori superiori a 0,25 sono considerati scadenti.
Le soglie di valutazione del CLS
Valori buoni, da migliorare e scadenti
Google classifica il CLS in tre fasce. Un valore inferiore o uguale a 0,1 è considerato buono. Un valore compreso tra 0,1 e 0,25 richiede miglioramenti. Un valore superiore a 0,25 è giudicato scadente. Queste soglie si applicano sia ai dati di campo, raccolti tramite il rapporto sull’esperienza utente di Chrome, sia ai dati di laboratorio.
È importante ricordare che il CLS viene calcolato sul 75° percentile delle visite, non sulla media. Ciò significa che il punteggio riflette l’esperienza della maggior parte degli utenti, non quella peggiore né quella migliore.
Cause più comuni di uno spostamento elevato
Gli spostamenti del layout derivano quasi sempre da risorse che vengono caricate in modo asincrono senza riservare loro lo spazio necessario. Immagini prive di dimensioni esplicite, annunci pubblicitari inseriti dinamicamente, font web che sostituiscono quelli di sistema e contenuti incorporati da terze parti sono le cause più frequenti. Anche i banner di consenso cookie che compaiono in alto o in basso possono generare spostamenti se non sono gestiti correttamente.
Un altro fattore è rappresentato dagli elementi che cambiano dimensione dopo il caricamento iniziale, come i pulsanti che si espandono o i testi che si riorganizzano. Infine, l’inserimento tardivo di contenuti sopra quelli già visibili spinge verso il basso tutto ciò che l’utente stava già leggendo.
Differenze tra CLS e le altre metriche
Per comprendere appieno il ruolo del CLS è utile confrontarlo con le altre metriche dei Core Web Vitals. La tabella seguente riassume le principali differenze.
| Metrica | Cosa misura | Unità di misura | Soglia buona |
|---|---|---|---|
| Largest Contentful Paint | Tempo di caricamento dell’elemento più grande visibile | Secondi | Entro 2,5 secondi |
| First Input Delay | Ritardo nella risposta alla prima interazione | Millisecondi | Entro 100 millisecondi |
| Interaction to Next Paint | Reattività complessiva alle interazioni | Millisecondi | Entro 200 millisecondi |
| Cumulative Layout Shift | Stabilità visiva e spostamenti imprevisti | Valore adimensionale | Entro 0,1 |
Come migliorare il CLS di una pagina
Buone pratiche tecniche
Ridurre il CLS richiede interventi mirati sul modo in cui le risorse vengono caricate e posizionate. Le strategie più efficaci consistono nel riservare spazio agli elementi che verranno inseriti in seguito e nel comunicare al browser le dimensioni delle risorse multimediali prima che siano effettivamente caricate.
- Specificare sempre gli attributi di larghezza e altezza per immagini e video, così che il browser possa riservare lo spazio corretto.
- Utilizzare le proprietà CSS di proporzione per mantenere le dimensioni degli elementi multimediali anche quando sono flessibili.
- Evitare di inserire contenuti sopra quelli già visibili, a meno che non sia strettamente necessario.
- Riservare spazio per gli annunci pubblicitari e per i contenuti incorporati di terze parti.
- Preferire le transizioni di trasformazione rispetto a quelle che modificano proprietà come margini o posizionamento.
- Caricare i font web con la strategia di scambio, così che il testo sia visibile immediatamente con un carattere di sistema.
- Gestire i banner di consenso in modo che non spingano il contenuto verso il basso dopo il caricamento.
- Monitorare periodicamente i dati di campo per individuare regressioni nel tempo.
Domande frequenti sul CLS e i Core Web Vitals
Che cosa significa esattamente CLS?
CLS è l’acronimo di Cumulative Layout Shift, ovvero spostamento cumulativo del layout. Indica la somma degli spostamenti imprevisti degli elementi visibili durante il caricamento della pagina.
Qual è un buon punteggio di CLS?
Un punteggio pari o inferiore a 0,1 è considerato buono. Tra 0,1 e 0,25 la pagina necessita di miglioramenti, mentre oltre 0,25 il valore è scadente.
Il CLS influisce sul posizionamento nei motori di ricerca?
Sì, i Core Web Vitals sono segnali di ranking dal 2021, ma il loro peso è relativo rispetto ad altri fattori come la pertinenza dei contenuti e la qualità dei link.
Come si misura il CLS?
Si misura sia sul campo, tramite dati reali raccolti dagli utenti, sia in laboratorio con strumenti come Lighthouse. Il valore riportato è generalmente il 75° percentile delle visite.
Quali sono le cause più comuni di un CLS elevato?
Le cause principali sono immagini senza dimensioni definite, annunci inseriti dinamicamente, font web che sostituiscono quelli di sistema e contenuti di terze parti caricati senza spazio riservato.
Il CLS è l’unica metrica dei Core Web Vitals?
No, insieme al CLS i Core Web Vitals comprendono il Largest Contentful Paint e l’Interaction to Next Paint, che hanno sostituito il First Input Delay come metrica di reattività.
Voci correlate:
Cumulative Layout Shift Core Web Vitals Cls google Largest Contentful Paint Performance ma