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 durante il rendering del contenuto o quando nuovo contenuto viene mostrato sulla pagina. Calcola un punteggio basato su quanta parte della pagina si sposta inaspettatamente e quanto 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!

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

Un buon punteggio CLS è compreso tra 0 e 0,1. Se il tuo punteggio CLS è tra 0,1 e 0,25 necessita di miglioramento. Qualsiasi punteggio CLS superiore a 0,25 è considerato scarso. Per superare i Core Web Vitals per il Cumulative Layout Shift, almeno il 75% dei tuoi visitatori deve avere un punteggio CLS "buono".

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 una pagina web risulti stabile e prevedibile durante il caricamento. Ecco perché è importante:

• UX, coinvolgimento 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 rappresenta. Spostamenti frequenti del layout possono dare l'impressione di un sito web progettato o mantenuto male, interrompere il coinvolgimento degli utenti e portare 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 si misura il CLS?

Il CLS di una pagina può essere misurato con la Layout Instability API. Di seguito 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)

L'impact fraction misura quanta parte del contenuto visibile della pagina si è spostata. La distance fraction misura quanto lontano si è spostato il contenuto. Se, ad esempio, il 50% della pagina (quanto) si è spostato del 25% (quanto lontano) del viewport della pagina, il punteggio CLS = 0,50 * 0,25 = 0,125.

Spostamenti del layout attesi vs. inattesi

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

Ecco perché solo gli spostamenti del layout inattesi contribuiscono al CLS. Ad esempio, se un utente clicca un pulsante e in risposta viene aggiunto nuovo contenuto 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 saranno esclusi dai calcoli.

Sessioni di layout shift

Quando il CLS è stato introdotto per la prima volta, alcuni siti venivano penalizzati ingiustamente con un punteggio CLS scarso. Ad esempio, una pagina che implementa lo scrolling infinito avrebbe visto l'impatto del nuovo contenuto aggiunto al punteggio CLS totale per ogni nuovo scroll. Ecco perché il CLS viene ora calcolato in sessioni. Ogni sessione ha una durata massima di 5 secondi e un intervallo di 1 secondo tra gli spostamenti del 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, nella sessione successiva il CLS è 0,15, e nell'ultima sessione il punteggio CLS è 0, il punteggio CLS finale sarà il più alto dei tre: 0,15.

CLS e i Core Web Vitals

Il Cumulative Layout Shift (CLS) è una metrica importante e 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 prestazioni di caricamento, l'interattività e la stabilità visiva.

Come individuare problemi di CLS

1. Usa Lighthouse per trovare i Cumulative Layout Shift

Il metodo più semplice per trovare gli spostamenti del layout è utilizzare Lighthouse nel tuo browser Chrome. Esegui semplicemente un audit Lighthouse cliccando con il tasto destro in qualsiasi punto della pagina. Quindi 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 verso il basso fino a Diagnostics ed espandi le informazioni sul Cumulative Layout Shift per vedere quali nodi stanno causando lo spostamento del layout.

Ad essere sincero, 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. Usa il CLS Visualizer per trovare i Cumulative Layout Shift

Il CLS Visualizer è un'estensione Chrome scritta da me. Con un singolo clic 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. Usa la scheda Performance di Chrome per trovare il CLS

Il modo migliore in assoluto 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 Dev Tools)
• Premi Ctrl+Shift+E (Avvia il profiling 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 di rosso nella sezione Experience della scheda Performance).

4. Usa 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. A 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 senza dimensioni esplicite
• Annunci pubblicitari che si caricano in ritardo nel viewport
• Contenuto iniettato dinamicamente
• Animazioni CSS che utilizzano proprietà che attivano il layout
• Interazioni utente lente
• Web font con fallback non corrispondenti

CLS causato da immagini, video e iframe

Immagini, video e iframe sono i soliti sospetti quando si tratta di Cumulative Layout Shift, poiché questi elementi costituiscono la maggior parte dei problemi di CLS. Per una guida dettagliata su questa causa specifica, consulta come risolvere il layout shift causato da immagini con dimensionamento automatico.

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

Imposta attributi espliciti di width e height

