Come migliorare il Cumulative Layout Shift (CLS) su WordPress

Ti chiedi cosa significa spostamento cumulativo del layout e qual è l’impatto sulle prestazioni UX e SEO? Continua a leggere! Scoprirai cos’è CLS, come puoi testarlo e quali fattori influenzano il suo punteggio. Scoprirai come evitare grandi spostamenti di layout e correggere un brutto voto da dispositivi mobili e desktop (spostamento layout cumulativo superiore a 0,25 o 0,1 s). Tutto in chiaro italiano!

Indice

Che cos’è il Cumulative Layout Shift (CLS) e perché è importante?

Il Cumulative Layout Shift è una metrica Core Web Vital e misura quanto sia visivamente stabile la pagina. La stabilità visiva è calcolata dal numero di spostamenti imprevisti del layout che si verificano senza interagire con la pagina. Ogni volta che il contenuto cambia, non perché hai fatto clic su un collegamento e così via, conta come un cambiamento di layout.

La somma di tutti questi spostamenti determina il punteggio di spostamento cumulativo del layout.

Quante volte hai letto un articolo e il contenuto è stato spostato verso il basso a causa di alcuni nuovi annunci? Oppure, hai mai provato a fare clic su un pulsante e hai finito per fare clic su un altro collegamento perché una nuova grande immagine ha improvvisamente spinto il contenuto verso il basso?

Tutti questi esempi sono cambiamenti di layout: sono causati da alcuni elementi della pagina che sono instabili e cambiano la loro posizione nella pagina.
Gli elementi cambiano la loro posizione per ragioni diverse. Ad esempio, una nuova immagine o un annuncio caricato above-the-fold (nella parte superiore della pagina) costringe alcuni contenuti a scendere e ad occupare un’altra sezione della pagina.

Puoi immaginare quanto sia fastidiosa questa esperienza per gli utenti.

Ecco perché Cumulative Layout Shift è una delle tre metriche Core Web Vitals che valutano l’esperienza utente di una pagina. Oltre a Largest Contentful Paint e First Input Delay, CLS verrà lanciato come parte del fattore di ranking di Page Experience a giugno 2021.

Il Cumulative Layout Shift rappresenta il 15% del punteggio PageSpeed ​​ed è una metrica molto rilevante per l’esperienza dell’utente e il nuovo fattore di ranking. Pertanto, potrebbe anche influire sulle prestazioni SEO.

Che cos’è un buon punteggio CLS

Spostamento cumulativo del layout

Come abbiamo spiegato, il CLS è la somma di tutti i cambiamenti di contenuto imprevisti che si verificano sulla pagina. Secondo la somma di tutti i turni, il tuo voto CLS potrebbe superare o meno la valutazione di Google.

Un buon punteggio CLS dovrebbe essere uguale o inferiore a 0,1.

Un punteggio CLS compreso tra 0,1 e 0,25 significa che la performance “ ha bisogno di miglioramenti ”.

Il voto è “ scarso ” se CLS è superiore a 0,25.

Come trovare e misurare lo spostamento cumulativo del layout (CLS)

Esistono diversi modi per misurare il punteggio CLS, sia dagli strumenti Lab che dai dati. Ecco gli strumenti più popolari che puoi utilizzare:

Puoi capire meglio la differenza tra Lab e Field Data nel nostro post dedicato su PageSpeed ​​Insights .

Vediamo come PageSpeed ​​Insights e Search Console possono aiutarti a trovare e misurare lo spostamento cumulativo del layout.

Misurare e trovare CLS con PageSpeed ​​Insights

PageSpeed ​​Insights è uno dei migliori strumenti per misurare e trovare lo spostamento cumulativo del layout.

Lo strumento fornisce il punteggio CLS dai dati Lab e Field in modo da poter misurare sia i dati controllati che quelli utente.

PageSpeed ​​Insights ti mostra anche i potenziali elementi che causano uno spostamento del layout.

L’esempio seguente mostra un punteggio negativo per CLS, sia per il campo che per i dati di laboratorio:

Punteggio PageSpeed ​​- Cattivo voto CLS

Passando all’area Diagnostica, puoi trovare la causa del problema nella sezione “Evita grandi spostamenti di layout”.

In questo caso, c’è un solo elemento che influisce su CLS. È un testo preformattato incluso nella pagina per spiegare come misurare CLS in JavaScript:

Evita grandi spostamenti di layout - PageSpeed ​​Insights

