Ottimizza Cumulative Layout Shift

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

CLS (Cumulative Layout Shift) è 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 di spostamento 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". Queste esperienze sono visivamente spiacevoli 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 dovrebbero fare in modo di avere un CLS pari o inferiore a 0,1 per almeno il 75% delle visite alla pagina.

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 come ottimizzare le cause comuni dei cambiamenti di layout.

Le cause più comuni di un CLS basso sono:

• Immagini senza dimensioni.
• Annunci, embed 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 CLS più comuni, è importante comprendere il punteggio CLS e l'origine delle 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 di Web Performance Lab come Lighthouse potrebbero non mostrare il CLS completo di una pagina perché in genere eseguono un semplice caricamento della pagina per misurare alcune metriche sul rendimento del web e fornire alcune indicazioni (anche se i flussi utente di Lighthouse consentono di misurare oltre il controllo del caricamento della pagina predefinito).

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 di layout sono molto comuni durante il caricamento della pagina, poiché 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 dell'utente e, pertanto, verranno escluse dal punteggio CLS in quanto variazioni previste, purché si verifichino entro 500 millisecondi da quell'interazione.

Tuttavia, potrebbero essere inclusi altri cambiamenti post-caricamento imprevisti dall'utente se non è stata eseguita un'interazione idonea, ad esempio se scorri ulteriormente la pagina e vengono caricati contenuti con caricamento differito, causando cambiamenti. 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 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 ti aiuterà con due controlli per fornire ulteriori informazioni sulle immagini che causano un CLS elevato a causa della mancanza di larghezza e altezza e per elencare tutti gli elementi che si sono spostati durante il caricamento della pagina, nonché il loro contributo al CLS. Puoi visualizzare questi controlli filtrando in base ai controlli CLS:

Il riquadro Prestazioni in DevTools evidenzia anche i cambiamenti di 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

La mancata corrispondenza tra i punteggi CLS di CrUX e Lighthouse indica spesso un 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 il CLS mentre interagisci con una pagina, in un popup o nella console, dove puoi ottenere ulteriori dettagli sugli elementi spostati.

In alternativa all'utilizzo dell'estensione, puoi sfogliare la pagina web mentre registri le modifiche al layout utilizzando un osservatore del rendimento incollato nella console.

Dopo aver configurato il monitoraggio dei turni, puoi provare a replicare eventuali problemi relativi al 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 premuto il cursore sopra di essi è un'altra causa comune del CLS post-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 dei cambiamenti di layout.

Dopo aver identificato le cause comuni del CLS, puoi utilizzare anche la modalità di flusso utente per intervalli di tempo di Lighthouse per assicurarti che i flussi utente tipici non regrediscano introducendo cambiamenti di 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 del campo CLS per determinare quali problemi hanno la priorità più alta da risolvere.

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 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 illustreremo alcuni dei motivi più comuni per cui si verifica il 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.

Cronologia degli attributi width e height nelle immagini

All'inizio del web, gli sviluppatori aggiungevano gli attributi width e height ai tag <img> per assicurarsi che nella pagina fosse allocato spazio sufficiente 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 le unità di misura. Queste dimensioni in "pixel" garantirebbero che il browser riservi un'area di 640 x 360 nel layout della pagina. L'immagine veniva allungata per adattarsi a questo spazio, indipendentemente dal fatto che le dimensioni effettive corrispondessero o meno.

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 sono il rapporto tra la larghezza e l'altezza. È comune vederlo espresso come due numeri separati da due punti (ad esempio 16:9 o 4:3). Per un formato x:y, l'immagine ha una larghezza di x unità e un'altezza di y unità.

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

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

La conoscenza delle 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 una proporzione predefinita in base agli attributi width e height esistenti dell'elemento.

Viene calcolato un formato 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.

Questo valore aspect-ratio viene calcolato dai principali browser durante l'elaborazione dell'HTML, anziché con uno stile sheet User-Agent predefinito (leggi questo post per scoprire il motivo), pertanto 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 si comporta in modo simile, utilizzando un'origine stile Attributi HTML. Firefox non mostra affatto questo aspect-ratio calcolato nel riquadro Strumento di ispezione, ma lo utilizza per il layout.