Il modo più semplice ed efficace per prevenire il CLS da immagini e iframe è includere sempre gli attributi width e height direttamente nell'HTML. I browser moderni utilizzano questi attributi per calcolare il rapporto d'aspetto prima che la risorsa venga caricata, riservando la quantità corretta di spazio.

<!-- Images: always include width and height -->
<img src="hero.jpg" width="800" height="450" alt="Hero image">

<!-- Iframes: same principle -->
<iframe src="https://example.com/embed"
    width="560" height="315"
    title="Embedded content">
</iframe>

<!-- Videos: always include dimensions -->
<video width="640" height="360" controls>
    <source src="video.mp4" type="video/mp4">
</video>

<style>
img, iframe, video {
    max-width: 100%;
    height: auto;
}
</style>

Usa la proprietà CSS aspect-ratio

Per layout responsive o quando le dimensioni esatte in pixel non sono disponibili, la proprietà CSS aspect-ratio offre un modo alternativo per riservare spazio. Questo è particolarmente utile per contenitori che ospitano contenuto dinamico o media incorporati.

<style>
/* Reserve space for a 16:9 video container */
.video-wrapper {
    aspect-ratio: 16 / 9;
    width: 100%;
    background: #f0f0f0;
}

/* Reserve space for a square image */
.avatar {
    aspect-ratio: 1 / 1;
    width: 80px;
    object-fit: cover;
}

/* Responsive iframe container */
.embed-container {
    aspect-ratio: 560 / 315;
    width: 100%;
}
.embed-container iframe {
    width: 100%;
    height: 100%;
}
</style>

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 o telefono locale 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. Per maggiori informazioni, consulta come garantire che il testo rimanga visibile durante il caricamento dei web font.

Esistono diversi metodi per correggere lo spostamento del layout causato dai web font. Si basano su due tecniche:

1. Far corrispondere il più possibile il font di fallback al web font. Il modo più efficace è sovrascrivere i descrittori @font-face.

2. Velocizzare i web font. Questo li renderà disponibili al browser prima che il browser inizi il rendering. Un modo comune per farlo è ospitare autonomamente i tuoi web font e precaricare i web font critici.

Corrispondenza del font di fallback con override metrici

La tecnica più efficace per eliminare il CLS dai web font è creare una definizione di font di fallback che corrisponda il più possibile alle dimensioni del tuo web font. Utilizzando i descrittori size-adjust, ascent-override, descent-override e line-gap-override, puoi fare in modo che il font di fallback occupi uno spazio quasi identico. Combinato con font-display: swap, questo garantisce che il testo sia immediatamente visibile con uno spostamento del layout minimo quando il web font viene caricato.

<style>
/* Define a matched fallback font */
@font-face {
    font-family: 'My Font Fallback';
    src: local('Arial');
    size-adjust: 105.2%;
    ascent-override: 93%;
    descent-override: 24%;
    line-gap-override: 0%;
}

/* Use the web font with the matched fallback */
@font-face {
    font-family: 'My Font';
    src: url('/fonts/myfont.woff2') format('woff2');
    font-display: swap;
}

body {
    font-family: 'My Font', 'My Font Fallback', sans-serif;
}
</style>

<!-- Preload the critical web font for faster loading -->
<link rel="preload" href="/fonts/myfont.woff2"
    as="font" type="font/woff2" crossorigin>

Strumenti come il Fallback Font Generator possono calcolare automaticamente i valori di override corretti per la tua specifica combinazione di font. Per Google Fonts in particolare, ospitare autonomamente i tuoi font ti dà il pieno controllo sulle dichiarazioni font-face e sulla strategia di precaricamento.

CLS causato dalle animazioni CSS

Le animazioni e le transizioni CSS possono attivare spostamenti del layout inattesi quando animano proprietà che influenzano il layout degli elementi circostanti. Proprietà come top, left, width, height, margin e padding costringono il browser a ricalcolare il layout dell'intera pagina, causando CLS. Per una guida dettagliata, consulta come risolvere il layout shift causato dalle transizioni CSS.

La soluzione è utilizzare proprietà CSS compositate come transform e opacity per le animazioni. Queste proprietà vengono gestite dal compositor GPU e non attivano ricalcoli del layout, quindi producono zero CLS.

