Ottimizza Cumulative Layout Shift

Scopri come evitare improvvise variazioni del layout per migliorare l'esperienza utente

Cumulative Layout Shift (CLS) è una delle tre metriche Core Web Vitals. Misura l'instabilità dei contenuti combinando la quantità di contenuti visibili spostati nell'area visibile con la distanza degli elementi interessati.

Le variazioni del layout possono distrarre gli utenti. Immagina di aver iniziato a leggere un articolo quando, all'improvviso, gli elementi si spostano nella pagina, disorientandoti e costringendoti a ritrovare il punto in cui avevi interrotto la lettura. Questo è molto comune sul web, ad esempio quando leggi le notizie o cerchi di fare clic sui pulsanti "Cerca" o "Aggiungi al carrello". Esperienze del genere sono visivamente sconvolgenti e frustranti. Spesso si verificano quando gli elementi visibili vengono spostati forzatamente perché un altro elemento è stato aggiunto improvvisamente alla pagina o ne è stato modificato il ridimensionamento.

Per offrire una buona esperienza utente, i siti devono cercare di ottenere una CLS pari o inferiore a 0,1 per almeno il 75% delle visite alle pagine.

A differenza delle altre metriche di Core Web Vitals, che sono valori basati sul tempo misurati in secondi o millisecondi, il punteggio CLS è un valore senza unità basato su un calcolo della quantità di contenuti che si spostano e della distanza.

In questa guida illustreremo l'ottimizzazione delle cause comuni delle variazioni del layout.

Le cause più comuni di un CLS basso sono:

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

Informazioni sulle cause dei cambiamenti di layout

Prima di iniziare a esaminare le soluzioni ai problemi comuni relativi alla CLS, è importante comprendere il tuo punteggio CLS e da dove provengono le variazioni.

CLS negli strumenti di laboratorio rispetto al campo

È comune sentire gli sviluppatori pensare che il CLS misurato dal report sull'esperienza utente di Chrome (CrUX) non sia corretto perché non corrisponde al CLS misurato utilizzando gli Strumenti per sviluppatori di Chrome o altri strumenti di laboratorio. Gli strumenti Web Performance Lab come Lighthouse potrebbero non mostrare la metrica CLS completa di una pagina perché in genere eseguono un semplice caricamento della pagina per misurare alcune metriche delle prestazioni sul web e fornire alcune indicazioni (sebbene i flussi utente di Lighthouse ti consentano di effettuare misurazioni oltre il controllo predefinito del caricamento pagina).

CrUX è il set di dati ufficiale del programma Web Vitals e, per questo motivo, il CLS viene misurato per l'intera durata della pagina e non solo durante il caricamento iniziale della pagina, come misurano in genere gli strumenti di laboratorio.

Le variazioni del 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 variazioni del layout anche dopo il caricamento iniziale. Molte variazioni post-caricamento possono verificarsi in seguito a un'interazione dell'utente e quindi verranno escluse dal punteggio CLS in quanto sono variazioni previste, purché si verifichino entro 500 millisecondi da tale interazione.

Tuttavia, altre variazioni post-caricamento inaspettate dall'utente potrebbero essere incluse se non si è verificata un'interazione idonea, ad esempio se si scorre la pagina più a fondo e si caricano contenuti caricati con il metodo lazy, causando delle variazioni. Altre cause comuni della metrica CLS post-caricamento riguardano 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 da un URL nella sezione "Scopri com'è l'esperienza dei tuoi utenti reali" sia il CLS di caricamento basato su 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 caricamento del CLS

Quando i punteggi CLS di CrUX e Lighthouse di PageSpeed Insights sono in linea generale, in genere indica che esiste un problema di CLS di caricamento rilevato da Lighthouse. In questo caso Lighthouse aiuterà con due controlli per fornire maggiori informazioni sulle immagini che generano CLS a causa di larghezza e altezza mancanti e per elencare tutti gli elementi che si sono spostati per il caricamento pagina insieme al relativo contributo. Puoi visualizzare questi controlli filtrando in base ai controlli CLS:

di Gemini Advanced.

Il riquadro Rendimento in DevTools evidenzia anche le variazioni del layout nella sezione Esperienza. La visualizzazione Riepilogo per un record Layout Shift include il punteggio cumulativo dello spostamento del layout, nonché un overlay rettangolare che mostra le regioni interessate. Questo è particolarmente utile per ottenere ulteriori dettagli sui problemi di CLS di caricamento, poiché può essere facilmente replicato con un profilo di prestazioni del ricaricamento.