Come puoi vedere, PSI ti dà il punteggio relativo a ciascun elemento in modo che tu possa capire quanto ogni elemento contribuisce al punteggio complessivo del CLS.

Se hai più di un elemento elencato in questa sezione, dovresti iniziare a correggere quelli che contribuiscono maggiormente al brutto voto. È probabile che risolvendo i problemi più rilevanti, otterrai un punteggio abbastanza buono da superare la valutazione di Google.

Nota: diciamo che ottieni un brutto voto sul campo e uno buono in laboratorio: sì, potrebbe succedere! In tal caso, dovresti assicurarti di ottenere un buon punteggio anche per CLS nei Field Data. Tieni presente che i dati sul campo sono correlati all’esperienza utente reale.
Come per CLS, Lab Data considera solo i cambiamenti di layout durante il caricamento della pagina. Field Data, invece, conta tutti i turni di layout durante l’intera visita, dall’ingresso fino alla chiusura della pagina. Pertanto, è più rappresentativo del tuo sito rispetto ai dati di laboratorio. Non è un caso che Google utilizzi il campo Dati per le classifiche di ricerca .

Misurazione e ricerca dell’LCP su Search Console

Oltre a misurare il punteggio CLS e trovare gli elementi che causano cambiamenti di layout, dovresti analizzare le prestazioni a livello di sito.

Il rapporto Core Web Vitals in Search Console è il modo migliore per trovare tutti gli URL interessati dallo stesso problema. Ad esempio, nella scheda Dettagli del rapporto Mobile o Desktop, potresti leggere ” Problema CLS: più di 0.1 (mobile) “.

Facendo clic sulla riga specifica, troverai un elenco di URL che devono essere corretti per lo stesso motivo.

Rapporto di Search Console - Problemi di CLS

Una volta risolto il problema, sarà facile convalidare la correzione per tutte le pagine interessate dallo stesso problema.

Ora capiamo cosa causa un cattivo punteggio CLS e come puoi risolverlo.

Quali fattori influenzano il CLS e causano un punteggio lento

I fattori più comuni di uno scarso grado di spostamento cumulativo del layout su WordPress sono:

  • Immagini e video senza dimensioni
  • Annunci, incorporamenti e iframe senza dimensioni
  • Font Web che causano Flash of Unstyled Text (FOUT) o Flash of Invisible Text (FOIT)
  • Azioni in attesa di una risposta di rete prima dell’aggiornamento del DOM (soprattutto per gli annunci)
  • Contenuto iniettato dinamicamente (ad esempio, animazioni).

Tieni presente che CLS ha l’impatto più significativo sui dispositivi mobili, il dispositivo più critico e impegnativo per l’ottimizzazione delle prestazioni. Ci sono diversi motivi, da un viewport più piccolo a una rete mobile impegnativa e un’unità di elaborazione centrale (CPU) più debole.

Immagini e video senza dimensioni

Immagini e video senza dimensioni sono una causa comune di spostamento del layout.

Se non specifichi gli attributi di larghezza e altezza, il browser non sa quanto spazio deve allocare durante il caricamento di questi elementi. Probabilmente lo spazio riservato non sarà sufficiente. Di conseguenza, una volta che questi elementi sono stati caricati completamente, occuperanno più spazio del previsto: il contenuto già visualizzato si sposterà.

Puoi risolvere questo problema includendo le dimensioni dell’immagine nelle immagini e negli elementi video in diversi modi. Ti abbiamo coperto nella sezione dedicata!

Annunci, incorporamenti e iframe senza dimensioni

Lo stesso problema di “dimensione” vale per annunci, incorporamenti e iframe. Ancora una volta, non riservare abbastanza spazio fa sì che questi elementi dinamici spingano verso il basso il contenuto già visualizzato. Pertanto, nella pagina si verificheranno nuovi spostamenti di layout.

Gestirai questo problema assegnando dimensioni fisse agli annunci e gestendo la dimensione riservata a tali elementi attraverso tattiche specifiche.

Font Web che causano un lampo di testo non stilizzato (FOUT) o un lampo di testo invisibile (FOIT)

I caratteri Web possono causare cambiamenti di layout, oltre a un’esperienza utente piuttosto spiacevole durante il rendering della pagina. Riguarda la lentezza del caricamento dei caratteri. Potresti dover affrontare due problemi diversi: Flash of Unstyled Text (FOUT) o Flash of invisible text (FOIT).