<style>
/* BAD: Animating top/left causes layout shifts */
.slide-in-bad {
    position: relative;
    animation: slide-bad 0.3s ease-out;
}
@keyframes slide-bad {
    from { top: -50px; opacity: 0; }
    to   { top: 0; opacity: 1; }
}

/* GOOD: Animating transform does NOT cause layout shifts */
.slide-in-good {
    animation: slide-good 0.3s ease-out;
}
@keyframes slide-good {
    from { transform: translateY(-50px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
</style>

Secondo l'HTTP Archive Web Almanac, il 39% delle pagine mobile e il 42% delle pagine desktop hanno animazioni non compositate che contribuiscono al CLS. Controlla sempre le tue animazioni per assicurarti che utilizzino solo transform e opacity anziché proprietà che attivano il layout.

Usa il CSS containment per isolare gli spostamenti del layout

La proprietà CSS contain indica al browser che il contenuto di un elemento è indipendente dal resto della pagina. Questo limita la portata dei ricalcoli del layout e può impedire agli spostamenti del layout di propagarsi agli elementi circostanti.

<style>
/* Isolate ad containers from the rest of the page */
.ad-slot {
    contain: layout style;
    min-height: 250px;
}

/* For off-screen content, use content-visibility */
.below-fold-section {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
}
</style>

La dichiarazione contain: layout garantisce che qualsiasi cambiamento di dimensione all'interno dell'elemento non attivi ricalcoli del layout per gli elementi esterni. La proprietà content-visibility: auto va oltre permettendo al browser di saltare completamente il rendering del contenuto fuori schermo, con contain-intrinsic-size che fornisce una dimensione stimata per prevenire spostamenti del layout quando il contenuto entra nella vista durante lo scrolling.

Problemi di CLS causati da interazioni utente lente

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

Il browser lo riconosce 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. Se un'interazione richiede più tempo, qualsiasi spostamento del layout risultante verrà conteggiato nel punteggio CLS. Questo è particolarmente rilevante per le richieste AJAX che iniettano nuovo contenuto. Per suggerimenti sull'ottimizzazione degli elementi interattivi, consulta come costruire un widget chat con Core Web Vitals perfetti.

Problemi di CLS causati da AJAX e contenuto iniettato dinamicamente

AJAX permette alle pagine web di essere aggiornate in modo asincrono scambiando dati con un server web in background. 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. Non conosci in anticipo l'altezza del nuovo contenuto, ma puoi fare una stima ragionevole.

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% meno 40% = 10% distance fraction) è comunque molto minore di una distance fraction del 50%.

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>

CLS post-caricamento: contenuto dinamico ed elementi a caricamento tardivo

Gli spostamenti del layout non avvengono solo durante il caricamento iniziale della pagina. Il CLS post-caricamento è causato da contenuto che appare o cambia dimensione dopo che la pagina è già stata renderizzata. Le cause comuni includono:

• Annunci pubblicitari a caricamento tardivo: Le reti pubblicitarie spesso iniettano contenuto secondi dopo il caricamento della pagina. Se lo slot pubblicitario non ha spazio riservato, l'annuncio spinge verso il basso tutto il contenuto circostante.
• Banner di consenso cookie: I banner che spingono verso il basso il contenuto della pagina anziché sovrapporsi causano un CLS significativo. Usa un pattern overlay (position: fixed) o riserva spazio in cima alla pagina.
• Contenuto caricato in modo lazy above the fold: Contenuto caricato tramite Intersection Observer che era inizialmente nascosto ma appare nel viewport senza spazio riservato.
• Script di A/B testing: Gli strumenti di testing che modificano il DOM dopo il render iniziale possono causare spostamenti inattesi. Esegui le modifiche degli A/B test lato server o all'interno dell'HTML iniziale quando possibile.
• Implementazioni di scrolling infinito: Nuovo contenuto aggiunto in fondo a una lista può causare spostamenti se cambia il layout degli elementi esistenti. Assicurati che il nuovo contenuto venga aggiunto solo sotto la posizione di scroll corrente.

Il modello a finestra di sessione (descritto sopra) significa che anche gli spostamenti post-caricamento contano per il CLS se rientrano nella sessione peggiore. Monitora i dati di attribuzione del CLS in Core/Dash per identificare quali elementi si spostano dopo il caricamento.

Risolvere problemi di CLS causati dagli annunci pubblicitari

Gli annunci pubblicitari spesso si caricano significativamente più tardi sulla pagina. Questo rende i Cumulative Layout Shift causati dagli annunci particolarmente fastidiosi. Quando più annunci si caricano nel viewport visibile, la pagina semplicemente non resta ferma. Per risolvere questo problema, riserva lo spazio per gli annunci, specialmente quelli nel viewport visibile.

<style>
/* Reserve space for rectangle mobile ad */
.ad {
    min-height: 250px;
    background: #dedede;
    contain: layout style;
}
/* Reserve space for banner desktop ad */
@media only screen and (min-width: 600px) {
    .ad { min-height: 90px; }
}
</style>

Case study: Rakuten 24 e l'impatto commerciale del CLS

Rakuten 24, una delle principali piattaforme di e-commerce giapponesi, ha condotto uno studio dettagliato sull'impatto del Cumulative Layout Shift sulle proprie metriche di business. Riducendo il CLS nelle pagine prodotto e categoria, Rakuten 24 ha ottenuto risultati notevoli:

• Aumento del 53,37% del ricavo per visitatore per gli utenti che hanno sperimentato un CLS basso rispetto a quelli con CLS alto.
• Aumento del 33,13% del tasso di conversione per la stessa coorte con CLS migliorato.
• Diminuzione del 15,20% del tasso di rimbalzo tra i visitatori con esperienze di pagina stabili.

Questi numeri dimostrano che il CLS non è semplicemente una metrica tecnica. L'instabilità visiva costa direttamente ricavi alle aziende frustrando gli utenti durante la navigazione e il percorso di acquisto. Quando gli elementi si spostano inaspettatamente, gli utenti perdono fiducia, cliccano per errore e abbandonano le sessioni. Lo studio di Rakuten 24 conferma che investire nell'ottimizzazione del CLS ha un ritorno sull'investimento misurabile, in particolare per i siti e-commerce dove ogni interazione conta.

Cosa mostrano i dati CLS reali

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

Questo è in contrasto con metriche come LCP e INP, dove le prestazioni mobile sono significativamente peggiori rispetto al desktop. Il CLS è sorprendentemente migliore su mobile rispetto al desktop nel web più ampio, 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 CLS scarso.
• Il 66% delle pagine mobile ha almeno un'immagine senza dimensioni (in calo dal 72% del 2022, ma ancora un importante contributore al CLS).
• Il 39% delle pagine mobile ha animazioni non compositate 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 del layout causati dallo scambio di font.

Il CLS ha mostrato un miglioramento costante anno dopo anno a livello globale, ma i dati rivelano che le immagini senza dimensioni e le animazioni non compositate rimangono le due cause più comuni. Affrontare questi due problemi da soli eliminerebbe gli spostamenti del layout per una grande parte del web.

Domande frequenti sul CLS

Guide correlate

Esplora queste guide dettagliate per tecniche specifiche di ottimizzazione del CLS:

• Risolvere il layout shift causato dalle transizioni CSS: Scopri come identificare e sostituire le animazioni CSS che attivano il layout con alternative compositate.
• Risolvere il layout shift causato da immagini con dimensionamento automatico: Una guida completa per aggiungere dimensioni appropriate alle immagini e ai contenitori responsive.
• Ospitare autonomamente Google Fonts: Riduci il CLS causato dal caricamento dei font ospitando autonomamente i font con strategie appropriate di font-display e precaricamento.
• Garantire che il testo rimanga visibile durante il caricamento dei web font: Configura font-display e gli override delle metriche dei font per eliminare gli spostamenti del layout causati dallo scambio di font.
• Costruire un widget chat con Core Web Vitals perfetti: Un case study sull'implementazione di widget di terze parti senza introdurre regressioni di CLS, INP o LCP.

Per una panoramica completa di tutte le metriche Core Web Vitals e le strategie di ottimizzazione, visita la panoramica dei Core Web Vitals o usa la Checklist Definitiva dei Core Web Vitals per verificare il tuo sito.