I Web vitals di Google: Cumulative Layout Shift (CLS). Quanto è stabile il mio sito a livello visivo?

Gli spostamenti degli elementi in pagina e il cambiamento improvviso di layout sono considerati da Google Page Experience uno dei fattori più critici ai fini di una buona UX. Ecco come si misura e si ottimizza la stabilità visiva di un web site.

Cumulative layout shift
Cumulative layout shift

Confessatelo: siete tra quelli che scappano e lasciano perdere un sito web, soprattutto su dispositivi mobile, se siete costretti a rincorrerne i contenuti per tutto lo schermo, durante il caricamento della pagina. Nessun timore, perché non siete i soli: anzi, secondo quanto rilevato da Chrome User Experience, che tiene conto delle esperienze reali di navigazione degli utilizzatori del browser, appartenete alla stragrande maggioranza degli utenti di Internet. Non è un caso, infatti, che questo aspetto, ovvero la stabilità visiva degli elementi in una pagina web, battezzato da Google Cumulative Layout Shift (CLS), sia considerato dal motore di ricerca un fattore decisivo ai fini della qualità dell’esperienza degli utenti sul web, al pari della velocità di caricamento (Largest Paintful Content, LPC) e della reattività (First Input Delay, FID). Tanto che l’update di Google Page Experience pone questi tre essenziali parametri, i Core Web Vitals, sullo stesso piano e ritiene ognuno di essi un fondamentale fattore di ranking nelle SERP, quindi con importanti conseguenze sulle strategie SEO e di conversione.

Prima di passare ad analizzare più da vicino il CLS, conviene dare un’occhiata di insieme alle metriche introdotte con i Core Web Vitals a partire da maggio 2021. I tre moschettieri della buona UX individuati dal nuovo algoritmo di Google Page Experience, sono:

  •  Il Largest Paintful Content (LPC): che misura la velocità di caricamento della pagina, parametrata sul tempo impiegato dall’elemento visibile più grande per completare il processo di rendering
  • Il First Input Delay (FID): che misura la velocità di risposta e quindi la interattività di un sito web, parametrata sul tempo di ritardo del browser nel rispondere alla prima interazione dell’utente, ad esempio quando schiaccia un pulsante o attiva un link
  • Il Cumulative Layout Shift (CLS), che misura la stabilità visiva parametrata sullo spostamento all’interno della pagina degli elementi visibili e sui conseguenti cambiamenti improvvisi di layout

Questi tre metriche non solo consentono di compiere un’analisi accurata e oggettiva della qualità di navigazione di un web site e dalla sua capacità di interagire con l’utente, ma offrono anche uno straordinario campionario di interventi possibili per contenere qualsiasi ritardo e difficoltà di fruizione dei siti. Il vantaggio è per tutti: per gli utenti che possono godere di una buona esperienza su Internet e accedere senza ritardo a dati e media; per gli owner dei siti che possono vedere il bounce rate comprimersi di oltre il 70% e le conversioni aumentare anche del 12% con un solo secondo in meno nel caricamento della pagina; per la stessa Google che vive di contenuti web e premia con un miglior posizionamento nei risultati di ricerca chi li rende fruibili senza ritardo e in maniera piacevole.

Cosa è esattamente e come si calcola il CLS?

Nel dettaglio, il Cumulative Layout Shift valuta la stabilità dell’interfaccia e punta alla minimizzazione di una delle esperienze più comuni e fastidiose durante la navigazione su smartphone e su desktop: lo spostamento improvviso di elementi in pagina durante il caricamento. Il cambiamento improvviso di layout si verifica quando, ad esempio, si entra in un sito per accedere a un testo e si osservano dei mutamenti nella struttura della pagina. Si tratta in genere di uno spostamento del testo, ma è comune anche un cambiamento della posizione di un video o di un’immagine, di un pulsante o dei form di contatto. Talvolta, può anche trattarsi della comparsa improvvisa di banner pubblicitari all’interno della pagina principale. Questi inattesi spostamenti verso l’alto o il basso dei contenuti con conseguenti cambiamenti del layout peggiorano moltissimo la fruibilità degli stessi contenuti, media o testi che siano, e quindi la qualità complessiva della navigazione. Spesso, inoltre, generano dei possibili errori da parte degli utenti che per superare i problemi magari fanno un click su link o pulsanti causando ulteriore ritardo, a danno di una buona esperienza di navigazione. Un difetto di stabilità visiva, particolarmente evidente da mobile, che Google non è disposto più a perdonare ai siti web. 

Ma come viene calcolata la stabilità visiva?  Dei tre segnali web essenziali, il CLS per quanto intuitivo negli effetti è forse i più complicato da misurare. Per capire come funziona occorre partire dal perché accadono questi cambiamenti di layout: semplicemente per una questione di spazio. Mentre LCP e FID sono una questione di tempo calcolato in secondi e millisecondi, il CLS è questione di spazio calcolato in percentuali della superficie dello schermo occupata dagli elementi durante il caricamento della pagina web.

Se lo spazio non viene ottimizzato per accogliere i vari elementi, il browser modificherà la posizione dei contenuti per trovare posto a tutti, con cambiamenti anche del layout. Dunque, Google Page Experience calcola quanti spostamenti avvengono e per quanta superficie, cumulando i dati tra loro. Su web.dev il Cumulative Shift Layout viene spiegato così: CLS measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page (misura la somma di tutti i punteggi di ciascun singolo movimento di layout per ogni spostamento imprevisto del layout che si verifica durante l’intera durata della pagina”).

