Hai problemi con il cumulative layout shift (CLS) in WordPress?
Cumulative Layout Shift, o CLS in breve, è una metrica incentrata sull’esperienza utente che fa parte della nuova iniziativa Core Web Vitals di Google .
Se hai mai sfogliato una pagina che “salta” mentre viene caricata, hai sperimentato il cambio di layout e sai anche quanto può essere fastidioso il cumulative layout shift in WordPress. Ma oltre a infastidire i tuoi visitatori, il CLS può anche influenzare il posizionamento nei motori di ricerca, quindi è importante risolvere eventuali problemi del tuo sito.
Fortunatamente, non è necessario essere un mago della tecnologia per identificare e risolvere i problemi di cumulative lyout shift. Comprendendo le cause e sapendo come correggerle, puoi ridurre il numero di cambiamenti imprevisti sul tuo sito web.
In questo articolo, ti presenteremo la metrica cumulative layout shift di Google e ti mostreremo come rilevare i problemi di CLS sul tuo sito. Quindi, ti guideremo attraverso tre semplici modi per risolvere i problemi e ridurre il punteggio CLS del tuo sito.
Cos’è il cumulative layout shift
Lo spostamento del layout si verifica quando il contenuto della pagina si sposta senza l’interazione dell’utente.
Un esempio comune sono gli annunci pubblicitari a caricamento tardivo, che probabilmente hai riscontrato sui siti web multimediali. Potresti aver iniziato a leggere il testo sulla pagina solo per essere “spinto” verso il basso da un annuncio pubblicitario che viene visualizzato dopo che la pagina è già stata caricata.
Il cumulative layout shift è una metrica che misura tutto lo spostamento del layout che si verifica sulla pagina e lo inserisce in un unico punteggio. In generale, un punteggio alto indica molti cambiamenti di layout (non buono), mentre un punteggio basso indica pochi cambiamenti di layout (buono). E un punteggio pari a zero significa che il tuo sito ha zero problemi di spostamento del layout, il che è perfetto.
Come puoi immaginare, spostare gli elementi può generare mal di testa per i tuoi utenti. c’è il rischio che facciano clic inavvertitamente su una parte della tua pagina o addirittura effettuare accidentalmente un acquisto.
Anche se non ci sono conseguenze dirette, molti cambiamenti di layout possono essere visivamente fastidiosi. Inoltre possono rallentare i tempi di caricamento. Questo problema apparentemente lieve può avere gravi ripercussioni sull’esperienza utente (UX) del tuo pubblico .
Sfortunatamente, i problemi con un punteggio di Cumulative Layout Shift elevato non finiscono qui. Il Cumulative Layout Shift fa anche parte della nuova iniziativa Core web Vitals di Google. A partire dall’aggiornamento di Google Page Experience, i punteggi dei Core web Vitals del tuo sito sono ora un fattore di ranking SEO, il che significa che i problemi con il CLS possono influenzare il ranking del tuo sito .
Come identificare i problemi con il cumulative layout shift in WordPress
Per conoscere il punteggio cumulative Layout del tuo sito e identificare i problemi, ti consigliamo di utilizzare PageSpeed Insights . Ti fornirà il punteggio CLS complessivo del tuo sito, ma andrà anche più in profondità e segnalerà i problemi specifici di spostamento del layout che stanno causando problemi.
Per iniziare, inserisci il tuo URL nella casella e fai clic su Analizza . Il processo dovrebbe richiedere solo pochi istanti. Quando ricevi i risultati, scorri verso il basso fino e cerca il punteggio di cumulative lyout shift del tuo sito:
Da qui, puoi determinare il rendimento del tuo sito in quest’area. Come regola generale, ci sono tre potenziali intervalli in cui il tuo punteggio CLS può rientrare:
- Good , che è uguale o inferiore a 0,1
- OK , che è compreso tra 0,1 e 0,25
- Bad , che è 0,25 o più
Poiché questa metrica influisce direttamente sull’ottimizzazione dei tuoi Core web Vitals , dovresti cercare di puntare ad un punteggio più basso possibile. Per suggerimenti più specifici su come farlo, puoi scorrere verso il basso fino alla sezione Diagnostica e guardare Evita significative variazioni di layout . Questa sezione elencherà i singoli cambiamenti di layout sul tuo sito:
Queste informazioni possono aiutare a evidenziare aree specifiche del tuo sito che potrebbero richiedere un po’ di lavoro. Una volta identificato il problema, puoi applicare alcuni semplici metodi per risolverlo.
Come correggere il cumulative layout shift in WordPress (3 modi)
Diamo un’occhiata a tre modi efficaci per risolvere i problemi di CLS. Questi metodi sono più efficaci se usati insieme, quindi ti invitiamo a provare ogni approccio.
1. Aggiungi dimensioni alle tue immagini, video e annunci
Se hai diversi media sul tuo sito web, è probabile che ogni immagine e video abbia dimensioni diverse. Questo è probabilmente inevitabile, indipendentemente dal tipo di sito che gestisci.
In sostanza, questa varianza non ha un impatto diretto sul punteggio CLS. Tuttavia, rappresenta ancora una minaccia: se non specifichi le dimensioni dell’articolo, puoi incorrere in problemi.
L’aggiunta di dimensioni è essenziale perché fornisce istruzioni di caricamento vitali ai browser. Le informazioni sulle dimensioni aiutano i browser a riservare la corretta quantità di spazio per quella risorsa.
Se il browser non è in grado di farlo, potrebbe prevedere la quantità di spazio errata. Di conseguenza, potrebbero esserci delle correzioni dopo che la pagina è stata caricata, portando a uno spostamento del layout. Lo stesso principio si applica agli annunci o a qualsiasi materiale incorporato nel tuo sito.
Fortunatamente, le versioni recenti di WordPress si occupano in gran parte di questo problema. Se inserisci un’immagine tramite l’editor di WordPress, WordPress gestirà automaticamente la definizione delle sue dimensioni per te. Puoi vedere i risultati selezionando qualsiasi supporto:
Se aggiungi immagini manualmente con il codice o tramite un plugin, assicurati che le dimensioni dell’immagine siano presenti.
Un altro problema con il CLS su WordPress è la pubblicità. Se inserisci annunci pubblicitari nei tuoi contenuti , dovrai assicurarti di riservare spazio a tali annunci per evitare CLS.
Un modo per farlo è applicare le proprietà CSS min-height e min-width al contenitore <div>che contiene il tuo annuncio: Google ha una guida su come farlo .
Se ad esempio, visualizzi un annuncio 300x250px all’interno di un div con l’id in-content-ad, puoi prenotare spazio utilizzando questo codice:
<div id="in-content-ad" style="min-width: 300px; min-height: 250px;">INSERIRE IL CODICE DELL'ANNUNCIO QUI</div>
Alcuni strumenti pubblicitari potrebbero anche offrire strumenti per aiutarti a raggiungere questo obiettivo. Ad esempio, se utilizzi Google Ads , Google fornisce un editor di annunci per aiutarti in questo.
2. Precarica i tuoi caratteri
Proprio come con i media, il tuo sito probabilmente utilizza tipi di font diversi. Ciò significa che possono anche occupare quantità variabili di spazio. A differenza dei media, tuttavia, non è possibile impostare esattamente le dimensioni per i caratteri.
La soluzione è invece precaricare queste risorse. Il precaricamento dei font segnala ai browser che dovrebbe essere una delle prime cose che genera per una determinata pagina. Includendo i caratteri come prima cosa, elimini la necessità di uno spostamento correttivo.
Questo metodo può essere particolarmente critico se utilizzi molti font WordPress personalizzati . Questi possono variare notevolmente di dimensioni rispetto ai normali caratteri, il che significa che questa semplice modifica può avere un grande impatto. Tuttavia, è probabile che anche i siti meno dipendenti dai caratteri sperimentino almeno un lieve miglioramento del punteggio CLS.
Molti plugin per le prestazioni di WordPress includono opzioni per precaricare i caratteri. Ad esempio, Autoptimize, Asset CleanUp, Perfmatters e WP Rocket.
Per la maggior parte delle persone, l’utilizzo di uno di questi plugin è la soluzione più semplice per precaricare i font di WordPress.
Gli utenti più avanzati, possono anche precaricare i caratteri con snippet di codice personalizzato. Per aggiungere questo snippet di codice, dovrai modificare il file header.php tuo tema child . Puoi modificare questo file andando su Aspetto > Editor del tema > Theme Header sul tuo sito WordPress:
Dopo aver modificato il file header.php nel tema figlio, scorri fino alla fine della pagina, quindi copia e incolla la seguente riga di codice, assicurandoti di sostituire il collegamento del carattere di esempio, roboto.woff2 in questo esempio, con il collegamento effettivo al carattere file che stai utilizzando sul tuo sito:
<link rel="preload" href="roboto.woff2" as="font" type="font/woff2" crossorigin="anonymous"/>
Quando sei pronto, fai clic su Aggiorna file per salvare le modifiche. Questo è tutto ciò che devi fare: ora i caratteri del tuo sito web avranno la priorità di caricamento nei browser.
3. Ottimizza i tuoi contenuti dinamici
Infine, parliamo del contenuto dinamico del tuo sito. Contenuti dinamici come moduli di iscrizione alla newsletter , richieste di installazione di app, avvisi GDPR e così via possono tutti causare cambiamenti di layout regolando nuovamente il browser dopo che la pagina è quasi completamente caricata.
Tuttavia, questo si applica solo al contenuto dinamico che non viene attivato dall’interazione dell’utente. Ad esempio, se stai caricando una barra di notifica automatica per salutare le persone sulla tua home page, ciò potrebbe danneggiare il tuo punteggio CLS.
Ci sono due modi per risolvere questo problema:
- Attiva il contenuto dinamico solo dopo l’interazione dell’utente, che non influirà sul tuo punteggio CLS. Ad esempio, invece di mostrare subito il modulo di attivazione dell’e-mail, potresti attivarlo quando un utente fa clic su un pulsante per creare un consenso in due passaggi.
- Usa i CSS per riservare spazio agli elementi dinamici, in modo simile a quanto discusso sopra. Ad esempio, se utilizzi i CSS per riservare spazio alla barra delle notifiche nella parte superiore della pagina, puoi comunque caricare quella barra senza causare uno spostamento del layout.
Correggi per sempre il CLS in WordPress
Se vuoi creare una buona esperienza utente e migliorare il tuo punteggio in Core web Vitals, è importante avere un punteggio Cumulative Layout Shift basso. Fortunatamente, prevenire questo fastidioso problema non è difficile. Puoi correggere i problemi di caricamento del tuo sito prestando attenzione a poche semplici impostazioni.
In questo articolo, abbiamo trattato tre modi per correggere e ridurre il cumulative layout shift in WordPress:
- Assicurati che tutti i tuoi media e annunci abbiano dimensioni chiaramente definite. WordPress gestirà automaticamente le immagini che incorporerai nell’editor, ma potresti dover definire manualmente le dimensioni per gli annunci pubblicitari e tutte le immagini che aggiungi al di fuori dell’editor.
- Precarica i tuoi caratteri per evitare modifiche dell’ultimo minuto.
- Presta attenzione a come implementi il contenuto dinamico, richiedendo l’interazione dell’utente o riservando spazio per eventuali elementi dinamici.
Buon lavoro.
