Cos’è il cumulative layout shift e come migliorarlo

Postato in data 10 Maggio 2021 da Riccardo Esposito

Il cumulative layout shift è una delle metriche (sono tre in tutto) del Core Web Vitals, ovvero gli elementi fondamentali che definiscono l’intera page experience secondo Google. E che fanno parte di un insieme di fattori che influenzano il posizionamento SEO nella serp.

Come ottimizzare il cumulative layout shift

Ormai il dado è tratto: la fusione tra posizionamento nelle pagine dei risultati e user experience è completa, totale, pienamente in grado di determinare il successo o l’insuccesso di un’attività.

O almeno è così che puoi fare al differenza su Google: il concetto di contenuto abbraccia anche la perfetta esecuzione della pagina, in sicurezza e con una velocità degna di nota.

Google alza sempre l’asticella e ci impone un lavoro di ottimizzazione che va oltre la modifica al tag title o alla meta description. Ecco perché oggi è giusto affrontare questo concetto .

Cos’è il cumulative layout shift, definizione

Si tratta dello spostamento di elementi – testo, immagini, video, banner e altro – all’interno di una pagina web dopo che si è caricata. In pratica si tratta di una disfunzione, un errore di layout che porta gli utenti a confondersi durante la navigazione e l’interazione con gli elementi.

A volte si tratta di un errore legato alla lentezza di caricamento di alcuni elementi, nulla però mi persuade dal non vedere questa soluzione come una tecnica messa in campo da webmaster poco onesti per ottenere click poco convinti (del tutto casuali) su link Adsense.

Questa è solo una riflessione, per ora il cumulative layout shift resta un errore di caricamento della pagina e di visualizzazione che da qualche mese viene incluso, insieme a first input delay e largest contentful paint, nel Core Web Vitals. Con relativa influenza su user experience e SEO.

Da leggere: la velocità è tutto per un ecommerce

Qual è il cumulative layout shift ideale

Risposta rapida: attraverso un layout shift score di 0,1 o inferiore. Ma che significa? Di base si tratta di una metrica difficile da monitorare, anche perché con la velocità di caricamento o di interazione degli elementi ci basiamo su una scala nota: il tempo. Facciamo un esempio?

Sappiamo che con un hosting veloce si risparmiano secondi e che attivando una serie di benefit sulle macchie (dischi SSD, HTTP/2, Http Keep Alive) c’è un miglioramento basato sul tempo. Saranno decimi di secondo, ma nell’insieme fanno al differenza. La formula:

layout shift score = impact fraction * distance fraction

La frazione di impatto misura l’influenza degli elementi instabili sull’area di visualizzazione tra due fotogrammi, ovvero quanto spazio occupano gli oggetti che si spostano. L’altra voce dell’equazione misura la distanza coperta dagli elementi instabili nell’area dell’impatto.

Torniamo al valore indicato: per fornire una buona esperienza utente, i siti web dovrebbero avere un punteggio CLS di 0,1 o inferiore. Questo è il valore che viene definito dall’operazione che viene effettuata dai vari tool per misurare la velocità di caricamento pagina.

Come misurare il cumulative layout shift

Ci sono diversi strumenti che permettono di ottenere una misurazione chiara di questo parametro. Il più famoso è sicuramente il Pagespeed Insight di Google. Grazie a questo tool puoi inserire l’URL che vuoi analizzare e ottenere una misurazione chiara della metrica.

cumulative layout shift

Avendo una fotografia del caricamento pagina puoi individuare i passaggi in chi un elemento si sposta o si carica in modo inadeguato (questo lo ottieni anche con Lighthouse).

Con Gtmetrix ottieni una misurazione del cumulative layout shift e il waterfall permette di individuare con grande precisione la fonte di eventuali problemi. In entrambi i casi hai la valutazione numerica come indice del lavoro svolto. Per monitorare l’andamento dell’intero sito web puoi utilizzare la search console che offre un’intera sezione dedicata ai parametri vitali.

Bisogna sempre correggere spostamenti?

In realtà no, dipende dalle aspettative degli utenti. Nel senso che ci sono alcuni elementi che devono cambiare posizione nella pagina: esistono spostamenti di layout previsti e imprevisti, quest’ultimi devono essere eliminati. Inoltre i cambiamenti di layout che si verificano dopo le interazioni dell’utente devono essere limitati, e pensati in modo che la relazione sia chiara.

Come ottimizzare il cumulative layout shift

Perché avviene tutto questo? Qual è la causa del cumulative layout shift? Ciò si manifesta per una serie di motivi che riguardano il codice e l’uso degli elementi multimediali. Nello specifico:

  • immagini e iframe senza dimensioni.
  • Contenuto dinamico.
  • Caratteri particolari del font
  • Elementi DOM aggiunti dinamicamente
  • Sezioni definiti sopra il contenuto esistente.

Come risolvere questi problemi? In primo luogo includi sempre gli attributi HTML per definire le dimensione delle immagini e dei video, oppure definisci lo spazio necessario a monte. In questo modo il browser può gestire lo spazio nel documento durante il caricamento. 

<img src="esempio.jpg" width="640" height="360" alt="esempio di foto" />

Poi devi rispettare le priorità dei vari elementi. Non inserire mai contenuto sopra quello già esistente, tranne in risposta a un’interazione dell’utente. Ciò garantisce che tutti i cambiamenti di layout che si verificano siano previsti. Ed è questa la soluzione tipica per i banner pubblicitari.

Spesso l’adv è investita dal problema del cumulative layout shift: applica uno stile all’elemento prima del caricamento. Lo stesso deve essere fatto per gli iframe, tipo quelli di YouTube.

Da leggere: rapporto tra SEO ed esperienza utente

Come risolvere questi problemi?

In primo luogo bisogna studiare la guida ufficiale di Google per ottimizzare il cumulative layout shift. Per esperienza posso aggiungere questo: contattare un bravo web performer può risolvere la maggior parte dei problemi e lo stesso si può dire rispetto alla scelta di un design semplice, lineare. Essenziale è meglio, soprattutto per evitare inutili sbalzi di layout.

Clicca per votare questo articolo!
[Voti totali: 1 Media: 5]

Discussione

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *