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 man mano che i contenuti vengono renderizzati o che nuovi contenuti vengono mostrati sulla pagina. Calcola un punteggio basato su quanta parte della pagina si sposta in modo imprevisto e di quanto si sposta. Questi spostamenti di contenuto sono molto fastidiosi, ti fanno perdere il segno in un articolo che hai iniziato a leggere o, peggio ancora, ti fanno cliccare sul pulsante sbagliato!

Cos'è un buon punteggio di Cumulative Layout Shift (CLS)?

Un buon punteggio CLS è compreso tra 0 e 0.1. Se il tuo punteggio CLS è compreso tra 0.1 e 0.25 ha bisogno di miglioramenti. Qualsiasi punteggio CLS superiore a 0.25 è considerato scadente. Per superare i Core Web Vitals per il Cumulative Layout Shift, almeno il 75% dei tuoi visitatori deve avere un punteggio CLS "buono".

L'importanza del CLS nelle performance web e nella user experience

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

• UX, coinvolgimento e percezione del brand: Gli spostamenti di layout imprevisti 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 scadenti in cui gli utenti abbandonano del tutto il sito web. La user experience di un sito web si riflette sul brand che lo gestisce. Frequenti spostamenti di layout possono dare l'impressione di un sito web mal progettato o mal mantenuto, interrompere il coinvolgimento dell'utente e portare a una diminuzione delle interazioni e a tassi di rimbalzo potenzialmente più elevati.
• Accessibilità: Gli spostamenti di layout possono essere particolarmente di disturbo per gli utenti con disabilità che si affidano a tecnologie assistive o screen reader. Un layout stabile garantisce a tutti di navigare e interagire con il sito web in modo efficace.
• SEO e Ranking di Ricerca: I Core Web Vitals sono un fattore di ranking piccolo ma significativo in Google. Google, insieme ad altri motori di ricerca, dà la priorità ai siti web che offrono una buona user experience. Il CLS è una delle metriche dei Core Web Vitals che Google considera quando posiziona i siti web. L'ottimizzazione per 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:

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 calcolato utilizzando una formula semplice ma elegante:

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

La frazione di impatto (impact-fraction) misura quanta parte del contenuto visibile della pagina si è spostata. La frazione di distanza (distance-fraction) misura di quanto il contenuto si è spostato. Se, per esempio, il 50% della pagina (quanta parte) si è spostato del 25% (di quanto) del viewport della pagina, il punteggio CLS = 0.50 * 0.25 = 0.125.

Spostamenti di layout previsti vs. imprevisti

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

Ecco perché solo gli spostamenti di layout imprevisti causeranno un contributo al CLS. Ad esempio, se un utente clicca su un pulsante e in risposta vengono aggiunti nuovi contenuti alla pagina (ad esempio un menu a tendina), lo spostamento di layout verrà escluso dal CLS. Per la precisione: gli spostamenti di 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 puniti con un punteggio CLS negativo. Ad esempio, una pagina che implementa lo scorrimento infinito (infinite scrolling) avrebbe visto l'impatto dei nuovi contenuti aggiunti sommato al punteggio CLS totale per ogni nuovo scorrimento. Ecco perché il CLS ora viene calcolato in sessioni. Ogni sessione ha una durata massima di 5 secondi e un intervallo di 1 secondo tra gli spostamenti di layout. La sessione con il punteggio CLS più alto diventerà il punteggio CLS finale.

Se, ad esempio, durante la prima sessione il punteggio CLS è 0.095, poi nella sessione 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.

Il 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 Largest Contentful Paint (LCP) e all'Interaction to Next Paint (INP). Insieme, queste tre metriche misurano le performance di caricamento, l'interattività e la stabilità visiva.

Cause comuni del CLS

L'origine di tutti gli spostamenti di layout è fondamentalmente la stessa. Ad un certo punto un elemento che era posizionato sopra un altro elemento ha occupato più o meno spazio rispetto a prima. Questo è tipicamente dovuto a una o più di queste cause:

Immagini, video e iframe senza dimensioni

