CLS (Cumulative Layout Shift)
Definizione breve
Il CLS è il punteggio di stabilità Core Web Vitals che misura quanto gli elementi visivi si spostano in modo inatteso durante il caricamento.
Quando un'immagine o uno spazio pubblicitario si carica in ritardo e spinge il testo verso il basso mentre la pagina si rende, quel movimento conta ai fini del CLS. Il punteggio moltiplica la dimensione dell'area spostata per la distanza percorsa, e l'obiettivo è un valore vicino allo zero.
Compare in PageSpeed Insights e Search Console. La soglia ufficiale è 0,1: sotto è buono, tra 0,1 e 0,25 va migliorato, oltre è scarso. Riservare in anticipo lo spazio per le immagini previene in gran parte questo spostamento.
Viene spesso confuso con la velocità di pagina, ma il CLS riguarda la stabilità, non la velocità; una pagina che carica in fretta può comunque ottenere un punteggio scarso se gli elementi si muovono durante il rendering.
L'errore più comune è inserire un banner per il consenso ai cookie o una pubblicità in cima alla pagina dopo che è già stata renderizzata, il che spinge verso il basso tutto il contenuto sottostante e peggiora molto il CLS. L'approccio corretto è riservare in anticipo un'altezza fissa per questi elementi o sovrapporli, in modo che lei non sposti mai il contenuto già mostrato.
Perché conta
Se un pulsante si sposta proprio mentre il visitatore sta per toccarlo, tocca l'elemento sbagliato, generando sfiducia e abbandono. Tenere basso il CLS evita clic errati nei moduli, nel carrello e nel checkout.
Esempio illustrativo
Nella pagina prezzi di una catena di spa, un banner a caricamento lento spingeva il testo verso il basso e i visitatori toccavano per errore un altro pacchetto; fissare un'altezza per quello spazio ha fermato lo spostamento.
