CLS (Cumulative Layout Shift)

Il Cumulative Layout Shift (CLS) è una metrica Core Web Vital che misura la stabilità visiva di una pagina durante il caricamento. Invece di misurare la velocità o la reattività, il CLS si concentra sugli spostamenti inattesi del contenuto visibile. Ogni volta che un elemento si muove senza interazione dell'utente, il browser registra la distanza e la dimensione dello spostamento. Questi punteggi individuali vengono raggruppati in finestre di sessione e la finestra più grande diventa il punteggio CLS della pagina. Un punteggio di 0,1 o inferiore è considerato buono, tra 0,1 e 0,25 necessita di miglioramento, e superiore a 0,25 è scarso.

Gli spostamenti inattesi del layout degradano direttamente l'esperienza utente. Un lettore che sta per toccare un pulsante potrebbe accidentalmente cliccare l'elemento sbagliato quando il contenuto salta. Chi scorre un documento potrebbe perdere completamente il punto di lettura. Queste frustrazioni aumentano la [frequenza di rimbalzo](/glossary/bounce-rate) e riducono il tempo sulla pagina. Google utilizza il CLS come uno dei tre [Core Web Vitals](/glossary/core-web-vitals) nel suo algoritmo di ranking, quindi le pagine con scarsa stabilità visiva subiscono penalità sia nel coinvolgimento che nel SEO. Per gli editori digitali che incorporano contenuti interattivi come i [flipbook](/glossary/flipbook), controllare il CLS è particolarmente importante perché gli embed di terze parti sono tra le cause più comuni di spostamenti del layout.

Il visualizzatore di FlipLink è progettato per minimizzare il CLS riservando dimensioni fisse per il contenitore del flipbook prima che il contenuto della pagina sia completamente caricato. Immagini ed elementi interattivi vengono renderizzati in spazi pre-allocati così il layout non si sposta quando gli asset arrivano. Il renderer [Three.js](/glossary/three-js) per flipbook e il visualizzatore PDF.js si inizializzano entrambi con un frame stabile, evitando che l'animazione di voltapagina causi salti nel layout. Il codice di [incorporamento responsivo](/features/sharing-and-distribution) generato da FlipLink utilizza contenitori con rapporto d'aspetto fisso, che occupano immediatamente lo spazio corretto nella pagina ospite. Questo design avvantaggia sia il visualizzatore incorporato nel vostro sito web sia la pubblicazione ospitata su go.fliplink.me.

Il CLS viene misurato usando due componenti per ogni spostamento: **impact fraction** (la percentuale del [viewport](/glossary/viewport) interessata) e **distance fraction** (quanto l'elemento si è spostato rispetto al viewport). Il punteggio di layout shift per un singolo frame è uguale a impact fraction moltiplicata per distance fraction. Gli spostamenti che avvengono entro 500 millisecondi da un input dell'utente (come un click o un tap) vengono esclusi perché l'utente si aspetta un movimento in risposta alla sua azione. Chrome DevTools, Lighthouse, PageSpeed Insights e la libreria JavaScript Web Vitals riportano tutti il CLS. I dati sul campo dal Chrome User Experience Report (CrUX) forniscono punteggi CLS reali raccolti da visitatori effettivi.

Il CLS utilizza un approccio a **finestre di sessione** per calcolare il punteggio finale. Una finestra di sessione è un gruppo di layout shift che si verificano entro un secondo l'uno dall'altro, con una durata massima della finestra di cinque secondi. Il punteggio CLS della pagina è la singola finestra di sessione più grande, non la somma di tutti gli spostamenti. Questo metodo è stato aggiornato nel 2021 per riflettere meglio le pagine a lunga durata e le applicazioni a pagina singola dove il contenuto si carica progressivamente. Le cause comuni di CLS elevato includono immagini senza attributi larghezza e altezza, annunci o banner iniettati dinamicamente, web font che provocano un flash di testo non stilizzato (FOUT) e embed di terze parti che si caricano in modo asincrono senza spazio riservato.

**"Il CLS conta solo durante il caricamento iniziale della pagina."** Il CLS traccia gli spostamenti durante l'intero ciclo di vita della pagina, compresi quelli provocati da immagini caricate in [lazy loading](/glossary/lazy-loading), contenuti a scorrimento infinito o elementi inseriti dinamicamente. Le applicazioni a pagina singola che sostituiscono il contenuto durante la navigazione possono accumulare CLS se le transizioni non sono gestite con attenzione. **"L'obiettivo è un punteggio CLS di 0."** Anche se lo zero è ideale, un punteggio di 0,1 o inferiore è considerato buono. Inseguire lo zero assoluto può portare a un'eccessiva ingegnerizzazione. L'obiettivo pratico è mantenere gli spostamenti impercettibili per gli utenti. **"Il CLS misura la velocità di caricamento della pagina."** Il CLS non ha nulla a che fare con la velocità. Una pagina può caricarsi in meno di un secondo e avere comunque un CLS terribile se gli elementi saltano durante il rendering. La velocità è misurata dal [LCP](/glossary/lcp) e da altre metriche temporali, non dal CLS.