Identificare i problemi relativi al CLS post-caricamento

Un disaccordo tra i punteggi CLS di CrUX e Lighthouse spesso indica la CLS post-caricamento. Queste variazioni possono essere difficili da rilevare senza dati sul campo. Per informazioni sulla raccolta dei dati sul campo, consulta Misurare gli elementi CLS nel campo.

L'estensione di Chrome Web Vitals può essere utilizzata per monitorare la metrica CLS quando interagisci con una pagina, in un display a sovrimpressione o nella console, dove puoi ottenere maggiori dettagli sopra gli elementi modificati.

In alternativa all'utilizzo dell'estensione, puoi sfogliare la tua pagina web mentre registri le variazioni del layout utilizzando un Performance Observer incollato nella console.

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

Per ulteriori informazioni, consulta Eseguire il debug dei cambiamenti di layout.

Dopo aver identificato le cause comuni della CLS, puoi utilizzare anche la modalità di flusso utente relativo ai periodi di tempo di Lighthouse per garantire che i flussi utente tipici non regrediscano introducendo variazioni del layout.

Misurare gli elementi CLS nel campo

Il monitoraggio del CLS sul campo può essere fondamentale per determinare in quali circostanze si verifica e restringere le possibili cause. Come la maggior parte degli strumenti di laboratorio, gli strumenti sul campo misurano solo gli elementi che si sono spostati, ma in genere forniscono informazioni sufficienti per identificare la causa. Puoi anche utilizzare le misurazioni dei campi CLS per determinare quali problemi devono essere risolti con la massima priorità.

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

Cause comuni della CLS

Una volta identificate le cause della metrica CLS, puoi iniziare a lavorare per risolverli. In questa sezione illustreremo alcuni dei motivi più comuni della CLS e cosa puoi fare per evitarli.

Immagini senza dimensioni

Includi sempre gli attributi delle dimensioni width e height nelle immagini e negli elementi video. In alternativa, prenota lo spazio richiesto con CSS aspect-ratio o un'altra soluzione simile. Questo approccio garantisce che il browser possa allocare la quantità corretta di spazio nel documento durante il caricamento dell'immagine.

di Gemini Advanced.

di Gemini Advanced.

Cronologia degli attributi width e height nelle immagini

All'inizio del web, gli sviluppatori aggiungevano gli attributi width e height ai tag <img> per garantire che fosse allocato spazio sufficiente nella pagina prima che il browser iniziasse a recuperare le immagini. In questo modo, il reflow e il nuovo layout vengono 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" garantirebbero che il browser riservi un'area di 640 x 360 nel layout della pagina. L'immagine si estenderebbe 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 a utilizzare il 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 finché il browser non inizia a scaricarla e non può determinarne le dimensioni. Quando le immagini vengono caricate, il testo si sposta verso il basso nella pagina per far loro spazio, creando un'esperienza utente confusa e frustrante.

È qui che entrano in gioco le proporzioni. Le proporzioni di un'immagine corrispondono a quelle tra larghezza e altezza. In genere, viene espresso sotto forma di due numeri separati dai due punti (ad esempio, 16:9 o 4:3). Per le proporzioni x:y, l'immagine è larga x unità e alta y unità.

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

• Se la foto cucciolo.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 l'impostazione delle dimensioni delle immagini

Poiché i browser moderni impostano il formato predefinito delle immagini in base agli attributi width e height di un'immagine, puoi evitare i cambiamenti di 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 le proporzioni predefinite in base agli attributi width e height esistenti dell'elemento.

In questo modo vengono calcolate le proporzioni in base agli attributi width e height prima del caricamento dell'immagine. Fornisce queste informazioni all'inizio del calcolo del layout. Non appena a un'immagine viene impostata una determinata larghezza (ad esempio width: 100%), le proporzioni vengono utilizzate per calcolare l'altezza.

Il valore aspect-ratio viene calcolato dai principali browser durante l'elaborazione dell'HTML, anziché mediante un foglio di stile dello user agent predefinito (vedi questo post per un approfondimento sul perché), quindi il valore viene visualizzato in modo leggermente diverso. Ad esempio, Chrome lo mostra così nella sezione Stili del riquadro Elementi:

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

