Ottimizza Cumulative Layout Shift

Scopri come evitare improvvisi spostamenti del layout per migliorare l'esperienza utente

Addy Osmani

Barry Pollard

Pubblicato: 5 maggio 2020, ultimo aggiornamento: 7 febbraio 2025

Cumulative Layout Shift (CLS) è una delle tre metriche dei Segnali web essenziali. Misura l'instabilità dei contenuti combinando la quantità di contenuti visibili spostati nell'area visibile con la distanza percorsa dagli elementi interessati.

Le variazioni del layout possono distrarre gli utenti. Immagina di iniziare a leggere un articolo quando all'improvviso gli elementi si spostano nella pagina, facendoti perdere il filo e costringendoti a ritrovare il punto in cui eri arrivato. È una situazione molto comune sul web, ad esempio quando leggi le notizie o provi a fare clic sui pulsanti "Cerca" o "Aggiungi al carrello". Queste esperienze sono visivamente stridenti e frustranti. Spesso si verificano quando gli elementi visibili sono costretti a spostarsi perché un altro elemento è stato aggiunto improvvisamente alla pagina o ridimensionato.

Per offrire una buona esperienza utente, i siti dovrebbero fare in modo di avere un valore CLS pari o inferiore a 0,1 per almeno il 75% delle visite alla pagina.

A differenza degli altri Segnali web essenziali, che sono valori basati sul tempo misurati in secondi o millisecondi, il punteggio CLS è un valore senza unità di misura basato su un calcolo della quantità di contenuti che si spostano e della distanza dello spostamento.

In questa guida, esamineremo l'ottimizzazione delle cause comuni degli spostamenti del layout.

Le cause più comuni di un CLS scarso sono:

• Immagini senza dimensioni.
• Annunci, incorporamenti e iframe senza dimensioni.
• Contenuti inseriti dinamicamente, come annunci, incorporamenti e iframe senza dimensioni.
• Caratteri web.

Comprendere le cause degli spostamenti del layout

Prima di iniziare a esaminare le soluzioni ai problemi comuni di CLS, è importante comprendere il punteggio CLS e la provenienza degli spostamenti.

CLS negli strumenti di laboratorio e sul campo

