Cos'e CLS
Cumulative Layout Shift quantifica gli spostamenti inattesi degli elementi visibili durante la vita della pagina. E uno dei tre Core Web Vitals e impatta direttamente l'esperienza utente: nessuno apprezza un pulsante che si sposta proprio mentre stiamo per cliccarlo. Soglia ottima: inferiore a 0.1.
Come si calcola
CLS = impact fraction (area viewport interessata dallo shift) moltiplicato per distance fraction (distanza massima dello spostamento). Si somma tutti gli shift inattesi in una session window di 5 secondi (con max 1 secondo tra shift). Si prende la session window con score più alto.
Cause principali di CLS
Immagini senza width/height. Annunci, embed, iframe senza dimensioni riservate. Contenuti iniettati dinamicamente sopra l'esistente (banner cookie, notifiche). Font web che causano FOUT/FOIT con dimensioni diverse. Animazioni che modificano layout properties (top, left, width).
Dimensioni esplicite
Specifica sempre width e height su img e video, anche se usi CSS responsive. Il browser calcola aspect-ratio automaticamente e riserva spazio. Per elementi senza dimensioni note, usa CSS aspect-ratio: 16/9 o min-height fissa.
Font web e CLS
Usa font-display: swap o font-display: optional. Preload del font woff2. Considera size-adjust, ascent-override, descent-override per matchare metriche font fallback e font web, eliminando shift al swap. Tool come Fontaine automatizzano questo.
Animazioni e contenuti dinamici
Animare solo transform e opacity (no layout reflow). Per banner e modali, usare position fixed/absolute. Per annunci dinamici, riservare spazio con placeholder. Per skeleton screen, mantenere stessa dimensione del contenuto finale. Mai inserire contenuti sopra contenuti esistenti, sempre sotto o sostituire.
Hai bisogno di aiuto?
Se vuoi un sito veloce ottimizzato dal team di G Tech Group, scrivici tramite il modulo di contatto.