Da un lato, potresti vedere il testo sulla pagina con uno stile “non così buono” (FOUT). È perché il caricamento del carattere personalizzato richiede un po’ di tempo. Nel frattempo, vedrai il carattere di riserva. Una volta che il carattere personalizzato è pronto, sostituirà quello di riserva. Vedrai quindi il carattere cambiare sulla pagina e il contenuto cambierà inevitabilmente.

D’altra parte, potresti aspettare un po’ prima di vedere qualsiasi testo visualizzato. È perché il carattere personalizzato è ancora in fase di caricamento (FOIT). Vedrai il contenuto della pagina solo dopo che i caratteri personalizzati sono stati renderizzati. Una volta caricato completamente, quel contenuto potrebbe causare uno spostamento del layout.

Il modo principale per risolvere questo problema è precaricare i caratteri, come leggerai tra un minuto.

Azioni in attesa di una risposta di rete prima di aggiornare il DOM e il contenuto inserito nella pagina

Anche le animazioni e i contenuti dinamici inseriti nella pagina, come banner, annunci o feed di Instagram, possono causare uno spostamento del layout. Ancora una volta, è perché non c’è abbastanza spazio riservato a tali elementi.

A questo punto, sai quanto sia fondamentale allocare spazio per gli elementi che coinvolgono gli utenti e non devono rovinare l’esperienza dell’utente.

Vediamo come risolvere questi problemi.

Puoi leggere la nostra guida approfondita e dettagliata, oppure puoi saltare al video che mostra come migliorare CLS con WP Rocket !

Come correggere uno spostamento cumulativo del layout superiore a 0,25 s o 0,1 s su dispositivi mobili e desktop

Se vuoi evitare grandi cambiamenti di layout sul tuo sito WordPress, ecco come puoi ridurre un punteggio CLS negativo (con e senza plug-in):

1. Includere gli attributi di larghezza e altezza su immagini ed elementi video

2. Precarica i caratteri (e ottimizzali)

3. Gestisci lo spazio e le dimensioni degli spazi pubblicitari

4. Gestisci lo spazio per incorporamenti e iframe

5. Gestisci contenuto dinamico

6. Preferire la proprietà di trasformazione CSS per le animazioni

Esaminando ogni punto, capirai come correggere lo stato di Search Console: problema CLS: più di 0,25 secondi o problema CLS: più di 0,1 secondi , sia da dispositivo mobile che/o desktop.

🚀 Per ciascuno dei nostri consigli, troverai un’informazione sul suo impatto sulle prestazioni, dal basso all’alto. Maggiore è l’impatto, maggiori sono le possibilità che il grado di spostamento cumulativo del layout migliori dopo aver seguito quella specifica raccomandazione.

Alcune best practice per evitare grandi cambiamenti di layout non includono una soluzione specifica: riguardano più la gestione dello spazio per gli annunci e altri elementi cruciali.

1. Includere gli attributi di larghezza e altezza su immagini ed elementi video

Impatto sulle prestazioni: alto 🚀🚀🚀

Uno dei modi più semplici per correggere il CLS è includere gli attributi di larghezza e altezza sulle tue immagini e sugli elementi video nel tuo CMS WordPress:

L'impostazione delle dimensioni dell'immagine risolve il CLS

WordPress aggiunge le dimensioni dell’immagine per impostazione predefinita. Quindi, questa azione dovrebbe essere risolta automaticamente.

In caso di problemi, tieni presente che WP Rocket include automaticamente eventuali valori di “larghezza” e “altezza” mancanti alle immagini.

Devi solo selezionare l’opzione “Aggiungi dimensioni immagine mancanti” nella scheda Media. Veloce e diretto come quello!

Puoi facilmente aggiungere le dimensioni dell'immagine mancanti.

Un altro modo per risolvere questo problema è sfruttare le caselle delle proporzioni CSS e lasciare che i browser impostino le proporzioni predefinite delle immagini.

In poche parole, dovresti includere l’attributo larghezza o altezza e impostare le proporzioni usando CSS . Il browser individuerà l’attributo mancante e otterrà le dimensioni dell’immagine prima di eseguire il rendering della pagina. In questo modo, assegnerà lo spazio necessario durante il caricamento dell’immagine. Di conseguenza, il contenuto non si sposterà e verranno evitati i cambiamenti di layout.

È un’informazione utile da tenere a mente perché molti plug-in, come quelli di incorporamento di video di YouTube, utilizzano le proporzioni sul loro output.

