CLS: come individuarlo facilmente e come spiegarlo ai non tecnici
Il CLS (Cumulative Layout Shift) è probabilmente la metrica dei Core Web Vitals che è meno semplice da individuare e da comprendere per i non tecnici.. Vediamo un metodo che risolve entrambe le criticità.
Cos'è il CLS?
Il CLS (Cumulative Layout Shift) è una metrica incentrata sull'esperienza dell'utente e misura la stabilità visiva mirando a quantificare i cambiamenti di layout imprevisti durante il caricamento di una pagina web. Mantenere basso valore di CLS aiuta a garantire una buona esperienza.
▶️ Perché peggiora la user experience
L'esempio classico è quello in cui l'utente apre una pagina web ed inizia a consultarla mentre si sta caricando. Successivamente va a toccare un bottone per fare un'azione, ma mentre sta per toccare lo schermo, il caricamento di un elemento della pagina (ad esempio un'immagine, un frame, un font) sposta il bottone verso il basso facendo toccare all'utente il punto sbagliato.
Di fatto potrebbe avviare un'operazione errata.. potrebbe annullare un ordine invece di proseguire, oppure eliminare un elemento dal carrello invece che aprire la scheda di approfondimento.
Ridurre al minimo questa dinamica è dunque importante per evitare un’esperienza utente scadente, e il problema si aggrava sui dispositivi mobile, perché gli schermi degli smartphone sono più piccoli e l’impatto delle variazioni può risultare maggiore.
▶️ Perché è meno semplice da individuare e da comprendere
Come le altre metriche relative ai Core Web Vitals è semplice da misurare: esistono diversi tool, ad esempio Google PageSpeed Insights, la sezione Segnali web essenziali di Google Search Console, WebPageTest o l'estensione per Google Chrome Web Vitals.
Il CLS, però, più complicato da individuare e da comprendere dagli stakeholder meno tecnici, perché implica l'analisi del rendering delle pagine web.
▶️ Un metodo per renderlo semplice
Come possiamo renderlo semplice da individuare e da spiegare a chi è meno esperto e/o a chi dovrà risolvere la problematica a livello tecnico?
Esistono dei tool che generano animazioni che mettono in evidenza proprio le variazioni di layout. Un esempio è Layout Shift GIF Generator.
Lo strumento permette di inserire l'URL di una pagina web, scegliendo una visualizzazione da mobile o da desktop.
Quello che segue è un esempio di output del tool.
Come vedi, diventano immediatamente chiari i punti dove avviene la variazione di layout e dov'è necessario intervenire.
Per approfondire
Philip Walton