Safari funziona in modo simile, utilizzando un'origine di stile Attributi HTML. Firefox non mostra affatto il valore aspect-ratio calcolato nel riquadro Ispezione, 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, ciò provoca comunque una certa variazione del layout dopo il caricamento dell'immagine, assicurando l'utilizzo delle proporzioni dell'immagine quando diventa disponibile, nel caso in cui il codice HTML non sia corretto. Anche se le proporzioni effettive sono diverse da quelle predefinite, causa comunque una minore variazione del layout rispetto alle dimensioni predefinite 0 x 0 di un'immagine senza dimensioni fornite.

Per un'analisi approfondita delle proporzioni e ulteriori informazioni sulle immagini adattabili, consulta Caricamento delle pagine senza problemi con le proporzioni dei contenuti multimediali.

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

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

E le immagini adattabili?

Quando utilizzi le immagini responsive, srcset definisce le immagini che consenti al browser di selezionare e le dimensioni di ciascuna immagine. Per assicurarti che gli attributi di larghezza e altezza <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"
/>

Anche le proporzioni delle immagini possono variare in base alla direzione artistica. Ad esempio, potresti includere un'immagine ritagliata per viewport stretti e visualizzare l'immagine completa su 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 tardi

Le immagini non sono l'unico tipo di contenuti che può causare variazioni del layout. Annunci, contenuti incorporati, 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 fattori che contribuiscono maggiormente alle variazioni del layout sul web. Le reti pubblicitarie e i publisher supportano spesso le dimensioni degli annunci dinamici. Le dimensioni degli annunci aumentano il rendimento/le entrate grazie a tassi di clic più elevati e a un maggior numero di annunci in competizione nell'asta. Purtroppo, ciò può portare a un'esperienza utente non ottimale a causa degli annunci che spingono verso il basso nella pagina i contenuti visibili che stai visualizzando.

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

Le tecniche per gestirli sono tutte simili. Le principali differenze riguardano il livello di controllo che hai sui contenuti che verranno inseriti. Se vengono inseriti da terze parti, come un partner pubblicitario, potresti non conoscere le dimensioni esatte dei contenuti che verranno inseriti né essere in grado di controllare eventuali cambiamenti di layout all'interno di questi incorporamenti.

Riserva spazio ai contenuti caricati in ritardo

Quando inserisci contenuti con caricamento tardivo nel flusso di contenuti, puoi evitare gli spostamenti del layout riservando lo spazio necessario nel layout iniziale.

Un approccio è aggiungere una regola CSS min-height per riservare spazio oppure, per i contenuti adattabili come gli annunci, utilizzare la proprietà CSS aspect-ratio in modo simile al modo in cui i browser la utilizzano automaticamente per le immagini con le dimensioni fornite.

Potresti dover tenere conto di lievi differenze nelle dimensioni degli annunci o dei segnaposto tra i 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 lo spazio esatto necessario per eliminare completamente il cambiamento di layout. Se viene pubblicato un annuncio più piccolo, un publisher può applicare uno stile a un contenitore più grande per evitare cambiamenti di 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.

In alternativa, puoi impostare la dimensione iniziale su quella 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 principale di espandersi in base alle necessità, riducendo al contempo l'impatto delle variazioni del layout rispetto alle dimensioni predefinite di 0 px di un elemento vuoto.

Prova a 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 volume di CLS pari a quello dell'inserimento di contenuti.

Posiziona i contenuti caricati in ritardo più in basso nell'area visibile

I contenuti inseriti dinamicamente più vicino alla parte superiore dell'area visibile di solito causano variazioni del layout maggiori rispetto ai contenuti inseriti più in basso nell'area visibile. Tuttavia, l'inserimento di contenuti in qualsiasi punto dell'area visibile causa comunque un certo spostamento. Se non puoi riservare spazio per i contenuti inseriti, ti consigliamo di inserirli in un secondo momento nella pagina per ridurre l'impatto sulla relativa CLS.

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

Probabilmente hai riscontrato cambiamenti di layout a causa dell'interfaccia utente che viene visualizzata nella parte superiore o inferiore del viewport 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 inviti dell'interfaccia utente, riserva in anticipo spazio sufficiente nell'area visibile (ad esempio, utilizzando un segnaposto o una bozza di interfaccia utente) in modo che, quando viene caricato, i contenuti della pagina non si spostino inaspettatamente. In alternativa, assicurati che l'elemento non faccia parte del flusso del documento sovrapponendo i contenuti dove opportuno. Per ulteriori consigli su questi tipi di componenti, consulta il post sulle best practice per le notifiche relative ai cookie.