Dunque, più grande è e più si sposta l’elemento instabile, più la navigazione perde di qualità. Due i fattori da prendere quindi in considerazione e moltiplicare tra loro: l’impatto e la distanza, ovvero l’Impact fraction e la Distance fraction. Dove:

  • Impatto = le dimensioni dell’area occupata dall’elemento instabile visualizzato sullo schermo. Per esempio, se un testo occupa il 50% dello schermo e si sposta verso il basso del 25% la sezione cumulativamente occupata da questo elemento sarà pari al 75% della finestra
  • Distanza = quanto quell’elemento si sposta all’interno della pagina in lunghezza o in larghezza. Seguendo l’esempio sopra avremo uno spostamento del 25%.

Il prodotto dei fattori deve essere inferiore a 0,1, che è l’indice ottimale stabilito da Google. Se l’elemento, come nel nostro esempio, occupa cumulativamente il 75% dello schermo e si sposta del 25% il Layout Shift Score che misura il Cumulative Layout Shift sarà dello  0,1875, l’87% in più di quanto richiesto da Google per un risultato ottimale. Il consiglio è di analizzare almeno il 75° percentile dei caricamenti di pagine del sito web, sia su desktop che su mobile, per verificare il raggiungimento della soglia ottimale. Se in tre quarti dei casi il sito performa un indice pari o inferiore a 0,1 non ci sono miglioramenti da apportare. Con un risultato superiore, occorre intervenire e procedere alla sua ottimizzazione. 

Quali sono i tools per analizzare la CLS e come ottimizzarla?

Per verificare e misurare la stabilità del layout delle pagine web o di un sito nella sua interezza esistono vari strumenti di misurazione, sia di laboratorio sia sul campo. Meglio eseguirli entrambi per avere un’analisi precisa del comportamento del sito e individuare in anticipo le aree di attenzione e miglioramento, magari prima di rilasciarlo. 

I tools utilizzabili sono:

  • Chrome User Experience Report
  • PageSpeed Insights
  • Google Search Console, con il nuovo rapporto Core Web Vitals
  • Chrome Dev Tools
  • Lighthouse
  • WebPageTest
  • Library Javascript web-vitals. 

Attenzione: sono da valutare come dannosi e quindi da eliminare solo i cambiamenti improvvisi di layout, non quelli intenzionali determinati dall’interazione tra l’utente e gli elementi della pagina. Anzi, in questo caso, più veloce è il cambiamento, migliore sarà l’esperienza utente e il punteggio per il First Impact Delay.  

Quindi occorrerà intervenire solo sulle prime, cioè i cambiamenti inattesi e repentini. Ma come? Ecco alcune operazioni, suggerite anche da Google Dev, che si possono fare per apportare dei miglioramenti e provare ad ottimizzare la stabilità visiva: 

  • specificare gli attributi di dimensione per i contenuti come video e le immagini
  • lasciare spazio sufficiente a ogni blocco pubblicitario via CSS 
  • evitare di sovrapporre contenuti sopra a quelli già presenti
  • usare animazioni mediante le CSS Transform

Si tratta comunque di interventi parziali che agiscono solo una dei Web Core Vitals e da soli non bastano a ottimizzare le prestazioni del sito web nel suo complesso e dunque migliorare la UX con effetti positivi anche sul ranking e sulla SEO. 

Un approccio complessivo al problema dell’ottimizzazione delle performance dei siti può essere affrontato in maniera decisiva con uno strumento come iSmartFrame: un layer che lavorando con una cache solution proprietaria assorbe ogni criticità che un sito può presentare ai fini delle metriche di Google, senza costringere ad interventi su codice e linguaggio di programmazione. Un layer di questo tipo, posto tra browser e il CMS originario, infatti, ottimizza non solo la stabilità visiva, ma anche i tempi di caricamento e di interazione della pagina contribuendo al successo delle strategie di marketing come di un progetto SEO e a migliorare il ranking nelle SERP

Ma soprattutto dà una mano fondamentale nel rendere buona una user experience deludente. Una mossa che si rivela sempre vincente ai fini delle conversioni e del valore finale del carrello.

Ti potrebbe interessare

Aumentare la velocità di caricamento del sito: la nuova sfida lanciata da Google

Aumentare la velocità di caricamento del sito: la nuova sfida lanciata da Google

La velocità in affari è sempre stato un mantra e le storie degli imprenditori di successo sono piene di intuizioni avute velocemente ed eseguite altrettanto velocemente. Bene, mai come oggi la velocità è il driver degli affari, e per un aspetto che fino a qualche anno fa si tendeva a sottovalutare: i tempi di caricamento del sito web aziendale. Se fino al 2010 avere un sito lento era la norma e faceva danni relativi, se non alla pazienza del visitatore e alla user experience, oggi è il male peggiore da evitare, soprattutto per un’azienda che punta sull’e–commerce (che non significa esclusivamente gestire un e-store).

leggi tutto
User experience: perché è sempre più determinante per il successo di un e-commerce

User experience: perché è sempre più determinante per il successo di un e-commerce

Conoscete la prima legge dell’e-commerce? Eccola: “se gli utenti non riescono a trovare un prodotto, non possono nemmeno acquistarlo”. Punto. E infrangere quella semplice legge è facile, anche senza saperlo. Basta che un articolo sia mal esposto nella vetrina digitale, descritto con informazioni insufficienti o fastidioso da raggiungere a causa di un sito lento, per mandare all’aria anche le più raffinate strategie di branding, marketing e comunicazione.

leggi tutto