Focus sul CLS: Cos’è esattamente il Cumulative Layout Shift

Un sito che accoglie correttamente gli utenti su qualunque schermo è un sito che ha di certo una marcia in più rispetto alla concorrenza.

Uno dei problemi che possono sorgere mentre si cerca di gestire il layout è il cosiddetto Cumulative Layout Shift o CLS. Le cause che provocano questo problema, il cui impatto è anche uno dei Core web vitals di Google, sono diverse. Vanno esaminate tutte, risolte tutte e stanate il prima possibile soprattutto. Cominciamo però con una definizione.

Che cosa significa Cumulative Layout Shift?

La traduzione di Cumulative Layout Shift è semplicemente spostamento cumulativo del layout. Significa nei fatti che una parte del layout della pagina si sposta rispetto alla posizione iniziale per accomodare alcuni elementi che, per motivi vari, si caricano in ritardo.

Un esempio classico è quando stai visitando un sito web che ha delle immagini e le immagini si caricano più tardi rispetto ai testi e ai titoli e quindi poi, nel momento in cui appaiono, tutto deve scartare verso il basso.

Non è una bella cosa da vedere e infatti è considerato tra i fattori di ranking di Google dal 2021. Di solito a produrre questo effetto di spostamento sono gli elementi visivi statici e animati, font particolari e contenuti dinamici.

Occorre tenere il più basso possibile il fattore CLS, in modo tale che l’esperienza finale dell’utente sia la migliore possibile. Perché non sembra ma anche il fatto che una pagina web si carichi e poi ci ripensi e sposti degli elementi infastidisce.

Immagina di stare leggendo il testo, che poi è quello che ti interessa, e di vederlo improvvisamente scomparire più sotto.

Potresti non essere portato immediatamente a cambiare pagina e a uscire dal sito ma la sensazione è che qualcosa non stia funzionando come dovrebbe. Altre situazioni che generano problemi e che sono frutto del Cumulative Layout Shift si verificano nei form.

Ti sarà sicuramente capitato almeno una volta di voler cliccare su una opzione e di vedere improvvisamente accendersi un’altra opzione solo perché, nel tempo in cui hai letto e preso una decisione, si è caricato un altro spazio che ha spostato gli elementi attivi in tempo reale sotto il tuo mouse.

Questi cambiamenti imprevisti non sono di certo piacevoli. A seconda di quello che provoca il Cumulative Layout Shift le soluzioni sono diverse ma sono per lo più a livello di codice. Cominciando con il problema più facile da gestire vediamo cosa fare per le immagini.

Se il Cumulative Layout Shift è colpa delle foto

Il problema degli elementi visivi, foto e video, è che devono essere sempre belli, centrati rispetto al layout, delle dimensioni corrette a prescindere dallo spazio che c’è a disposizione.

Il che significa anche che nella parte dell’html occorre curare bene gli attributi, perché lo spazio occupato dalle immagini o dai video sia subito calcolato e occupato nel più breve tempo possibile. Per risolvere un problema CLS dovuto alle immagini devi quindi innanzitutto inserire gli attributi di altezza e larghezza all’interno del tag img.

Con le informazioni riguardo le misure dell’immagine che deve apparire, il caricamento lascia uno spazio adeguato e quindi l’utente può capire subito dove si trova l’immagine e dove si trova il testo.

Quando il problema è il contenuto dinamico

Quando all’interno di un layout messo al lavoro dentro una pagina si inseriscono alcuni contenuti dinamici, per esempio i post dai social, c’è sempre l’incognita di quanto spazio questi post debbano occupare in altezza.

Rispetto alle immagini, il problema di caricamento e di shift degli altri contenuti può essere meno sentito (nessuno mette un post social in apertura) ma comunque da valutare e soprattutto da risolvere. Anche in questo caso la soluzione è all’interno del CSS. Non potendo però prevedere esattamente quale sarà lo spazio occupato in altezza quello che puoi fare è indicare uno spazio minimo in pixel.

In questo modo, quando la pagina si carica ci sarà già una porzione dedicata al post e quindi l’eventuale sorpresa e lo spostamento degli altri elementi sarà meno evidente per l’utente. Questa soluzione funziona anche se ha un piccolo problema: dando una grandezza specifica alla finestra, se il post social occupa più spazio gli utenti si troveranno con una barra di scorrimento laterale.

Non il massimo della comodità per quello che riguarda l’esperienza degli utenti ma è di certo sempre meglio che veder tutto rotolare più giù mentre si sta leggendo. Una seconda alternativa può essere quella di non dare una regola specifica di altezza allo spazio dedicato al post ma di dare una misura media da inserire all’interno del div tag.

Il problema è alla font

Anche l’utilizzo di alcuni font specifici, per esempio per i titoli o i sottotitoli, può provocare un problema di Cumulative Layout Shift. Nello specifico quello che si può verificare è un flash of invisible text. La soluzione è di nuovo all’interno del CSS in cui vanno inserite regole che impediscono al browser di cambiare il font da quello di sistema a quello scelto da chi ha prodotto Il sito web prima che tutto si sia caricato a dovere.

Gestire un problema Cumulative Layout Shift con i font però non è facile anche perché parte della soluzione dipende da quanto è veloce la connessione attraverso cui viene caricato il sito. Se non c’è sufficiente banda, è possibile che l’utente sperimenti un evidente cambio di font da quello di sistema a quello scelto come font del sito web.

La situazione migliora se la connessione è abbastanza veloce da permettere il caricamento del font del sito web abbastanza rapidamente da sostituire in corsa il font di default. Un motivo in più per avere un sito leggero e che si carica velocemente: dando spazio agli elementi lenti l’esperienza complessiva ne guadagna.

Spazio alla pubblicità

Anche gli spazi pubblicitari che si caricano sui siti web possono provocare uno slittamento degli altri elementi. Come qualunque altra cosa che si trova sul tuo sito WordPress, anche gli spazi pubblicitari devono essere caricati.

E purtroppo per le pubblicità le soluzioni vanno trovate sul campo. Perché in alcuni casi può funzionare l’indicazione a livello di codice dello spazio che la pubblicità dovrà occupare ma questo spazio deve essere calcolato in maniera ottimale da non tagliare l’immagine o l’animazione e da non lasciare troppo spazio rispetto al testo.