In alcuni casi, l'aggiunta dinamica dei 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 pubblicato. In questi casi, esistono diversi modi per evitare cambiamenti imprevisti del layout:

• Sostituisci i vecchi contenuti con quelli nuovi all'interno di un contenitore di dimensioni fisse oppure utilizza un carosello e rimuovi i vecchi contenuti dopo la transizione. Ricorda di disattivare i link e i controlli fino al completamento della transizione per evitare clic o tocchi accidentali durante l'importazione dei nuovi contenuti.
• Chiedi all'utente di avviare il caricamento di nuovi contenuti in modo che non sia 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 del layout che si verificano entro 500 millisecondi dall'input dell'utente non vengono conteggiate ai fini della metrica CLS.
• Carica facilmente i contenuti fuori dallo schermo e sovrapponi una notifica all'utente che li informa della loro disponibilità (ad esempio, con un pulsante "Scorri verso l'alto").

Animazioni

Le modifiche ai valori delle proprietà CSS possono richiedere una reazione del browser. Alcuni valori, come box-shadow e box-sizing, attivano il nuovo layout, la pittura e la composizione. La modifica delle proprietà top e left provoca variazioni del layout anche quando l'elemento spostato si trova su un livello separato. Evita di utilizzare queste proprietà per creare animazioni.

Altre proprietà CSS possono essere modificate senza attivare il nuovo layout. Ad esempio, è possibile utilizzare le animazioni transform per tradurre, ridimensionare, 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 composte non causano il re-layout. Per saperne di più su quali proprietà CSS attivano le variazioni del layout, consulta Animazioni ad alte prestazioni.

Caratteri web

In genere, lo scaricamento e il rendering dei caratteri web vengono gestiti in uno dei due modi seguenti prima che il carattere web venga scaricato:

• Il carattere di riserva viene scambiato con il carattere web, causando un Flash of Unstyled Text (FOUT).
• "Invisibile" il testo viene visualizzato utilizzando il carattere di riserva fino a quando non è disponibile un carattere web e il testo non viene reso visibile (FOIT, ovvero il lampo di testo invisibile).

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

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

• font-display: optional può evitare il relayout, in quanto 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 usando solo font-family: "Google Sans", verrà utilizzato il carattere predefinito, che su Chrome è "Times", un font Serif che rappresenta una corrispondenza peggiore rispetto al carattere sans-serif predefinito.
• 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 Caratteri di riserva migliorati.
• L'API di caricamento dei caratteri 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 ha maggiori possibilità di visualizzare la prima visualizzazione, nel qual caso il layout non cambia.

Leggi le best practice per i caratteri per scoprire altre best practice in merito.

Riduci la metrica CLS garantendo che le pagine siano idonee per bfcache

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

La bfcache conserva le pagine nella memoria del browser per un breve periodo di tempo dopo che hai eseguito la navigazione, quindi se torni a visitarle, verranno ripristinate esattamente come le avevi lasciate. Ciò significa che la pagina completamente caricata è immediatamente disponibile, senza eventuali variazioni che normalmente potrebbero essere visualizzate durante il caricamento per uno dei motivi indicati in precedenza.

Sebbene questo possa potenzialmente significare che il caricamento iniziale della pagina presenta ancora cambiamenti di layout, quando un utente torna alle pagine precedenti non vede più gli stessi cambiamenti di layout ripetutamente. Dovresti sempre cercare di evitare i cambiamenti anche al caricamento iniziale, ma se il problema è più difficile da risolvere completamente, puoi almeno ridurne l'impatto evitandoli in qualsiasi navigazione della bfcache.

Le navigazioni avanti e indietro sono comuni su molti siti. ad esempio tornare a una pagina di contenuti, a una pagina di categoria o ai risultati di ricerca.

Quando questa funzionalità è stata implementata in Chrome, abbiamo riscontrato notevoli miglioramenti nella funzionalità CLS.

La cache bf viene utilizzata per impostazione predefinita da tutti i browser, ma alcuni siti non sono idonei per la cache bf per una serie di motivi. Leggi la guida a bfcache per ulteriori dettagli su come testare e identificare eventuali problemi che impediscono l'utilizzo di bfcache per assicurarti di sfruttare appieno questa funzionalità al fine di migliorare il tuo punteggio CLS complessivo per il tuo sito.

Conclusione

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