State avendo problemi con il punteggio del Cumulative Layout Shift per il vostro sito web? O non sapete bene cosa significhi esattamente Cumulative Layout Shif?
Il Cumulative Layout Shift, o CLS, è una metrica che fa parte dell’iniziativa Core Web Vitals di Google.
In poche parole, misura la quantità di contenuto di una pagina web che si sposta “inaspettatamente”. Un punteggio CLS elevato può indicare una cattiva esperienza utente e può anche influire sulla SEO del vostro sito.
In questo articolo scoprirete tutto quello che c’è da sapere sul Cumulative Layout Shift e su come influisce sui siti WordPress (e sul web in generale).
Cos’È il Cumulative Layout Shift (CLS)?
Il CLS, che in italiano potremmo tradurre come spostamento cumulativo del layout, è la misura di quanto una pagina del vostro sito si sposta inaspettatamente durante la visita di un utente, come misurato dalla Layout Instability API, un’API standardizzata per il test delle prestazioni.
Cumulative Layout Shift (CLS) è una delle tre metriche dell’iniziativa Core Web Vitals di Google, insieme a Largest Contentful Paint (LCP) e First Input Delay (FID).
Per capire il significato di Cumulative Layout Shift, è importante parlare del layout shift in generale.
Un cambio di layout si verifica quando i contenuti del vostro sito si “spostano” inaspettatamente.
O, in termini tecnici, è quando qualsiasi elemento visibile nel viewport cambia la sua posizione iniziale tra due fotogrammi.
Un esempio comune è quello in cui state leggendo un blocco di testo… ma all’improvviso appare un annuncio che si carica in ritardo e spinge il contenuto del testo verso il basso della pagina.
Ecco un altro esempio di immagine di Google che mostra questo fenomeno:
Quasi sicuramente vi siete imbattuti nei cambiamenti di layout durante la navigazione sul web, anche se non li conoscete con questo nome.
Una singola visita potrebbe avere più eventi di cambio di layout separati. Per questo motivo, la metrica Cumulative Layout Shift mira a catturare l’intero quadro misurando la quantità totale di spostamenti di layout inattesi in una pagina*.
*La misura esatta si è fatta un po’ più tecnica dopo alcune modifiche apportate da Google, ma l’idea di base è sempre quella. Se vi interessa conoscere i dettagli più precisi, potete leggere qui.
Perché il Cumulative Layout Shift È Negativo?
Il motivo principale per cui il Cumulative Layout Shift è negativo è che crea una cattiva esperienza utente sul vostro sito.
Nel migliore dei casi, risulta leggermente fastidioso per le persone che visitano il vostro sito. Nel peggiore dei casi, può indurre le persone a compiere azioni che non desiderano.
Per esempio, immaginate che un utente voglia fare clic su “Annulla” ma clicchi accidentalmente su “Conferma” perché uno spostamento del layout ha spostato la posizione dei pulsanti proprio mentre la persona stava facendo clic.
Oltre a influenzare l’esperienza dei vostri visitatori umani, un cattivo punteggio di Cumulative Layout Shift può anche influire sul posizionamento del vostro sito nei motori di ricerca.
A partire dall’aggiornamento Page Experience di Google (terminato nell’agosto 2021), Google usa i Core Web Vitals come uno dei suoi fattori di ranking SEO. Poiché il Cumulative Layout Shift fa parte del Core Web Vitals, ciò significa che può influire sulle prestazioni di ricerca del vostro sito.
In pratica, la correzione di eventuali problemi di Cumulative Layout Shift sul vostro sito contribuirà a migliorarlo sia per le persone che lo visitano che per i motori di ricerca.
Allora, quali potrebbero essere le cause del Cumulative Layout Shift? Vediamo di approfondire l’argomento.
Cosa Causa il Cumulative Layout Shift?
Ecco un rapido riepilogo delle cause più comuni del Cumulative Layout Shift:
- Mancata impostazione delle dimensioni di immagini, iframe, video o altri embed.
- Problemi con il caricamento di font personalizzati, che possono causare l’invisibilità del testo o il cambio di dimensioni durante il caricamento dei font personalizzati.
- Servire annunci responsive (ad esempio, AdSense) con dimensioni diverse (e non riservare spazio per tali annunci).
- Iniettare dinamicamente contenuti con i plugin (avvisi di consenso ai cookie, moduli di generazione di contatti, ecc.)
- Utilizzo di animazioni senza la proprietà CSS Transform.
Approfondiremo questi problemi più avanti in questo articolo, mostrandovi come risolvere ogni problema comune.
Come Misurare il Cumulative Layout Shift: I Migliori Strumenti di Test
Esistono diversi strumenti che potete usare per testare il punteggio del Layout Shift Cumulativo del vostro sito.
Il Cumulative Layout Shift fa parte dell’audit di Lighthouse, quindi qualsiasi strumento di test della velocità che usa Lighthouse come parte del suo audit includerà i dati CLS: questo include PageSpeed Insights, GTmetrix, Chrome Developer Tools e molti altri strumenti di test popolari.
Ecco alcuni dei principali strumenti di test Cumulative Layout Shift che si distinguono per la loro utilità.
PageSpeed Insights
PageSpeed Insights è uno degli strumenti più utili per valutare lo stato del cambio di layout del vostro sito perché vi fornisce due fonti di dati:
- Dati di campo: Dati reali degli utenti dal report Chrome UX (sempre che il vostro sito abbia un traffico sufficiente per essere incluso nel report). Questo vi permette di vedere i dati effettivi del Cumulative Layout Shift per i vostri visitatori umani reali. Questi dati sono anche quelli che Google usare come segnale di ranking.
- Dati di laboratorio: Dati di test simulati raccolti da Lighthouse (che è ciò che PageSpeed Insights usa per generare i suoi rapporti di analisi delle prestazioni).
Potete anche visualizzare i dati per desktop e mobile passando da una scheda all’altra.
Nota: I dati del laboratorio sono in grado di misurare solo gli spostamenti di layout che si verificano durante il caricamento della pagina, quindi i risultati per gli utenti reali potrebbero essere leggermente più alti se gli spostamenti di layout avvengono dopo il caricamento della pagina.
Chrome Developer Tools
I Developer Tools di Chrome offrono alcune risorse utili sia per misurare il CLS che per eseguire il debug dei singoli spostamenti di layout che si verificano sul vostro sito.
Innanzitutto, potete eseguire una verifica Lighthouse per vedere il punteggio CLS del vostro sito. Ecco come fare:
- Aprite i Developer Tools di Chrome.
- Andate alla scheda Lighthouse.
- Configurate il vostro test.
- Fate clic sul pulsante Analyza page load per eseguire il test.
Dopo una breve attesa, dovreste visualizzare la normale interfaccia di verifica di Lighthouse (che assomiglia molto a PageSpeed Insights).
Tuttavia, i Developer Tools di Chrome vi permettono anche di scavare più a fondo nel CLS con l’analisi del Rendering. In questo modo potrete evidenziare le singole aree di spostamento del layout nel vostro sito, aiutandovi a eseguire il debug.
Ecco come fare:
- Fate clic sull’icona dei “tre puntini” nell’angolo in alto a destra dell’interfaccia dei Developer Tools di Chrome.
- Selezionate More Tools → Rendering, che dovrebbe aprire una nuova interfaccia in basso.
- Selezionate la casella Layout Shift Regions.
A questo punto, ricaricate la pagina che volete testare e Chrome dovrebbe evidenziare le aree con spostamenti di layout con un riquadro blu. Queste evidenziazioni appariranno sulla pagina reale durante il caricamento del contenuto e scompariranno al termine dello spostamento.
Se le evidenziazioni sono troppo rapide per essere seguite, potete rallentare il sito e osservarne il caricamento fotogramma per fotogramma utilizzando la scheda Performance.
Google Search Console
Sebbene Google Search Console non vi permetta di eseguire test di laboratorio per determinare il Cumulative Layout Shift, vi offre un modo semplice per vedere i problemi con lo spostamento del layout cumulativo sul vostro sito, come misurato dal rapporto Chrome UX.
Il vantaggio di usare Google Search Console rispetto ad altri strumenti è che vi permette di vedere rapidamente i problemi su tutto il vostro sito, invece di testare pagina per pagina.
Ecco come visualizzare i potenziali problemi sul vostro sito:
- Andate sulla Google Search Console. Se non avete ancora verificato il vostro sito, potete seguire la nostra guida su come verificare Google Search Console.
- Aprite il rapporto Core Web Vitals sotto Experience.
- Fate clic su Open Report accanto a Mobile o Desktop, a seconda di ciò che volete analizzare.
Se applicabile, Google evidenzierà gli URL con punteggi problematici di Cumulative Layout Shift.
Nota: I dati vengono visualizzati solo se il vostro sito ha un traffico mensile sufficiente per essere incluso nel rapporto Chrome UX.
Layout Shift GIF Generator
Come suggerisce il nome, Layout Shift GIF Generator genera una GIF degli spostamenti del layout del vostro sito in modo da poter vedere esattamente quali sono i contenuti che causano problemi. Vi fornirà anche il vostro punteggio, nonostante questo non sia l’obiettivo principale dello strumento.
Tutto ciò che dovete fare è aggiungere l’URL che volete testare e scegliere tra mobile e desktop. Quindi, verrà generata una GIF del vostro sito con evidenziazioni verdi che mostrano gli elementi esatti che si stanno spostando.
Vedendo quali elementi si spostano e contribuiscono al punteggio del Cumulative Layout Shift, potete sapere esattamente dove concentrarvi per migliorare il punteggio del vostro sito.
Qual È un Buon Punteggio di Cumulative Layout Shift?
Secondo l’iniziativa Core Web Vitals di Google, un buon punteggio di Cumulative Layout Shift è di 0,1 o meno.
Se il vostro punteggio di Cumulative Layout Shift è compreso tra 0,1 e 0,25, Google lo definisce “Da migliorare”.
Se il punteggio di Cumulative Layout Shift è superiore a 0,25, Google lo definisce “Scarso”.
Ecco un grafico tratto dal sito web Core Web Vitals di Google che mostra visivamente questi punteggi:
Come Risolvere il Cumulative Layout Shift in WordPress (o in Altre Piattaforme)
Ora che avete capito cosa succede con il Cumulative Layout Shift, è il momento di passare ad alcuni consigli pratici su come risolvere il Cumulative Layout Shift in WordPress.
Anche se questi consigli provengono da WordPress, sono tutti universali e possono essere applicati ad altri strumenti di costruzione di siti web.
Specificare Sempre le Dimensioni delle Immagini
Una delle cause più comuni dello spostamento del layout è il caricamento tardivo delle immagini che spostano il contenuto, soprattutto se usate tattiche come il lazy-loading.
Per evitare questo problema, potete specificare le dimensioni di un’immagine nel codice quando la incorporate. In questo modo, il browser del visitatore riserverà quello spazio anche se l’immagine non è ancora stata caricata, il che significa che l’immagine non dovrà spostare il contenuto.
Se incorporate le immagini tramite l’editor di WordPress (l’editor di blocchi Gutenberg o il classico editor TinyMCE), non c’è bisogno di specificare manualmente le dimensioni dell’immagine perché WordPress lo farà automaticamente per voi.
Lo stesso vale per i più diffusi plugin di page builder come Elementor, Divi, Beaver Builder e così via.
Tuttavia, possono sorgere dei problemi se state incorporando manualmente delle immagini utilizzando il vostro codice, cosa che potrebbe accadere se state aggiungendo del contenuto a un plugin, modificando i file del template del vostro tema child e così via.
Il codice HTML per l’incorporamento di un’immagine di base è simile a questo:
<img src="https://kinsta.com/example-image.jpg" alt="An example image">
Per specificare le sue dimensioni, potete aggiungere i parametri di altezza e larghezza. Ecco un esempio di come potrebbe apparire per un’immagine di 600x300px:
<img src="https://kinsta.com/example-image.jpg" alt="An example image" width="600" height="300">
Molti plugin per le prestazioni di WordPress includono anche funzioni per automatizzare questa operazione, come ad esempio le funzioni Aggiungi le dimensioni delle immagini mancanti di WP Rocket o Perfmatters.
Specificare Sempre le Dimensioni per Video, Iframe e Altri Incorporamenti
Come per le immagini, anche per i video, gli iframe e gli altri incorporamenti dovrete specificare le dimensioni.
Gli strumenti di incorporamento della maggior parte dei siti web dovrebbero specificare automaticamente le dimensioni dell’incorporamento.
Ad esempio, se guardate il codice di incorporamento di YouTube, vedrete che include le dimensioni:
Lo stesso vale per molti altri servizi.
Tuttavia, se il vostro codice embed non specifica l’altezza e la larghezza, potete aggiungere manualmente queste dimensioni al codice embed.
Correggere e Ottimizzare il Caricamento dei Font
I problemi con il caricamento e l’ottimizzazione dei caratteri possono essere un’altra fonte comune di spostamenti del layout attraverso due potenziali problemi:
- Flash di testo invisibile (Flash of Invisible Text o FOIT): La pagina viene inizialmente caricata senza che appaia alcun contenuto testuale. Una volta caricato il font personalizzato, il testo appare improvvisamente (il che può causare lo spostamento del contenuto esistente).
- Flash di testo non stilizzato (Flash of Unstyled Text o FOUT): Il contenuto del testo viene caricato utilizzando un font di sistema (non stilizzato). Una volta caricato il font personalizzato, il testo passa a tale font, il che può causare lo spostamento del contenuto perché le dimensioni e la spaziatura del testo potrebbero essere diverse.
Per evitare questi problemi, dovete ottimizzare il caricamento dei font sul vostro sito (il che può avere effetti positivi anche sulle prestazioni del sito).
Ospitare i Font in Locale e Precaricarli
Ospitando i font a livello locale e utilizzando il precaricamento, indicate ai browser dei visitatori di dare maggiore priorità al caricamento dei file di font personalizzati.
Caricando i file dei font prima di altre risorse, vi assicurate che i file dei font siano già caricati quando il browser inizia il rendering dei vostri contenuti, evitando così problemi di FOUT e FOIT.
Per sapere come ospitare i font in locale in WordPress, potete leggere la nostra guida completa su come ospitare i font in locale in WordPress.
Da qui, potete impostare il precaricamento dei font manualmente o utilizzando un plugin. La maggior parte dei plugin per le prestazioni include opzioni per il precaricamento dei font, come WP Rocket, Perfmatters, Autoptimize e altri.
Se usate Google Fonts, potete anche usare il plugin gratuito OMGF per ospitare i font in locale e precaricarli.
Potete anche precaricare manualmente i font aggiungendo il codice alla sezione <head> del vostro sito.
Ecco un esempio di codice: non dimenticate di sostituirlo con il nome effettivo/la posizione del file di font che volete precaricare:
<link rel="preload" href="https://kinsta.com/fonts/roboto.woff2" as="font/woff2" crossorigin>
Potete aggiungerlo direttamente utilizzando un tema child di WordPress o iniettarlo con l’hook wp_head e un plugin come Code Snippets.
Impostare il Font-Display su Optional o Swap
La proprietà CSS Font-Display vi permette di controllare il comportamento di rendering dei font sul vostro sito e di evitare FOIT.
In sostanza, vi permette di usare un font di ripiego nelle situazioni in cui il vostro font personalizzato non è ancora stato caricato.
Ci sono due opzioni principali che potete usare per risolvere il problema del CLS:
- Swap: Usa un font di riserva mentre il font personalizzato è in fase di caricamento e poi lo cambia con il vostro font personalizzato una volta che il font è stato caricato.
- Optional: Permette al browser di determinare se usare o meno un font personalizzato in base alla velocità di connessione della persona che sta navigando.
Con Swap, il browser passa sempre al font personalizzato una volta caricato.
Sebbene Swap risolva completamente il fenomeno del FOIT, può generare il FOUT. Per minimizzare questo problema, dovete assicurarvi che il font di fallback usi una spaziatura identica a quella del font personalizzato (almeno per quanto possibile). In questo modo, anche se lo stile del font cambia, non si verificheranno spostamenti di layout perché la spaziatura sarà la stessa.
Con Optional, il browser concederà al font personalizzato 100 ms per caricarsi. Tuttavia, se il font personalizzato non è ancora disponibile, il browser userà il font di fallback e non passerà mai al font personalizzato per quella pagina (userà il font personalizzato per le pagine successive, poiché è probabile che il file del font sia già stato scaricato e memorizzato nella cache).
Se da un lato l’opzione può risolvere sia il FOIT che il FOUT, dall’altro lato il visitatore potrebbe rimanere bloccato con il font di ripiego per la prima visualizzazione della pagina.
Se vi sentite a vostro agio con i CSS, potete modificare manualmente la proprietà Font-Display nel foglio di stile del vostro tema figlio.
Se non ve la sentite di farlo, potete trovare alcuni plugin che vi aiuteranno:
- Swap Google Fonts Display: Attiva facilmente lo scambio di visualizzazione dei font per Google Fonts.
- Asset CleanUp: Supporta Google Fonts gratuiti e font locali personalizzati con la versione Pro.
- Perfmatters: Offre una funzione per Google Fonts.
Se usate Elementor, Elementor include anche un’opzione integrata per farlo. Andate su Elementor → Impostazioni → Avanzate. Potete quindi impostare il menu a tendina Google Fonts Load su Swap o Optional in base alle vostre preferenze:
Troppo Complesso? Considerate uno Stack di Font di Sistema!
Se tutti questi discorsi sul precaricamento e sulla visualizzazione dei font vi confondono, una soluzione semplice è quella di usare uno stack di font di sistema invece di uno stack di font personalizzato.
Anche se questo limita le opzioni di progettazione, risolve completamente i problemi di Cumulative Layout Shift, FOIT e FOUT. Inoltre, aiuterà il vostro sito a caricarsi molto più velocemente.
Se vi interessa, date un’occhiata alla guida di Brian su come usare un sistema di font su WordPress.
Riservare Spazio per gli Annunci (Se Usate gli Annunci Display)
Se usate annunci pubblicitari, è importante riservare uno spazio per questi annunci nel codice del vostro sito. Questo segue la stessa idea di riservare spazio alle immagini, ai video e agli embed.
Tuttavia, gli annunci display meritano una menzione speciale perché è molto comune che gli annunci display si carichino in ritardo se si usa un qualsiasi tipo di tecnologia di offerta. Questo perché la tecnologia di offerta ha bisogno di tempo per lavorare e capire quale annuncio visualizzare.
Può essere un problema anche con gli annunci automatici di AdSense se avete degli slot di annunci dinamici, perché, oltre al problema dell’offerta, AdSense caricherà anche annunci di dimensioni diverse (quindi potreste non conoscere in anticipo le dimensioni dell’annuncio).
Se usate una delle reti di annunci display più diffuse, come Mediavine o AdThrive, dovrebbero già offrire degli strumenti per aiutarvi a evitare le variazioni di layout dei vostri annunci. Per esempio, se aprite l’area delle impostazioni degli annunci di Mediavine, potete attivare l’opzione Optimize Ads for CLS:
Ottimizzare il Cumulative Layout Shift in AdSense è un po’ più difficile.
Una soluzione comune è quella di aggiungere un elemento <div> attorno a ogni unità pubblicitaria che specifichi un’altezza minima utilizzando la proprietà CSS min-height . Potete anche usare le media queries per modificare l’altezza minima in base al dispositivo dell’utente.
Google consiglia di impostare un’altezza minima pari alla dimensione più grande possibile dell’annuncio. Anche se questo potrebbe comportare uno spreco di spazio se viene servito un annuncio più piccolo, è l’opzione migliore per eliminare qualsiasi possibilità di spostamento del layout.
Quando impostate questo elemento wrapper, assicuratevi di usare un ID CSS piuttosto che una classe, poiché AdSense spesso rimuove la classe CSS dagli oggetti genitore.
Ecco come potrebbe apparire il CSS:
Ed ecco come potrebbe apparire l’embed di AdSense:
Nel frontend, ora vedrete che il vostro sito riserva uno spazio per l’annuncio, anche se è vuoto:
Inserire Dinamicamente e in Modo Furbo il Contenuto con i Plugin
Molti siti WordPress iniettano dinamicamente contenuti per funzioni come le notifiche di consenso ai cookie, i contenuti correlati, i moduli di opt-in per le email e così via.
Sebbene questo sia possibile, dovete fare attenzione ad evitare di farlo in modo tale da causare modifiche al layout.
Una buona pratica di web design è quella di non inserire mai contenuti al di sopra di quelli esistenti, a meno che l’utente non abbia effettuato un’interazione specifica (per esempio facendo clic su un pulsante).
Per esempio, se state aggiungendo un avviso di consenso ai cookie, non vorrete inserirlo nella parte superiore della pagina perché il contenuto verrebbe spinto verso il basso (a meno che non abbiate già riservato uno spazio per il banner di consenso ai cookie).
Dovreste invece visualizzare l’avviso in fondo alla pagina, evitando così di spostare verso il basso il contenuto visibile.
Per verificare se il contenuto dinamico è la causa del problema, potete usare gli strumenti di visualizzazione di cui sopra (per esempio Layout Shift GIF Generator).
Se vedete che i contenuti di uno specifico plugin causano spostamenti di layout, potete considerare di modificare le impostazioni di quel plugin o di passare a un plugin diverso.
Per esempio, alcuni plugin per il consenso dei cookie sono migliori di altri quando si tratta di spostamenti di layout, quindi vale la pena di sperimentare diversi plugin se avete dei problemi.
Se volete approfondire il comportamento dei plugin, potete usare uno strumento di monitoraggio delle prestazioni delle applicazioni (APM). Se avete un hosting con Kinsta, lo strumento APM di Kinsta è disponibile gratuitamente nel vostro cruscotto MyKinsta, oppure potete trovare altri strumenti APM.
Per aiutarvi a testare i plugin, potete anche usare i siti di staging di Kinsta o lo strumento di sviluppo locale DevKinsta.
Usare la Proprietà CSS Transform per le Animazioni Quando Possibile
Se usate le animazioni sul vostro sito, queste possono essere un’altra causa comune dei cambiamenti di layout.
Per evitare che le animazioni causino spostamenti di layout, dovreste usare la funzione CSS Transform per le animazioni piuttosto che altre tattiche:
- Piuttosto che usare le proprietà di altezza e larghezza, usate il font transform: scale()
- Se volete spostare gli elementi, usate trasform: translate() invece di top, bottom, right o left
Si tratta di un consiglio tecnico, quindi è improbabile che abbiate bisogno di farlo a meno che non stiate aggiungendo il vostro CSS. Per saperne di più, potete leggere la pagina di Google su CLS e animazioni/transizioni.
Riepilogo
Se il vostro sito web ottiene un punteggio elevato di Cumulative Layout Shift, è importante risolverlo sia per creare un’esperienza migliore per i vostri visitatori umani sia per massimizzare le prestazioni del vostro sito nei risultati di ricerca di Google.
Due dei problemi più comuni sono le dimensioni mancanti per le immagini/embed e i problemi di caricamento dei caratteri. Se li risolvete, dovreste essere in grado di ottenere un punteggio migliore.
Altri siti potrebbero aver bisogno di approfondire la questione del caricamento degli annunci, dei contenuti dinamici e delle animazioni. Se avete difficoltà a implementare questo tipo di ottimizzazioni da soli, potete prendere in considerazione la possibilità di lavorare con un’agenzia WordPress o una persona freelance.
Per saperne di più su Core Web Vitals in generale, potete leggere la guida completa di Kinsta su Core Web Vitals.
E se volete un host WordPress che vi aiuti a creare un sito performante e che si comporti bene con Core Web Vitals, prendete in considerazione l’hosting WordPress gestito di Kinsta: migreremo i vostri siti WordPress gratuitamente!
Lascia un commento