CLS (Cumulative Layout Shift)

Che cos’è il CLS (Cumulative Layout Shift)?

Il CLS misura quanto gli elementi visibili si spostano in modo imprevisto mentre una pagina si carica o viene utilizzata. Il punteggio è privo di unità di misura ed è calcolato moltiplicando la impact fraction (frazione di impatto, ovvero quanta parte della schermata viene influenzata) per la distance fraction (frazione di distanza, ovvero di quanto si spostano gli elementi). Il CLS è uno dei tre Core Web Vitals insieme a LCP e INP, e un buon punteggio è pari o inferiore a 0.1 al 75° percentile — qualsiasi valore superiore a 0.25 è considerato scarso.

Perché il CLS (Cumulative Layout Shift) è importante?

I salti di layout sono direttamente dannosi in un negozio online: un acquirente sta per toccare “Acquista”, ma un banner o un’immagine che si carica in ritardo sposta il pulsante e il tocco finisce su qualcos’altro. Questo crea frustrazione, clic errati e sfiducia proprio prima della conversione. Il CLS fa anche parte dei segnali di esperienza sulle pagine di Google, quindi valori costantemente elevati possono penalizzare il posizionamento. Una pagina stabile sembra più veloce e professionale — anche quando la velocità grezza è identica.

Casi d’uso comuni

• Immagini e video senza dimensioni. Senza width/height o aspect-ratio, il browser non può riservare spazio in anticipo, quindi il contenuto salta al caricamento del file multimediale — da abbinare a un testo alternativo alt text corretto.
• Banner dei cookie e popup. Il contenuto inserito nella parte superiore o centrale della pagina spinge verso il basso tutto ciò che si trova al di sotto.
• Widget delle app. Recensioni, blocchi “visti di recente” e offerte di upsell che si caricano dopo il resto della pagina modificano il layout.
• Font web. Il passaggio da un font di fallback a quello definitivo può causare la ridisposizione e lo spostamento del testo.
• Annunci e iframe senza spazio riservato nell’area above the fold.

La prospettiva di Shopify

In Shopify, la maggior parte dei salti di layout deriva da app e modifiche ai temi piuttosto che dalla piattaforma principale. Riserva sempre lo spazio per i blocchi dinamici, imposta dimensioni fisse per le immagini dei prodotti e carica i banner dei cookie e i popup in modo che non spostino il contenuto. Misura l’effetto con PageSpeed Insights o Lighthouse sia su mobile che su desktop, e tieni d’occhio il report sulla velocità alla voce Negozio Online nel pannello di amministrazione Shopify, che si basa sui dati di Google Lighthouse.