Cumulative Layout Shift (CLS) in WordPress: come eliminarlo

Con questo capitolo su Cumulative Layout Shift, ci stiamo avvicinando alla fine della nostra miniserie su Core Web Vitals per gli utenti di WordPress. Nei capitoli precedenti su Largest Contentful Paint e First Input Delay, abbiamo già parlato di cosa significano esattamente questi termini e di come ottimizzare il tuo sito web per ciascuno di essi. Ora, vogliamo fare lo stesso per CLS.

Di seguito, spieghiamo cos'è esattamente il Cumulative Layout Shift, come viene calcolato, come testare il tuo sito web per le sue prestazioni in quest'area e qual è un buon valore a cui mirare. Successivamente, ti forniamo istruzioni dettagliate per affrontare eventuali problemi CLS che potrebbero esistere sul tuo sito WordPress per migliorarli.

Al termine, insieme agli altri due post di questa serie, ci auguriamo che tu ti senta pronto a rendere il tuo sito Web idoneo per il timbro di approvazione di Google.

Qual è il significato dello spostamento cumulativo del layout?

Come al solito, iniziamo con una definizione. In una frase, CLS misura quando qualcosa cambia su una pagina web che fa spostare (o spostare se vuoi) gli elementi su di essa senza l'interazione dell'utente.

Può essere che un modulo o un annuncio nell'articolo che stai leggendo si carichi in ritardo e si sposti verso il basso nel paragrafo che stai leggendo, quindi devi scorrere per ritrovare il tuo posto. O peggio, cambia la posizione di un pulsante o di un collegamento in un momento inopportuno, così finisci per fare clic su qualcosa che non volevi.

Di conseguenza, può essere qualsiasi cosa, da leggermente fastidioso a decisamente esasperante. Cumulative Layout Shift è la metrica che cattura questo comportamento per comprendere il problema in modo da poterlo correggere.

Perché è importante?

Un sito Web nervoso interrompe completamente ciò che stai facendo attualmente e potrebbe persino avere fastidiose conseguenze nella vita reale. Come puoi immaginare, questo è davvero negativo per l'esperienza dell'utente e può indurre i visitatori ad andarsene. Ciò è particolarmente vero sugli smartphone dove, a causa delle dimensioni dello schermo, i piccoli spostamenti hanno un impatto maggiore rispetto alle macchine desktop.

Poiché è così dirompente, Google pone molta attenzione su questa metrica, rendendola uno dei valori fondamentali in base a cui giudica i siti web. Quindi, se vuoi accontentare sia i tuoi visitatori che le persone (intendo i robot) che decidono dove apparire nei risultati di ricerca, fai del tuo meglio per eliminare Cumulative Layout Shift sul tuo sito web.

Quali sono le cause CLS?

La causa dello spostamento degli elementi del sito Web è solitamente dovuta al fatto che i file di una pagina Web vengono caricati a velocità diverse. Un altro fattore sono gli elementi della pagina che vengono aggiunti dinamicamente durante o dopo il caricamento della pagina. Esempi tipici includono:

• Elementi visivi come immagini o video senza dimensioni correttamente definite
• Contenuti di terze parti come annunci, banner, incorporamenti o iframe
• Font Web più piccoli o più grandi dei font di fallback mostrati inizialmente

Un'altra fonte di CLS può essere il markup CSS e JavaScript in conflitto. Quando si bloccano a vicenda, blocca il processo di caricamento delle pagine web.

Come viene calcolato lo spostamento cumulativo del layout?

A differenza dei suoi predecessori, il calcolo di Cumulative Layout Shift è un po' più complicato. Per capirlo, dobbiamo prima stabilire alcuni termini:

• Spostamento del layout — Questo è quando un elemento già visibile sulla pagina si sposta dalla sua posizione iniziale dopo essere già stato renderizzato. Questi tipi di elementi sono chiamati elementi instabili (creativi, lo so).
• Spostamenti di layout previsti e imprevisti : i cambiamenti di layout sono negativi solo se l'utente non se li aspetta. Ci sono anche cambiamenti di layout che sono attesi e graditi, come dopo un'interazione con una pagina web (ad esempio l'invio di un modulo). Le animazioni e le transizioni CSS sono altri esempi di cambiamenti di layout previsti. Per tenere conto di ciò, CLS considera prevedibili tutti i cambiamenti di layout che si verificano entro 500 ms dall'interazione dell'utente.
• Frazione di impatto — La percentuale del viewport (la parte visibile del sito Web sullo schermo) che un elemento in movimento influisce come numero decimale (ad es. 0,5 se influisce sul 50% dello schermo).
• Frazione di distanza — Distanza come percentuale dello schermo spostata da un elemento instabile durante uno spostamento. Indicato anche come numero decimale.
• Punteggio spostamento layout : viene calcolato moltiplicando la frazione dell'impatto con la frazione della distanza (ad es. 0,4 x 0,15 = 0,06). Di conseguenza, elementi di grandi dimensioni che si spostano su una distanza maggiore risultano in un punteggio più alto rispetto a elementi piccoli che si spostano su una distanza breve.

CLS acquisisce la più grande occorrenza di punteggi di spostamento del layout imprevisti durante un intervallo di cinque secondi. Ovviamente, più basso è meglio.

Alla fine, non hai davvero bisogno di conoscere i dettagli. Tutto quello che devi sapere è come misurare il CLS e quale valore dovrebbe perseguire il tuo sito.

Che cos'è un buon punteggio di spostamento del layout?

Un buon punteggio è avere un valore CLS di 0,1 o inferiore. Fino a 0,25 necessita di miglioramenti, qualsiasi valore superiore è negativo e probabilmente risulterà in una riduzione delle prestazioni di ricerca.

Come testare lo spostamento cumulativo del layout

Per poter migliorare il punteggio CLS sul tuo sito web, devi prima sapere dove ti trovi. È difficile sapere se accada, perché le pagine web non si comportano sempre allo stesso modo su dispositivi diversi. Pertanto, potresti non vederlo su un sito di sviluppo ma i visitatori possono comunque incontrarlo. Per questo motivo, è meglio testarlo.

Esistono diversi modi per verificare se Cumulative Layout Shift è un problema sul tuo sito WordPress. Sono praticamente le stesse delle altre metriche di Core Web Vitals. Il tuo primo punto di riferimento dovrebbe sempre essere PageSpeed ​​Insights, che mostra la metrica nella sua pagina dei risultati.

Tieni presente che utilizza sia i risultati di laboratorio sia i dati reali del rapporto sull'esperienza utente di Chrome. Mostra anche immagini dei turni di layout e dell'elemento sorgente. In questo modo, hai un'idea migliore di quale sia il problema e dove si verifica.

Inoltre, PageSpeed ​​Insights ti fornisce il rapporto di quanto ciascun elemento contribuisce al punteggio CLS. Ciò ti consente di dare la priorità a ciò che ha il maggiore impatto negativo.

A parte questo, puoi anche utilizzare quanto segue:

• Il report Core Web Vitals all'interno di Google Search Console
• Strumenti per sviluppatori del browser Chrome
• Faro
• libreria JavaScript web-vitals

C'è anche un'estensione per Chrome chiamata CLS Visualizer. Evidenzia elementi in movimento sulle tue pagine web. Per Firefox, prova SpeedVitals.

Come ridurre lo spostamento cumulativo del layout sul tuo sito WordPress

Se noti che CLS è un problema sul tuo sito WordPress, probabilmente vorrai risolverlo. Questo è ciò di cui tratta il resto di questo articolo.

Fornisci le dimensioni del supporto

Molte soluzioni diventano già chiare quando dai un'occhiata alle cause Cumulative Layout Shift sopra. Come accennato, un colpevole comune di CLS sono le immagini e altri media senza valori width e height definiti. Senza dimensioni fisse, il browser non sa quanto spazio riservargli. Questo è particolarmente vero per i media che appaiono sulla pagina in un secondo momento, come nel lazy loading.

Sfortunatamente, è pratica comune del design reattivo non fornire dimensioni specifiche dell'immagine. Molto spesso, le immagini sono impostate su width o max-width: 100%; e height: auto; . Quindi spetta al browser capire quali sono le dimensioni effettive quando scarica l'immagine.

In passato, questo spesso portava esattamente al tipo di comportamento che stiamo cercando di evitare. Le immagini improvvisamente sono emerse, spostando tutto il resto. Pertanto, dovresti sempre fornire le dimensioni per i tuoi elementi visivi o almeno un rapporto di aspetto CSS.

Fortunatamente, se utilizzi WordPress, il tuo sito Web imposta automaticamente le dimensioni dell'immagine. Pertanto, il problema di solito non entra in gioco.

Se questo non è il caso di un'immagine specifica, puoi correggerlo nell'editor Gutenberg.

Gestione di annunci, incorporamenti e contenuti simili

I contenuti di terze parti caricati nelle pagine sono spesso una delle maggiori fonti di CLS. Questi sono casi in cui non hai necessariamente il controllo delle dimensioni del prodotto finale. Né i suoi editori sanno in anticipo quanto spazio è disponibile sul sito in cui appare. Pertanto, è necessario dichiararne le dimensioni allo stesso modo delle immagini.

Fortunatamente ancora per gli utenti di WordPress, quando si utilizza l'editor Gutenberg per incorporare automaticamente contenuti da social network, portali video o fornitori simili nei propri contenuti, l'editor aggiunge automaticamente le dichiarazioni width e height appropriate.

In questo modo, anche se il contenuto impiega più tempo a caricarsi rispetto al resto della pagina, ha già riservato la dimensione corretta. Di conseguenza, il layout non si sposta quando appare.

Per altri tipi di contenuto che aggiungi manualmente, assicurati di aggiungere manualmente width e height . Se non conosci l'altezza esatta che occuperà un annuncio o un altro elemento, aggiungi almeno una proprietà min-height . Ciò consente ancora elementi più grandi ma riserva un po' di spazio e può eliminare o almeno ridurre CLS sulla pagina.

Un'altra tecnica per ridurre al minimo lo spostamento cumulativo del layout in WordPress per i contenuti di terze parti è evitare di posizionarli in alto nella pagina. Più è in alto, più contenuti al di sotto possono spingere verso il basso e più alto è il tuo punteggio CLS. Pertanto, se puoi, posizionalo al centro o in basso.

Ottimizza il contenuto dinamico

I contenuti dinamici sono elementi di pagina che vengono aggiunti a una pagina dopo che è già stata caricata. L'esempio precedente era costituito da immagini caricate in modo pigro, ma in genere include anche elementi come banner, moduli o persino prodotti correlati che vengono visualizzati sullo scorrimento.

Naturalmente, se non li pianifichi correttamente, può anche portare a cambiamenti di layout. Ecco alcuni modi per evitarlo:

• Prenota lo spazio in anticipo — Analogamente a quanto sopra, se disponi di un contenitore con una dimensione fissa in cui puoi caricare il contenuto, mantiene il layout stabile anche se arriva in un secondo momento. Un contenitore fisso può anche essere una giostra o qualcosa di simile.
• Collegalo a un'interazione dell'utente : se il contenuto viene caricato dinamicamente dopo un'azione dell'utente, non comporta alcuna penalità per CLS, anche se il layout cambia. Tieni presente però il limite di 500 ms.
• Carica contenuto fuori dallo schermo : se carichi contenuto al di fuori del viewport e poi fornisci all'utente un avviso che è disponibile e un'opzione per scorrere fino ad esso, non c'è nemmeno CLS. Alle piattaforme di social media piace farlo per i nuovi aggiornamenti.

Migliora la gestione dei caratteri Web

I caratteri Web possono anche causare uno spostamento del layout. Le due forme comuni sono che si vede il testo senza stile prima che arrivi il font web (Flash of Unstyled Text o FOUT) o non si vede alcun testo all'inizio e poi arriva insieme al font web (Flash of Invisible Text o FOIT).

Entrambi possono portare a cambiamenti di layout ed ecco cosa puoi fare al riguardo:

• Utilizza il formato di carattere corretto : se carichi caratteri personalizzati nel tuo sito Web WordPress, assicurati di utilizzare il formato WOFF2 o WOFF. Quelli hanno l'impronta più piccola, si caricano più velocemente e aiutano a evitare i problemi di cui sopra.
• Usa il carattere di riserva corretto : se stai utilizzando un carattere di riserva che è molto diverso dal tuo carattere effettivo, il momento in cui si verifica il passaggio probabilmente porterà a un movimento del layout. Puoi evitarlo usando un font fallout vicino al prodotto finale. Il Font Style Matcher può aiutarti a trovarne uno.
• Precarica i caratteri : posiziona le risorse dei caratteri Web all'inizio del documento e aggiungi loro rel=preload . In questo modo, i browser daranno loro la priorità.

Aiuta anche a ospitare i font localmente o almeno a utilizzare un CDN per renderli disponibili agli utenti il ​​più velocemente possibile. In questo modo, riduci la probabilità di cambiare font in ritardo durante il caricamento e causare cambiamenti di layout.

Non lasciare che lo spostamento cumulativo del layout deprezzi il tuo sito WordPress

Cumulative Layout Shift è una delle tre metriche che Google considera vitali e l'ultima di questa serie approfondita. È un indicatore importante per l'esperienza dell'utente in quanto misura la stabilità del layout della pagina durante e anche dopo il caricamento.

Come le altre metriche in Core Web Vitals, non è importante solo per gli utenti, ma conta anche per il ranking di ricerca ed è quindi importante per il successo del tuo sito web.

Ormai sai cos'è, come viene calcolato, cosa lo sta causando e come testarlo e affrontarlo. Possa il tuo layout essere solido per sempre, amico mio.

Hai altri suggerimenti su come prevenire lo spostamento cumulativo del layout in WordPress? Fateci sapere nei commenti qui sotto!