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.
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 .
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
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 fractionLa 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.
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.
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.
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.
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:
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
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.
1 commento presente
Pianetasvapo ha commentato il 2022-05-16 08:15:19
Ciao e grazie per le info ma qualche esempio per correggere questo problema, anche magari elementare, si poteva inserire. Per esempio alcune cose basilari da fare…. Ti ringrazio