I media non dimensionati sono la causa numero uno di CLS sul web. Secondo il Web Almanac 2025, il 62% delle pagine mobile ha almeno un'immagine senza dimensioni esplicite. Per la guida completa che copre immagini non dimensionate, video, iframe, la trappola CSS width: auto, l'art direction, le discrepanze delle immagini responsive, il lazy loading e le immagini placeholder, consulta Come Immagini e Media Causano Spostamenti di Layout.

Scambio di web font (Web font swaps)

I web font vengono scaricati da internet mentre la pagina viene renderizzata con un font di fallback. Quando arriva il web font, la differenza di dimensioni tra il font di fallback e quello finale causa uno spostamento di layout. Solo l'11% delle pagine precarica (preload) i web font, il che significa che la stragrande maggioranza del web è vulnerabile al CLS causato dallo scambio di font.

La soluzione prevede due tecniche: fare in modo che il font di fallback corrisponda al web font utilizzando le metric overrides di @font-face (size-adjust, ascent-override) e accelerare la distribuzione dei font tramite il self-hosting e il precaricamento (preload) dei font critici. Consulta la guida fix-and-identify per esempi di codice.

Animazioni e transizioni CSS

Le animazioni CSS che utilizzano proprietà che attivano il layout (layout-triggering) come top, left, width e height costringono il browser a ricalcolare il layout a ogni frame, producendo CLS. Secondo il Web Almanac, il 39% delle pagine mobile presenta animazioni non composite che contribuiscono al CLS. La soluzione è utilizzare invece transform e opacity, che vengono eseguiti sul compositore della GPU e non attivano mai il layout. Per la procedura completa, consulta spostamento di layout causato dalle transizioni CSS.

Annunci, embed e contenuti iniettati dinamicamente

Gli annunci caricano tardi e spingono i contenuti verso il basso. I banner di consenso sui cookie appaiono e spostano la pagina. Le richieste AJAX iniettano nuovi contenuti senza riservare spazio. Questi sono tutti lo stesso problema: qualcosa appare sulla pagina di cui il browser non era a conoscenza al momento del rendering. La soluzione è sempre riservare spazio con min-height e isolare il container con contain: layout style. Per gli embed di terze parti come YouTube e Google Maps, il pattern facade elimina del tutto il CLS.

Spostamenti di layout attivati dallo scroll

Questa è la causa di CLS che Lighthouse non rileverà mai. Gli header che si nascondono allo scroll, gli effetti di parallasse e le barre di navigazione che si rimpiccioliscono spesso animano top o height, e lo scroll non è un input escludente nelle specifiche della Layout Instability. Ogni spostamento di layout attivato dallo scroll conta ai fini del tuo punteggio CLS. La soluzione: usa transform: translateY() per qualsiasi animazione attivata dallo scroll. Consulta come le animazioni attivate dallo scroll causano CLS per la procedura completa.

Trovare e risolvere i problemi di CLS

La diagnosi del CLS segue la stessa metodologia "field-data-first" degli altri Core Web Vitals. Inizia con Google Search Console o uno strumento RUM come CoreDash per confermare quali pagine sono interessate e quali elementi si stanno spostando. Successivamente, utilizza Chrome DevTools o l'estensione Core Web Vitals Visualizer per riprodurre il problema localmente e identificare la causa principale.

Per il processo diagnostico completo passo dopo passo, le istruzioni per gli strumenti, le correzioni del codice per ogni causa e una checklist per soluzioni rapide, consulta la nostra guida dedicata: Trova e Risolvi i Problemi di Cumulative Layout Shift (CLS).

Caso di studio: Rakuten 24 e l'impatto sul business del CLS

Rakuten 24, un'importante piattaforma di e-commerce giapponese, ha condotto uno studio dettagliato sull'impatto del Cumulative Layout Shift sulle proprie metriche di business. Riducendo il CLS sulle pagine dei prodotti e delle categorie, Rakuten 24 ha ottenuto risultati notevoli:

• Aumento del 53.37% delle entrate per visitatore per gli utenti che hanno riscontrato un CLS basso rispetto a quelli con un CLS alto.
• Aumento del 33.13% del tasso di conversione (conversion rate) per la stessa coorte con CLS migliorato.
• Diminuzione del 15.20% del tasso di rimbalzo (bounce rate) tra i visitatori con esperienze di pagina stabili.

Questi numeri dimostrano che il CLS non è solo una metrica tecnica. L'instabilità visiva costa direttamente in termini di entrate alle aziende frustrando gli utenti durante il loro percorso di navigazione e acquisto. Quando gli elementi si spostano in modo imprevisto, gli utenti perdono fiducia, cliccano in modo errato e abbandonano le loro sessioni. Lo studio su Rakuten 24 conferma che investire nell'ottimizzazione del CLS ha un ritorno sull'investimento misurabile, in particolare per i siti di e-commerce in cui ogni interazione è fondamentale.

Cosa mostrano i dati del mondo reale sul CLS

I dati di CoreDash mostrano che il CLS è il Core Web Vital con le performance migliori, con il 92.8% dei caricamenti di pagina su corewebvitals.io che ottiene un punteggio "buono" e praticamente nessun divario di dispositivo tra mobile e desktop. Sia il desktop (92.8% buono) che il mobile (92.7% buono) ottengono punteggi CLS quasi perfetti, con un p75 di 0 su entrambi i tipi di dispositivo.

Questo è in contrasto con metriche come LCP e INP, in cui le performance mobile sono significativamente peggiori rispetto al desktop. Il CLS è in modo del tutto eccezionale migliore su mobile che su desktop su tutto il web, il che è l'opposto di ogni altro Core Web Vital.

A livello globale, secondo il Web Almanac 2025, il quadro è meno ottimistico:

• Il 72% dei siti web ottiene buoni punteggi CLS complessivamente, mentre l'11% ha un CLS scadente.
• Il 62% delle pagine mobile ha almeno un'immagine non dimensionata (in calo rispetto al 66% nel 2024, ma ancora un importante contributore al CLS).
• Il 39% delle pagine mobile presenta animazioni non composite che contribuiscono al CLS.
• Solo l'11% delle pagine precarica i web font, il che significa che la stragrande maggioranza dei siti è vulnerabile agli spostamenti di layout causati dallo scambio di font.

Il CLS ha mostrato un costante miglioramento anno su anno a livello globale, ma i dati rivelano che le immagini non dimensionate e le animazioni non composite rimangono le due cause più comuni. Affrontare questi due problemi da soli eliminerebbe gli spostamenti di layout per gran parte del web.

Guide correlate

Questa pagina hub copre il Cumulative Layout Shift ad alto livello. Per una guida pratica e dettagliata su come trovare e risolvere i problemi di CLS, esplora queste guide dedicate:

• Trova e Risolvi i Problemi di CLS: La guida diagnostica completa passo dopo passo con le istruzioni per gli strumenti, le correzioni del codice per ogni causa e una checklist per soluzioni rapide.
• Come Immagini e Media Causano Spostamenti di Layout: La guida definitiva al CLS derivante da immagini non dimensionate, video, iframe, art direction, immagini responsive, lazy loading e immagini placeholder.
• Risolvi lo spostamento di layout causato dal dimensionamento automatico delle immagini: Una procedura completa per aggiungere le corrette dimensioni alle immagini e ai container responsive.
• Risolvi lo spostamento di layout causato dalle transizioni CSS: Identifica e sostituisci le animazioni CSS che attivano il layout con alternative composite.
• Animazioni attivate dallo scroll e CLS: La causa di CLS che Lighthouse non riesce a rilevare e come risolverla.
• Self-host di Google Fonts: Riduci il CLS dovuto al caricamento dei font tramite il self-hosting dei font con adeguate strategie di font-display e precaricamento.
• Assicurati che il testo rimanga visibile durante il caricamento dei web font: Configura font-display e font metric overrides per eliminare gli spostamenti di layout causati dallo scambio di font.
• Costruisci un widget di chat con Core Web Vitals perfetti: Un caso di studio sull'implementazione di widget di terze parti senza introdurre regressioni di CLS, INP o LCP.

Per una panoramica completa di tutte le metriche dei Core Web Vitals e delle strategie di ottimizzazione, visita la panoramica dei Core Web Vitals o utilizza la Ultimate Core Web Vitals Checklist per analizzare il tuo sito.