{"id":15083,"date":"2021-05-10T08:52:40","date_gmt":"2021-05-10T06:52:40","guid":{"rendered":"https:\/\/www.serverplan.com\/blog\/?p=15083"},"modified":"2021-05-10T08:52:42","modified_gmt":"2021-05-10T06:52:42","slug":"cumulative-layout-shift","status":"publish","type":"post","link":"https:\/\/www.serverplan.com\/blog\/cumulative-layout-shift\/","title":{"rendered":"Cos’\u00e8 il cumulative layout shift e come migliorarlo"},"content":{"rendered":"\n

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

\"Come<\/a><\/figure>\n\n\n\n

Ormai il dado \u00e8 tratto: la fusione tra posizionamento nelle pagine dei risultati e user experience \u00e8 completa, totale, pienamente in grado di determinare il successo<\/strong> o l’insuccesso di un’attivit\u00e0. <\/p>\n\n\n\n

O almeno \u00e8 cos\u00ec che puoi fare al differenza su Google: il concetto di contenuto abbraccia<\/strong> anche la perfetta esecuzione della pagina, in sicurezza e con una velocit\u00e0 degna di nota. <\/p>\n\n\n\n

Google alza sempre l’asticella e ci impone un lavoro di ottimizzazione <\/strong>che va oltre la modifica al tag title<\/a> o alla meta description<\/a>. Ecco perch\u00e9 oggi \u00e8 giusto affrontare questo concetto .<\/p>\n\n\n\n

Cos’\u00e8 il cumulative layout shift, definizione<\/h2>\n\n\n\n

\n\n\n\n

Si tratta dello spostamento di elementi – testo, immagini, video, banner e altro – all’interno di una pagina web dopo che si \u00e8 caricata<\/strong>. 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.<\/p>\n\n\n\n

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

Questa \u00e8 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<\/a>, nel Core Web Vitals. Con relativa influenza su user experience <\/strong>e SEO.<\/p>\n\n\n\n

Da leggere: la velocit\u00e0 \u00e8 tutto per un ecommerce<\/a><\/strong><\/p>\n\n\n\n

Qual \u00e8 il cumulative layout shift ideale<\/h2>\n\n\n\n

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<\/strong>, anche perch\u00e9 con la velocit\u00e0 di caricamento o di interazione degli elementi ci basiamo su una scala nota: il tempo. Facciamo un esempio?<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

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

layout shift score = impact fraction * distance fraction<\/code><\/pre>\n\n\n\n
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<\/strong> coperta dagli elementi instabili nell’area dell’impatto. <\/p>\n\n\n\n
Torniamo al valore indicato: per fornire una buona esperienza utente<\/strong>, i siti web dovrebbero avere un punteggio CLS di 0,1 o inferiore. Questo \u00e8 il valore che viene definito dall’operazione che viene effettuata dai vari tool per misurare la velocit\u00e0 di caricamento pagina.<\/p>\n\n\n\n
<\/div>\n\n\n\n
Come misurare il cumulative layout shift<\/h2>\n\n\n\n
Ci sono diversi strumenti che permettono di ottenere una misurazione chiara <\/strong>di questo parametro. Il pi\u00f9 famoso \u00e8 sicuramente il Pagespeed Insight<\/a> di Google. Grazie a questo tool puoi inserire l’URL<\/a> che vuoi analizzare e ottenere una misurazione chiara della metrica. <\/p>\n\n\n\n
\"cumulative<\/a><\/figure>\n\n\n\n
Avendo una fotografia del caricamento<\/strong> pagina puoi individuare i passaggi in chi un elemento si sposta o si carica in modo inadeguato (questo lo ottieni anche con Lighthouse<\/a>). <\/p>\n\n\n\n
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<\/strong>. Per monitorare l’andamento dell’intero sito web puoi utilizzare la search console che offre un’intera sezione dedicata ai parametri vitali.<\/p>\n\n\n\n
Bisogna sempre correggere spostamenti?<\/h2>\n\n\n\n
In realt\u00e0 no, dipende dalle aspettative degli utenti. Nel senso che ci sono alcuni elementi che devono cambiare posizione nella pagina: esistono spostamenti di layout<\/strong> 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.<\/p>\n\n\n\n
Come ottimizzare il cumulative layout shift<\/h2>\n\n\n\n
Perch\u00e9 avviene tutto questo? Qual \u00e8 la causa del cumulative layout shift<\/strong>? Ci\u00f2 si manifesta per una serie di motivi che riguardano il codice e l’uso degli elementi multimediali. Nello specifico: <\/p>\n\n\n\n