È comune che gli sviluppatori ritengano che il CLS misurato dal report sull'esperienza utente di Chrome (CrUX) sia errato perché non corrisponde al CLS che misurano utilizzando gli Strumenti per sviluppatori di Chrome o altri strumenti di laboratorio. Gli strumenti di test delle prestazioni web come Lighthouse potrebbero non mostrare l'intero CLS di una pagina, in quanto in genere eseguono un caricamento di base della pagina per misurare alcune metriche delle prestazioni web e fornire alcune indicazioni (anche se i flussi utente di Lighthouse consentono di misurare oltre l'audit di caricamento della pagina predefinito).

CrUX è il set di dati Google del programma Web Vitals e, per questo, la metrica CLS viene misurata durante l'intero ciclo di vita della pagina e non solo durante il caricamento iniziale della pagina, come avviene in genere con gli strumenti di laboratorio.

Le variazioni di layout sono molto comuni durante il caricamento della pagina, in quanto vengono recuperate tutte le risorse necessarie per il rendering iniziale della pagina, ma possono verificarsi anche dopo il caricamento iniziale. Molte variazioni post-caricamento possono verificarsi a seguito di un'interazione utente e pertanto verranno escluse dal punteggio CLS in quanto sono variazioni previste, a condizione che si verifichino entro 500 millisecondi da quell'interazione.

Tuttavia, potrebbero essere inclusi altri spostamenti post-caricamento imprevisti per l'utente in assenza di interazioni idonee, ad esempio se scorri più in basso nella pagina e vengono caricati contenuti caricati in modalità differita che causano spostamenti. Altre cause comuni di CLS post-caricamento sono le interazioni delle transizioni, ad esempio nelle app a pagina singola, che richiedono più tempo del periodo di tolleranza di 500 millisecondi.

PageSpeed Insights mostra sia il CLS percepito dall'utente di un URL nella sezione "Scopri com'è l'esperienza dei tuoi utenti reali", sia il CLS di caricamento basato su test di laboratorio nella sezione "Diagnostica i problemi di prestazioni". Le differenze tra questi valori sono probabilmente il risultato del CLS post-caricamento.

Identificare i problemi di CLS di caricamento

Quando i punteggi CLS di CrUX e Lighthouse di PageSpeed Insights sono ampiamente allineati, di solito significa che è stato rilevato un problema di CLS di caricamento da Lighthouse. In questo caso, Lighthouse ti aiuterà con due audit per fornire maggiori informazioni sulle immagini che causano la metrica CLS a causa della larghezza e dell'altezza mancanti, nonché per elencare tutti gli elementi che si sono spostati durante il caricamento della pagina insieme al loro contributo alla metrica CLS. Puoi visualizzare questi audit filtrando in base agli audit CLS:

Il riquadro Prestazioni in DevTools fornisce una vasta gamma di informazioni sugli spostamenti del layout:

Le variazioni del layout sono evidenziate nella traccia Variazioni del layout. La linea viola raggruppa i turni in cluster, mentre i rombi mostrano i singoli turni all'interno del cluster. Le dimensioni del rombo sono proporzionali alle dimensioni dello spostamento, il che ti consente di concentrarti sugli spostamenti più grandi.

Se fai clic su uno spostamento, viene visualizzato un popup con un'animazione dello spostamento e gli elementi spostati vengono evidenziati in viola.

Inoltre, la visualizzazione Riepilogo per un record Layout Shift include l'ora di inizio, il punteggio dello spostamento e gli elementi spostati. Ciò è particolarmente utile per ottenere maggiori dettagli sui problemi di CLS di caricamento, poiché questo valore viene facilmente replicato con un profilo di rendimento di ricaricamento.

Questo link rimanda anche all'approfondimento Responsabili dello spostamento del layout visualizzato nel riquadro Approfondimenti a sinistra, che mostra il CLS totale in alto, nonché i possibili motivi degli spostamenti del layout.

Identificare i problemi di CLS post-caricamento

La discrepanza tra i punteggi CLS di CrUX e Lighthouse spesso indica il CLS post-caricamento. Queste variazioni possono essere difficili da individuare senza i dati dei campi. Per informazioni sulla raccolta dei dati di campo, consulta Misurare gli elementi CLS sul campo.

La visualizzazione delle metriche in tempo reale del riquadro Prestazioni ti consente di interagire con la pagina e monitorare il punteggio CLS per identificare le interazioni che causano grandi variazioni del layout.

In alternativa all'utilizzo di DevTools, puoi sfogliare la tua pagina web mentre registri gli spostamenti del layout utilizzando un Performance Observer incollato nella console.

Dopo aver configurato il monitoraggio degli spostamenti, puoi provare a replicare eventuali problemi di CLS post-caricamento. Il CLS si verifica spesso mentre l'utente scorre una pagina, quando i contenuti caricati in modalità differita vengono caricati completamente senza spazio riservato. Lo spostamento dei contenuti quando l'utente passa il puntatore sopra è un'altra causa comune di CLS dopo il caricamento. Qualsiasi spostamento dei contenuti durante una di queste interazioni viene considerato imprevisto, anche se avviene entro 500 millisecondi.

Per ulteriori informazioni, vedi Eseguire il debug degli spostamenti del layout.

Dopo aver identificato le cause comuni del CLS, puoi utilizzare anche la modalità flusso utente intervalli di tempo di Lighthouse per assicurarti che i flussi utente tipici non regrediscano introducendo spostamenti del layout.

Misurare gli elementi CLS sul campo

Il monitoraggio del CLS sul campo può essere prezioso per determinare in quali circostanze si verifica il CLS e restringere le possibili cause. Come la maggior parte degli strumenti di laboratorio, gli strumenti sul campo misurano solo gli elementi che sono cambiati, ma di solito forniscono informazioni sufficienti per identificare la causa. Puoi anche utilizzare le misurazioni dei campi CLS per determinare quali problemi hanno la priorità più alta da risolvere.

La libreria web-vitals dispone di funzioni di attribuzione che consentono di raccogliere queste informazioni aggiuntive. Per saperne di più, vedi Eseguire il debug del rendimento sul campo. Anche altri fornitori di RUM hanno iniziato a raccogliere e presentare questi dati in modo simile.

Cause comuni di CLS

Una volta identificate le cause del CLS, puoi iniziare a risolvere i problemi. In questa sezione mostreremo alcuni dei motivi più comuni per il CLS e cosa puoi fare per evitarli.

Immagini senza dimensioni

Includi sempre gli attributi di dimensione width e height negli elementi immagine e video. In alternativa, riserva lo spazio richiesto con CSS aspect-ratio o simili. Questo approccio garantisce che il browser possa allocare la quantità corretta di spazio nel documento durante il caricamento dell'immagine.

Cronologia degli attributi width e height nelle immagini

Nei primi giorni del web, gli sviluppatori aggiungevano gli attributi width e height ai tag <img> per assicurarsi che fosse allocato spazio sufficiente sulla pagina prima che il browser iniziasse a recuperare le immagini. In questo modo, il reflow e il nuovo layout verranno ridotti al minimo.

<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">

width e height in questo esempio non includono unità. Queste dimensioni in "pixel" garantiscono che il browser riservi un'area di 640 x 360 nel layout della pagina. L'immagine verrà estesa per adattarsi a questo spazio, indipendentemente dal fatto che le dimensioni reali corrispondano.

Quando è stato introdotto il Responsive Web Design, gli sviluppatori hanno iniziato a omettere width e height e hanno iniziato a utilizzare CSS per ridimensionare le immagini:

img {
  width: 100%; /* or max-width: 100%; */
  height: auto;
}

Tuttavia, poiché le dimensioni dell'immagine non sono specificate, non è possibile allocare spazio per l'immagine finché il browser non inizia a scaricarla e non può determinarne le dimensioni. Man mano che le immagini vengono caricate, il testo si sposta verso il basso della pagina per fare spazio, creando un'esperienza utente confusa e frustrante.

È qui che entrano in gioco le proporzioni. Le proporzioni di un'immagine sono il rapporto tra la sua larghezza e la sua altezza. È comune vedere questo valore espresso come due numeri separati da due punti (ad esempio, 16:9 o 4:3). Per un formato x:y, l'immagine è larga x unità e alta y unità.

Ciò significa che se conosciamo una delle dimensioni, possiamo determinare l'altra. Per proporzioni 16:9:

• Se puppy.jpg ha un'altezza di 360 px, la larghezza è 360 x (16 / 9) = 640 px
• Se puppy.jpg ha una larghezza di 640 px, l'altezza è 640 x (9 / 16) = 360 px

Conoscere le proporzioni di un'immagine consente al browser di calcolare e riservare spazio sufficiente per l'altezza e l'area associata.

Best practice moderna per impostare le dimensioni delle immagini

Poiché i browser moderni impostano le proporzioni predefinite delle immagini in base agli attributi width e height di un'immagine, puoi evitare gli spostamenti del layout impostando questi attributi sull'immagine e includendo il CSS precedente nel foglio di stile.

<!-- set a 640:360 i.e a 16:9 aspect ratio -->
<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">

Tutti i browser aggiungeranno quindi un rapporto di aspetto predefinito in base agli attributi width e height esistenti dell'elemento.

Calcola le proporzioni in base agli attributi width e height prima che l'immagine venga caricata. Fornisce queste informazioni all'inizio del calcolo del layout. Non appena viene specificata una larghezza per un'immagine (ad esempio width: 100%), le proporzioni vengono utilizzate per calcolare l'altezza.

Questo valore aspect-ratio viene calcolato dai browser principali durante l'elaborazione dell'HTML, anziché con un foglio di stile user agent predefinito (vedi questo post per un approfondimento sul motivo), quindi il valore viene visualizzato in modo leggermente diverso. Ad esempio, Chrome lo visualizza in questo modo nella sezione Stili del riquadro Elemento:

img[Attributes Style] {
  aspect-ratio: auto 640 / 360;
}

Safari si comporta in modo simile, utilizzando un'origine di stile Attributi HTML. Firefox non visualizza questo aspect-ratio calcolato nel pannello Inspector, ma lo utilizza per il layout.

La parte auto del codice precedente è importante perché fa sì che le dimensioni dell'immagine sostituiscano le proporzioni predefinite dopo il download dell'immagine. Se le dimensioni dell'immagine sono diverse, si verifica comunque uno spostamento del layout dopo il caricamento dell'immagine, ma in questo modo si garantisce che le proporzioni dell'immagine vengano comunque utilizzate quando diventano disponibili, nel caso in cui il codice HTML non sia corretto. Anche se le proporzioni effettive sono diverse da quelle predefinite, causano comunque uno spostamento del layout inferiore rispetto alle dimensioni predefinite 0x0 di un'immagine senza dimensioni fornite.

Per un approfondimento sulle proporzioni e sulle immagini adattabili, consulta Caricamento di pagine senza problemi con le proporzioni dei contenuti multimediali.

Se l'immagine si trova in un contenitore, puoi utilizzare CSS per ridimensionarla in base alla larghezza del contenitore. Abbiamo impostato height: auto; per evitare di utilizzare un valore fisso per l'altezza dell'immagine.

img {
  height: auto;
  width: 100%;
}

Che cosa succede nel caso delle immagini adattabili?

Quando lavori con le immagini responsive, srcset definisce le immagini tra cui il browser può scegliere e le dimensioni di ciascuna immagine. Per assicurarti che gli attributi di larghezza e altezza di <img> possano essere impostati, ogni immagine deve utilizzare le stesse proporzioni.

<img
  width="1000"
  height="1000"
  src="puppy-1000.jpg"
  srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w"
  alt="Puppy with balloons"
/>

I formati delle immagini possono anche cambiare a seconda della direzione artistica. Ad esempio, potresti voler includere uno scatto ritagliato di un'immagine per viewport strette e visualizzare l'immagine completa sul computer:

<picture>
  <source media="(max-width: 799px)" srcset="puppy-480w-cropped.jpg" />
  <source media="(min-width: 800px)" srcset="puppy-800w.jpg" />
  <img src="puppy-800w.jpg" alt="Puppy with balloons" />
</picture>

Chrome, Firefox e Safari ora supportano l'impostazione di width e height sugli elementi <source> all'interno di un determinato elemento <picture>:

<picture>
  <source media="(max-width: 799px)" srcset="puppy-480w-cropped.jpg" width="480" height="400" />
  <source media="(min-width: 800px)" srcset="puppy-800w.jpg" width="800" height="400" />
  <img src="puppy-800w.jpg" alt="Puppy with balloons" width="800" height="400" />
</picture>

Annunci, incorporamenti e altri contenuti caricati in un secondo momento

Le immagini non sono l'unico tipo di contenuti che può causare variazioni del layout. Annunci, incorporamenti, iframe e altri contenuti inseriti dinamicamente possono causare lo spostamento verso il basso dei contenuti che appaiono dopo, aumentando il CLS.

Gli annunci sono uno dei principali fattori che contribuiscono alle variazioni del layout sul web. Le reti pubblicitarie e i publisher spesso supportano dimensioni degli annunci dinamiche. Le dimensioni degli annunci aumentano il rendimento e le entrate grazie a tassi di clic più elevati e a un maggior numero di annunci in competizione nell'asta. Purtroppo, ciò può comportare un'esperienza utente non ottimale, in quanto gli annunci spingono verso il basso della pagina i contenuti visibili che stai visualizzando.

I widget incorporabili ti consentono di includere contenuti web portatili nella tua pagina, come video di YouTube, mappe di Google Maps e post sui social media. Tuttavia, spesso questi widget non sono consapevoli delle dimensioni dei loro contenuti prima del caricamento. Di conseguenza, le piattaforme che offrono incorporamenti non riservano sempre spazio per i widget, il che causa spostamenti del layout quando vengono caricati.

Le tecniche per affrontarli sono tutte simili. Le principali differenze riguardano il controllo che hai sui contenuti che verranno inseriti. Se viene inserito da una terza parte, ad esempio un partner pubblicitario, potresti non conoscere le dimensioni esatte dei contenuti che verranno inseriti né essere in grado di controllare eventuali modifiche del layout all'interno di questi incorporamenti.

Riservare spazio per i contenuti a caricamento lento

Quando inserisci contenuti a caricamento ritardato nel flusso di contenuti, puoi evitare spostamenti del layout riservando lo spazio per questi contenuti nel layout iniziale.

Un approccio consiste nell'aggiungere una regola CSS min-height per riservare spazio o, per i contenuti adattabili come gli annunci, ad esempio, utilizzare la proprietà CSS aspect-ratio in modo simile a come i browser la utilizzano automaticamente per le immagini con dimensioni fornite.

Potresti dover tenere conto di lievi differenze nelle dimensioni degli annunci o dei segnaposto nei vari fattori di forma utilizzando le query supporti.

Per i contenuti che potrebbero non avere un'altezza fissa, come gli annunci, potresti non essere in grado di riservare la quantità esatta di spazio necessaria per eliminare completamente lo spostamento del layout. Se viene pubblicato un annuncio più piccolo, un publisher può applicare uno stile a un contenitore più grande per evitare spostamenti del layout oppure scegliere le dimensioni più probabili per lo spazio pubblicitario in base ai dati storici. Lo svantaggio di questo approccio è che aumenta la quantità di spazio vuoto nella pagina.

Puoi invece impostare la dimensione iniziale sulla dimensione più piccola che verrà utilizzata e accettare un certo livello di spostamento per i contenuti più grandi. L'utilizzo di min-height, come suggerito in precedenza, consente all'elemento padre di crescere in base alle necessità, riducendo al contempo l'impatto delle variazioni di layout rispetto alle dimensioni predefinite di 0 px di un elemento vuoto.

Cerca di evitare di comprimere lo spazio riservato mostrando un segnaposto se, ad esempio, non viene restituito alcun annuncio. La rimozione dello spazio riservato agli elementi può causare un CLS pari a quello dell'inserimento di contenuti.

Posizionare i contenuti a caricamento lento più in basso nell'area visibile

I contenuti inseriti dinamicamente più vicino alla parte superiore dell'area visibile di solito causano spostamenti del layout maggiori rispetto a quelli inseriti più in basso. Tuttavia, l'inserimento di contenuti in qualsiasi punto dell'area visibile causa comunque uno spostamento. Se non riesci a riservare spazio per i contenuti inseriti, ti consigliamo di posizionarli più avanti nella pagina per ridurre l'impatto sul CLS.

Evita di inserire nuovi contenuti senza interazione da parte dell'utente

Probabilmente hai già riscontrato spostamenti del layout dovuti all'interfaccia utente che compare nella parte superiore o inferiore del riquadro visibile quando provi a caricare un sito. Come per gli annunci, questo accade spesso con banner e moduli che spostano il resto dei contenuti della pagina:

Se devi visualizzare questi tipi di UI, riserva in anticipo uno spazio sufficiente nel riquadro di visualizzazione (ad esempio utilizzando un segnaposto o un'UI scheletrica) in modo che, al caricamento, non causi uno spostamento improvviso dei contenuti nella pagina. In alternativa, assicurati che l'elemento non faccia parte del flusso del documento sovrapponendo i contenuti dove ha senso. Per ulteriori consigli su questi tipi di componenti, consulta il post Best practice per le informative sui cookie.

In alcuni casi, l'aggiunta dinamica di contenuti è una parte importante dell'esperienza utente. Ad esempio, quando carichi altri prodotti in un elenco di articoli o quando aggiorni i contenuti del feed live. Esistono diversi modi per evitare spostamenti del layout imprevisti in questi casi:

• Sostituisci i vecchi contenuti con quelli nuovi all'interno di un contenitore di dimensioni fisse o utilizza un carosello e rimuovi i vecchi contenuti dopo la transizione. Ricorda di disattivare tutti i link e i controlli fino al completamento della transizione per evitare clic o tocchi accidentali durante il caricamento dei nuovi contenuti.
• Chiedi all'utente di avviare il caricamento di nuovi contenuti, in modo che non venga sorpreso dal cambiamento (ad esempio con un pulsante "Carica altro" o "Aggiorna"). Ti consigliamo di precaricare i contenuti prima dell'interazione dell'utente in modo che vengano visualizzati immediatamente. Ti ricordiamo che le variazioni di layout che si verificano entro 500 millisecondi dall'input dell'utente non vengono conteggiate ai fini della metrica CLS.
• Carica senza problemi i contenuti fuori dallo schermo e sovrapponi una notifica all'utente per comunicare che sono disponibili (ad esempio, con un pulsante "Scorri in alto").

Animazioni

Le modifiche ai valori delle proprietà CSS possono richiedere al browser di reagire a queste modifiche. Alcuni valori, come box-shadow e box-sizing, attivano il ricalcolo del layout, il disegno e la composizione. La modifica delle proprietà top e left causa anche spostamenti del layout, anche quando l'elemento spostato si trova su un livello separato. Evita di animare utilizzando queste proprietà.

Altre proprietà CSS possono essere modificate senza attivare i riposizionamenti. Questi includono l'utilizzo di animazioni transform per traslare, scalare, ruotare o inclinare gli elementi.

Le animazioni composite che utilizzano translate non possono influire su altri elementi e pertanto non vengono conteggiate ai fini del CLS. Inoltre, le animazioni non composite non causano il riposizionamento. Per scoprire di più su quali proprietà CSS attivano gli spostamenti del layout, consulta Animazioni ad alte prestazioni.

Caratteri web

Il download e il rendering dei caratteri web vengono in genere gestiti in due modi prima del download del carattere web:

• Il carattere di riserva viene sostituito con il carattere web, causando un FOUT (Flash of Unstyled Text).
• Il testo "invisibile" viene visualizzato utilizzando il carattere di riserva finché non è disponibile un carattere web e il testo non viene reso visibile (FOIT, flash of invisible text).

Entrambi gli approcci possono causare variazioni del layout. Anche se il testo è invisibile, viene comunque disposto utilizzando il carattere di riserva, quindi quando il carattere web viene caricato, il blocco di testo e i contenuti circostanti si spostano nello stesso modo del carattere visibile.

I seguenti strumenti possono aiutarti a ridurre al minimo lo spostamento del testo:

• font-display: optional può evitare un nuovo layout, poiché il carattere web viene utilizzato solo se è disponibile al momento del layout iniziale.
• Assicurati che venga utilizzato il carattere di riserva appropriato. Ad esempio, l'utilizzo di font-family: "Google Sans", sans-serif; garantisce che venga utilizzato il carattere di riserva sans-serif del browser durante il caricamento di "Google Sans". Se non specifichi un carattere di riserva utilizzando solo font-family: "Google Sans", verrà utilizzato il carattere predefinito, che su Chrome è "Times", un carattere serif che non corrisponde al carattere predefinito sans-serif.
• Riduci al minimo le differenze di dimensioni tra il carattere di riserva e il carattere web utilizzando le nuove API size-adjust, ascent-override, descent-override e line-gap-override, come descritto nel post Fallback dei caratteri migliorati.
• L'API Font Loading può ridurre il tempo necessario per ottenere i caratteri necessari.
• Carica i caratteri web critici il prima possibile utilizzando <link rel=preload>. Un carattere precaricato avrà maggiori probabilità di soddisfare il primo paint, nel qual caso non si verifica alcuno spostamento del layout.

Leggi Best practice per i caratteri per altre best practice relative ai caratteri.

Riduci il CLS assicurandoti che le pagine siano idonee alla bfcache

Una tecnica molto efficace per mantenere bassi i punteggi CLS è assicurarsi che le pagine web siano idonee alla cache indietro/avanti (bfcache).

La cache bfcache mantiene le pagine nella memoria del browser per un breve periodo di tempo dopo che le hai abbandonate, in modo che se le riapri, vengano ripristinate esattamente come le avevi lasciate. Ciò significa che la pagina completamente caricata è disponibile immediatamente, senza spostamenti che potrebbero essere normalmente visibili durante il caricamento per uno dei motivi indicati in precedenza.

Anche se ciò potrebbe comunque significare che il caricamento iniziale della pagina comporta spostamenti del layout, quando un utente torna indietro nelle pagine non vede ripetutamente gli stessi spostamenti del layout. Dovresti sempre cercare di evitare gli spostamenti anche durante il caricamento iniziale, ma se è più difficile risolverli completamente, puoi almeno ridurre l'impatto evitando che si verifichino durante le navigazioni bfcache.

La navigazione indietro e avanti è comune su molti siti. Ad esempio, tornare a una pagina dei contenuti, a una pagina di categoria o ai risultati di ricerca.

Quando questa funzionalità è stata implementata in Chrome, abbiamo notato miglioramenti significativi del CLS.

La cache back-forward viene utilizzata per impostazione predefinita da tutti i browser, ma alcuni siti non sono idonei per la cache back-forward per una serie di motivi. Leggi la guida alla cache back-forward per saperne di più su come testare e identificare eventuali problemi che impediscono l'utilizzo della cache back-forward per assicurarti di sfruttare al meglio questa funzionalità e migliorare il punteggio CLS complessivo del tuo sito.

Conclusione

Esistono diverse tecniche per identificare e migliorare il CLS, come descritto in precedenza in questa guida. In Core Web Vitals sono previste tolleranze, quindi anche se non riesci a eliminare completamente il CLS, l'utilizzo di alcune di queste tecniche dovrebbe consentirti di ridurne l'impatto. In questo modo, potrai rispettare questi limiti e offrire un'esperienza migliore agli utenti del tuo sito web.