Non dimenticare le immagini reattive! È possibile utilizzare l’attributo srcset:

<img
width="1000"
height="1000"
src="puppy-1000.jpg"
srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w"
alt="Puppy with balloons"
/>

Fonte : Google

Grazie a srcset, il browser può scegliere tra un insieme di immagini e relative dimensioni. Tieni presente che le immagini devono utilizzare le stesse proporzioni per impostare le dimensioni dell’immagine.

Includendo le immagini delle dimensioni, servirai immagini con le dimensioni corrette e affronterai l’opportunità di PageSpeed ​​Insights.

2. Precarica i caratteri (e ottimizzali)

Impatto sulle prestazioni: basso (alto solo se il sito ha un testo di grandi dimensioni) 🚀

Come abbiamo spiegato, se i caratteri Web non si caricano velocemente, causano un’esperienza utente terribile e influiscono sul grado CLS.

Come best practice per evitare spostamenti di layout, dovresti precaricare i caratteri.

Precaricando i caratteri , dirai al browser di caricare i caratteri come una delle risorse prioritarie. Durante il rendering della pagina, il browser caricherà i caratteri il più velocemente possibile. Di conseguenza, il browser probabilmente includerà i caratteri nel primo disegno significativo, ovvero quando il contenuto principale della pagina sarà completamente caricato e visualizzato. In tal caso, non si verificherà alcun cambiamento di layout.

Puoi aggiungere rel=preload ai principali caratteri web:

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

Sapevi che puoi facilmente precaricare i caratteri con WP Rocket? Nella scheda dedicata, devi solo includere gli URL dei file di font da precaricare:

Scheda Precarica - Caratteristica di precaricamento

Tieni presente che è utile abilitare questa opzione WP Rocket solo se non hai attivato la funzione Rimuovi CSS inutilizzati (scheda Ottimizzazione file). Se RUCSS è attivato, non è necessario attivare l’opzione Precarica caratteri.

Precaricando i caratteri, affronterai il suggerimento di PageSpeed ​​Insight ” Assicurati che il testo rimanga visibile durante il caricamento dei caratteri Web “.

C’è di più a questo punto. Per evitare problemi FOIT e FOUT, dovresti combinare rel=preload (o la funzione WP Rocket abilitata) con la linea CSS font-display: optional.

Il descrittore di visualizzazione dei caratteri CSS determina il modo in cui i file dei caratteri vengono scaricati e visualizzati dal browser.
Con visualizzazione dei caratteri: opzionale, il browser scaricherà e inserirà nella cache i file dei caratteri per renderli immediatamente disponibili per il rendering. Quindi, anche se font-display ha diversi valori, quello che dovresti usare è opzionale.

Un altro suggerimento utile per ridurre il problema FOUT è aggiungere le proprietà display:swap;missing on font-display. WP Rocket può aiutarti a farlo se riduci/combina file CSS.

Esistono altri modi per caricare i caratteri più velocemente:

Converti i caratteri delle icone in SVG . Le icone dei caratteri richiedono un po’ di tempo per essere caricate e non aiutano l’accessibilità. Non c’è motivo di usarli. Usando gli SVG, il font verrà renderizzato più velocemente e caricherai i font esatti di cui hai bisogno.

Rendi disponibili più formati di carattere . In questo modo, i browser sceglieranno il formato compatibile e caricheranno solo il suo carattere. Ecco alcune informazioni sui formati dei caratteri che potresti trovare utili:

  1. Evita TTF. Di solito è il 10 – 20% più pesante di WOFF.
  2. Usa SVG per Safari. Di solito è un po’ più piccolo di WOFF.
  3. Usa WOFF2 per i browser moderni. È la dimensione più piccola, circa il 30% più piccola di WOFF e SVG.
  4. Implementa WOFF come fallback quando non è possibile utilizzare SVG o WOFF2.

Ospita i tuoi font in locale o usa una CDN per memorizzarli nella cache . Eviterai qualsiasi ritardo e consegnerai i caratteri più velocemente.

Ottimizza i tuoi caratteri per renderli il più piccoli e veloci possibile . Per quanto riguarda i Google Fonts, lo sapevi che WP Rocket si occupa automaticamente di loro ?

Applicando questi consigli, ottimizzerai i tuoi caratteri ed eviterai diversi cambiamenti di layout. Affronterai la raccomandazione PSI: “Assicurati che il testo rimanga visibile durante il caricamento del font web” sul tuo sito WordPress.

3. Gestisci lo spazio e le dimensioni degli spazi pubblicitari

Impatto sulle prestazioni: alto 🚀🚀🚀

Esistono diverse best practice per evitare qualsiasi spostamento del layout degli annunci:

  • Assegna dimensioni fisse agli annunci in modo da riservare spazio sufficiente per il caricamento degli annunci.
  • Riserva lo spazio più grande possibile per gli annunci. I dati storici sono utili per valutare qual è la dimensione migliore per ogni area annuncio.
  • Mantieni ogni spazio riservato agli annunci che non sono stati visualizzati. In altre parole, non dovresti comprimere nessuna area nella finestra. Potresti piuttosto includere un segnaposto o un elemento di fallback.
  • Inserisci annunci non appiccicosi al centro della pagina, comunque lontano dalla parte superiore del viewport.

La funzione Delay JavaScript Execution fornita da WP Rocket può aiutarti a controllare i contenuti dinamici above the fold come Google Ads. La funzione può essere utilizzata per interrompere l’interazione dinamica, l’inserimento di contenuti (annunci) e le modifiche dinamiche alle classi finché non si verifica un’interazione sulla pagina.

Ancora una volta, affronterai la raccomandazione PSI “Servire immagini con dimensioni corrette”. Lo stesso vale per la sezione successiva.

4. Gestisci lo spazio per incorporamenti e iframe

Impatto sulle prestazioni: alto 🚀🚀🚀

I consigli per la gestione di incorporamenti e iframe sono simili a quelli per gli annunci.

In particolare, dovresti precalcolare abbastanza spazio per tali elementi. Ancora una volta i dati storici possono essere utili per capire quanto spazio dovresti riservare.

Segnaposto o fallback è un’ottima soluzione per gestire le dimensioni di incorporamento sconosciute.

5. Gestisci contenuto dinamico

Impatto sulle prestazioni: alto 🚀🚀🚀

Anche i contenuti dinamici come i banner possono influire sullo spostamento cumulativo del layout. Ecco perché dovresti evitare di visualizzare nuovi contenuti a meno che non siano attivati ​​dall’interazione dell’utente. Come sai, CLS conta solo i cambiamenti di layout che si sono verificati quando gli utenti non interagiscono con la pagina.

Come spiegato nella sezione “Gestisci spazio e dimensioni per gli slot pubblicitari”, puoi sfruttare l’opzione Ritarda esecuzione JavaScript fornita da WP Rocket per controllare il contenuto dinamico above the fold.

Gestendo i contenuti dinamici, ti occuperai dei seguenti consigli di PageSpeed:

  • Evita grandi spostamenti di layout
  • Evita enormi carichi utili di rete.

6. Preferire la proprietà di trasformazione CSS per le animazioni

Impatto sulle prestazioni: basso 🚀

L’ultima best practice per garantire la stabilità visiva è occuparsi delle animazioni. Puoi utilizzare la proprietà CSS: transform, che non attiva alcuna modifica al layout.

Ti occuperai del consiglio di PageSpeed ​​”Evita le animazioni non composte”.

Hai bisogno di aiuto per migliorare i tuoi vitali web principali?

I cheat sheet di Core Web Vitals sono il modo più semplice e veloce per imparare a ottimizzare LCP, FID e CLS. Risparmia tempo e scopri come dare priorità alle tue attività di performance!Inserisci la tua email qua…Sì, voglio questo!

Inizia oggi stesso a ottimizzare il tuo punteggio CLS su WordPress

In primo luogo, lo spostamento cumulativo del layout può influenzare enormemente l’esperienza dell’utente. Si spera che ora tu sappia come occuparti dei cambiamenti di layout e migliorare il punteggio CLS del tuo sito WordPress.

Non sei ancora un cliente WP Rocket? Risparmia tempo e lascia che WP Rocket faccia il lavoro per te. WP Rocket è il modo più semplice per migliorare il punteggio CLS e risolvere i problemi più critici. 

Non devi nemmeno toccare nessuna impostazione! WP Rocket applicherà automaticamente l’80% delle migliori pratiche per le prestazioni web. Vedrai subito un miglioramento istantaneo a occhio nudo nei tuoi punteggi di Core Web Vitals.

Inoltre, smetterai di gestire più plug-in per le prestazioni web. Avrai solo bisogno di WP Rocket per aumentare il tuo punteggio CLS: non è richiesta alcuna conoscenza tecnica, lo promettiamo!

Vuoi dare un’occhiata prima?