La parte auto del codice precedente è importante perché le dimensioni dell'immagine sostituiscono le proporzioni predefinite dopo il download dell'immagine. Se le dimensioni dell'immagine sono diverse, si verifica comunque un leggero cambiamento di layout dopo il caricamento dell'immagine, ma viene garantito 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 0 x 0 di un'immagine per la quale non sono state specificate dimensioni.

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%;
}

Che dire delle 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, contenuti incorporati e altri contenuti caricati in un secondo momento

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 principali fattori che contribuiscono 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, questo può portare a un'esperienza utente non ottimale a causa degli annunci che spingono verso il basso i contenuti visibili che stai visualizzando.

I widget incorporabili ti consentono di includere nella tua pagina contenuti web portatili, come video di YouTube, mappe di Google Maps e post di social media. Tuttavia, spesso questi widget non sono a conoscenza delle dimensioni dei contenuti prima del caricamento. Di conseguenza, le piattaforme che offrono l'inserimento non riservano sempre spazio per i propri widget, il che causa cambiamenti nel layout al momento del caricamento.

Le tecniche per gestirle 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.

Riservare spazio per i contenuti con caricamento tardivo

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 differenze sottili nelle dimensioni degli annunci o dei segnaposto nei vari fattori di forma utilizzando le query sui media.

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 le dimensioni iniziali su quelle più piccole che verranno utilizzate 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 aumento del CLS pari a quello causato dall'inserimento di contenuti.

Posiziona i contenuti con caricamento tardivo più in basso nell'area visibile

I contenuti iniettati dinamicamente più vicini alla parte superiore dell'area visibile di solito causano cambiamenti di layout maggiori rispetto ai contenuti iniettati 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 iniettati, 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 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 mostrare questi tipi di funzionalità dell'interfaccia utente, prenota in anticipo spazio sufficiente nel viewport (ad esempio utilizzando un segnaposto o un'interfaccia utente di base) in modo che, al caricamento, i contenuti della pagina non si spostino in modo imprevisto. In alternativa, assicurati che l'elemento non faccia parte del flusso del documento sovrapponendo i contenuti, se opportuno. Per ulteriori consigli su questi tipi di componenti, consulta il post 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 nel layout:

• Sostituisci i vecchi contenuti con i nuovi all'interno di un contenitore di dimensioni fisse o 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 dei nuovi contenuti, in modo che non sia sorpreso dal passaggio (ad esempio con un pulsante "Carica altro" o "Aggiorna"). Ti consigliamo di eseguire il pre-caricamento dei 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 del CLS.
• Carica facilmente i contenuti fuori dallo schermo e sovrapponi un avviso 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. Anche la modifica delle proprietà top e left causa cambiamenti nel layout, anche quando l'elemento spostato si trova su un proprio livello. Evita di applicare l'animazione utilizzando queste proprietà.

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 composite non causano il nuovo layout. Per scoprire di più sulle proprietà CSS che attivano i cambiamenti di 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).
• Il testo "invisibile" viene visualizzato utilizzando il carattere di riserva finché non è disponibile un carattere web e il testo viene reso visibile (FOIT, flash 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 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 perché il carattere web viene utilizzato solo se è disponibile al momento del layout iniziale.
• Assicurati di utilizzare 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 con grazie che è una corrispondenza peggiore del 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 avrà maggiori probabilità di soddisfare il primo rendering, nel qual caso non si verificano spostamenti del layout.

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

Riduci il CLS assicurandoti che le pagine siano idonee per la cache bf

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 è disponibile immediatamente, senza gli eventuali spostamenti che potrebbero verificarsi normalmente 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 dei contenuti, a una pagina di categoria o ai risultati di ricerca.

Quando questa funzionalità è stata implementata in Chrome, abbiamo riscontrato miglioramenti notevoli del 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 alla cache bfcache per ulteriori dettagli su come testare e identificare eventuali problemi che impediscono l'utilizzo della cache bfcache 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. 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.