> ## Content Index > Fetch the complete content index at: https://www.alessiopomaro.it/llms.txt > Use this file to discover other available public pages before exploring further. # CLS: come individuarlo facilmente e come spiegarlo ai non tecnici - URL: https://www.alessiopomaro.it/cls-core-web-vitals-individuarlo/ - Published: 2021-05-17T06:00:00.000Z - Updated: 2021-05-17T06:00:00.000Z - Description: 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à. - Author: Alessio Pomaro - Tags: SEO, Sviluppo WEB ### 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. ![Come l'instabilità de layout può influire negativamente sull'esperienza utente](https://storage.ghost.io/c/d7/3a/d73a3886-5e95-4e08-9255-a08eb51bb37b/content/images/2021/05/cls-web-core-vitals-eempio.gif) Come l'instabilità de layout può influire negativamente sull'esperienza utente 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](https://developers.google.com/speed/pagespeed/insights/?hl=it&ref=alessiopomaro.it)**, la sezione **[Segnali web essenziali](https://search.google.com/search-console/core-web-vitals?ref=alessiopomaro.it)** di Google Search Console, **[WebPageTest](https://www.webpagetest.org/?ref=alessiopomaro.it)** o l'estensione per Google Chrome **[Web Vitals](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma?ref=alessiopomaro.it)**. Il CLS, però, più complicato da individuare e da comprendere dagli stakeholder meno tecnici, perché implica l'analisi del rendering delle pagine web. ![Un esempio di analisi del rendering di un sito web](https://storage.ghost.io/c/d7/3a/d73a3886-5e95-4e08-9255-a08eb51bb37b/content/images/2021/05/analisi-rendering-sito-web.jpg) Un esempio di analisi del rendering di un sito 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**. [Layout Shift GIF GeneratorCumulative Layout Shift (CLS) Visualiser.![](https://defaced.dev/apple-touch-icon.png)Cumulative Layout Shift (CLS) Visualiser.![](https://defaced.dev/tools/layout-shift-gif-generator/share.png)](https://defaced.dev/tools/layout-shift-gif-generator/?ref=alessiopomaro.it) Lo strumento permette di inserire l'**URL di una pagina web**, scegliendo una visualizzazione da **mobile** o da **desktop**. ![L'interfaccia del Layout Shift GIF Generator](https://storage.ghost.io/c/d7/3a/d73a3886-5e95-4e08-9255-a08eb51bb37b/content/images/2021/05/the-layout-shift-gif-tool.jpg) L'interfaccia del Layout Shift GIF Generator Quello che segue è un esempio di output del tool. ![Un esempio di output del tool ottenuto analizzando il sito web seroundtable.com](https://storage.ghost.io/c/d7/3a/d73a3886-5e95-4e08-9255-a08eb51bb37b/content/images/2021/05/cls-layout-shift-gif-generator-esempio.gif) Un esempio di output del tool ottenuto analizzando il sito web seroundtable.com Come vedi, diventano immediatamente chiari i punti dove avviene la variazione di layout e dov'è necessario intervenire. --- ### Per approfondire [Cumulative Layout Shift (CLS)This post introduces the Cumulative Layout Shift (CLS) metric and explains how to measure it![](https://web.dev/images/apple-touch-icon.png)web.devPhilip Walton![](https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/vU99HKzIf5EUPnzGVPf1.png?auto=format&fit=max&w=1200&fm=auto)](https://web.dev/cls/?ref=alessiopomaro.it)