Spostamento cumulativo del layout: migliora il punteggio CLS di Google

Ti sei mai trovato in una situazione in cui il pulsante di pagamento scompare quando provi a effettuare un ordine?

Sì! È frustrante.

La verità è che succede troppo spesso e con troppi di noi.

Per fortuna, come sempre, Google dà la priorità all'esperienza dell'utente sopra ogni altra cosa.

Questo è il motivo per cui, a partire dal 2021, lancerà tre nuove metriche delle prestazioni come parte dei suoi principali dati vitali.

Il Core Web Vitals è progettato per misurare la velocità di caricamento, l'interattività e la stabilità visiva di una pagina.

Tre metriche rappresentano queste:

1. Il più grande contenuto di pittura (LCP)

2. Primo ritardo di ingresso (FIP)

3. Layout cumulativo Shift (CLS)

Comprendiamo il CLS sia dal punto di vista degli utenti che dei webmaster (SEO).

Che cos'è lo spostamento cumulativo del layout?

Il Cumulative Layout Shift (CLS) rappresenta la stabilità visiva di un sito web.

Misura la quantità di spostamenti di layout insignificanti su una pagina.

I cambiamenti di layout imprevisti sono il risultato di una pagina Web che si sposta su se stessa senza l'input dell'utente.

Google CLS è una sorta di indicatore (Segnale) per risolvere il problema misurando la frequenza con cui un movimento imprevisto degli elementi della pagina influisce sull'esperienza dell'utente.

Uno spostamento in un layout può verificarsi ogni volta che un elemento visibile cambia la sua posizione da un fotogramma renderizzato a quello successivo.

Proviamo a capirne il significato comune e definiamo in parole semplici “Cumulative Layout Shift”:

Il cumulativo è un aumento della quantità.

Il layout è il Frame

Uno spostamento è un cambio di posizione

In poche parole, lo spostamento cumulativo del layout è la somma totale di tutte le modifiche ai singoli frame nelle posizioni di progettazione del sito Web.

Immagine proveniente da web.dev

Il punteggio CLS standard dovrebbe essere inferiore a 0,1.

Una buona soglia per misurare lo stesso è il 75° percentile di caricamento delle pagine su dispositivi mobili e desktop.

Nell'immagine sopra, è chiaro che Secondo Google:

1. Se il punteggio CLS è inferiore a 0,1, è un buon segnale. Significa che il tuo sito non ha problemi con alcun cambiamento di layout.

2. Se il punteggio CLS è compreso tra 0,1 e 0,25, significa che il tuo sito necessita di alcuni miglioramenti nei layout visivi.

3. Se il punteggio CLS è superiore a 0,25, è un segnale scarso, il che significa anche che il movimento dell'elemento visivo si verifica molto frequentemente.

Come viene calcolato lo spostamento cumulativo del layout?

Google calcola il CLS di una pagina calcolando la frazione di impatto e la frazione di distanza per ogni spostamento imprevisto del layout.

Frazione di impatto di CLS

Misura la quantità di spazio che un elemento instabile occupa in un'area della finestra tra due fotogrammi.

Formula per calcolare la frazione di impatto per CLS

Per calcolare il punteggio di spostamento del layout, abbiamo bisogno della frazione di impatto.

Come calcolare la frazione di impatto per CLS?

La rappresentazione grafica ti aiuterà a capire meglio le frazioni di impatto.

 Frazione di impatto = [Area della regione di impatto] / [Area di vista] Frazione di impatto = [330 x 490] / [375 x 667] Frazione di impatto = [161700] / [250125] Frazione di impatto = 0,645

Frazione di distanza di CLS

È la misura della quantità di spazio che l'elemento della pagina ha spostato dalla posizione originale alla posizione finale che sostanzialmente cambia nel layout.

Per evitare casi penalizzanti eccessivi, spostare in elementi grandi una piccola quantità presa in considerazione introducendo Frazione di distanza.

Formula per calcolare la frazione di distanza per CLS

Come calcolare la frazione di distanza per CLS?

La rappresentazione grafica ti aiuterà a capire meglio la frazione di distanza.

Frazione di distanza = [Max. Sposta distanza] / [Altezza di ViewPort] Frazione di distanza = [120] / [667] Frazione di distanza = 0,179

Formula per calcolare il punteggio CLS di Google

Il punteggio cumulativo del layout viene calcolato moltiplicando la frazione di impatto per la frazione di distanza:

 Spostamento cumulativo del layout (CLS) = Frazione di impatto x Frazione di distanza

CLS = 0,645 x 0,179 CLS = 0,1154 .

Il punteggio CLS continua ad aumentare con l'aumento dell'impatto e della frazione di distanza.

Spostamento cumulativo del layout con un semplice esempio.

Hai visitato un sito e hai visto qualcosa di interessante da leggere.

Vai avanti per fare clic sul collegamento.

Ma proprio mentre stavi per fare clic sul collegamento, si sposta in basso nella pagina Web di mezzo pollice e finisci per fare clic su un annuncio che è stato posizionato appena sopra di esso.

Fonte: nitropack.io

Suona ingiusto, vero?

È un cambio di layout inaspettato.

Significa solo che verrai reindirizzato a una pagina di destinazione indesiderata da cui devi tornare alla pagina Web originale.

Abbiamo anche qualcosa conosciuto come il cambio di layout previsto.

Succede quando fai clic su qualcosa in una pagina web e cambia il layout corrente della pagina.

Ad esempio, vai su un blog alla ricerca di una particolare informazione.

Non appena inserisci il nome dell'argomento nella barra di ricerca, recupererà un particolare post del blog in cui troverai le informazioni richieste o visualizzerai un paio di post del blog relativi all'argomento.

Fonte: nitropack.io

Questo è un risultato atteso dalla pagina web e può essere considerato un cambiamento di layout previsto.

Quali sono le cause dei problemi di CLS?

Secondo Google, il gigante dei motori di ricerca, ci sono 5 possibili ragioni per Cumulative Layout Shift :

Immagini e Video senza dimensioni

Si consiglia di specificare sempre la larghezza e l'altezza delle immagini e dei video.

Puoi anche utilizzare le caselle delle proporzioni CSS per consentire al browser di allocare la giusta quantità di spazio sulla pagina Web durante il caricamento dell'immagine.

Annunci, incorporamenti e iframe senza dimensioni

Le dimensioni degli annunci possono aumentare le entrate grazie a un CTR elevato.

Tuttavia, ciò può compromettere la qualità dell'esperienza utente spingendo il contenuto verso il basso nella pagina.

Questo cambiamento di layout può essere mitigato riservando spazio per gli spazi pubblicitari, eliminando i cambiamenti riservando la dimensione più grande possibile per l'area annuncio o scegliendo la dimensione migliore possibile dell'area annuncio in base ai dati storici.

Contenuto iniettato dinamicamente

Evita di inserire nuovi contenuti al di sopra di quelli esistenti, a meno che non siano in risposta all'interazione dell'utente.

Ciò garantirà che eventuali cambiamenti di layout che si verificano siano sempre previsti anziché attivare lo spostamento imprevisto dell'immagine o del testo.

Font Web che causano FOIT/FOUT

Prova a utilizzare font: visualizza i valori con i tuoi font personalizzati come auto, swap, block, fallback e facoltativo, per evitare inutili spostamenti di layout.

Per essere certi che non vi sia alcun cambiamento di layout, usa font:display insieme a link rel=preload.

Qualsiasi elemento che utilizza quel font sarà nascosto fino a quando l'asset del font non sarà stato scaricato completamente, è noto come FOIT (Flash of invisible text).

Una fonte di animazione: malthemilthers.com

La visualizzazione di un font di fallback nello stack di font fino al caricamento di quello personalizzato è noto come FOUT(Flash of unstyled text).

Azioni in attesa di una risposta di rete prima dell'aggiornamento del DOM

Scegli sempre le animazioni di "trasformazione" per le animazioni di proprietà che attivano le modifiche al layout.

In che modo il punteggio CLS di Google viene influenzato dagli annunci?

Per gestire gli annunci che causano CLS, è necessario definire lo stile dell'elemento in cui verrà visualizzato l'annuncio.

Pertanto, se stili div, la divisione dell'immagine o del video in un WordPress o qualsiasi elemento del sito Web con una misura di altezza e larghezza specifica, il tuo annuncio sarà vincolato solo alle dimensioni menzionate.

Se un elemento contenente un annuncio non mostra l'annuncio, puoi impostarlo in modo che un banner alternativo o un'immagine segnaposto possano riempire lo spazio vuoto.

In alternativa, un annuncio può riempire l'intera riga nella parte superiore di una colonna nella parte inferiore destra o sinistra della pagina per determinati layout.

Se la pagina non viene visualizzata, non ci sarà uno spostamento e non farà alcuna differenza su dispositivo mobile o desktop.

Tuttavia, dovresti notare che dipende dal layout del tema e dovrai testarlo se c'è un problema con l'inventario pubblicitario.

In che modo CLS può scorrere durante lo sviluppo Web?

Google CLS può passare attraverso la fase di sviluppo.

Ecco cosa può succedere.

Molte delle risorse necessarie per eseguire il rendering di una pagina Web vengono caricate nella cache di un browser.

La prossima volta che uno sviluppatore visita la pagina in fase di sviluppo, non noterà uno spostamento del layout poiché gli elementi della pagina sono già stati scaricati.

Si consiglia quindi di avere una misurazione sul campo o in laboratorio.

Test di spostamento cumulativo del layout

Le metriche cumulative del sito Web delle prestazioni di spostamento del layout possono essere misurate in uno dei seguenti modi:

Strumenti da campo

Sul campo: su utenti reali che interagiscono effettivamente con la pagina. Può essere misurato utilizzando i seguenti strumenti di campo:

Rapporto sull'esperienza utente di Chrome

Fornisce metriche sull'esperienza utente su come gli utenti di Chrome nel mondo reale sperimentano le destinazioni popolari sul Web.

Approfondimenti sulla velocità della pagina

Questo strumento analizza il contenuto di una pagina web e genera suggerimenti per rendere quella pagina più veloce di prima.

Search Console (rapporto Core Web Vitals)

Search Console mostra il rendimento delle tue pagine in base ai dati di utilizzo del mondo reale (a volte chiamati dati sul campo).

Strumenti di laboratorio

In laboratorio: l'utilizzo di strumenti per simulare il caricamento di una pagina in un ambiente controllato può essere misurato utilizzando i seguenti strumenti di laboratorio:

Strumenti di sviluppo di Chrome

Chrome DevTools può aiutarti a modificare le pagine al volo e diagnosticare rapidamente i problemi, il che in definitiva ti consente di creare siti Web migliori più velocemente.

Faro

LightHouse è uno strumento automatizzato open source per migliorare la qualità delle pagine web.

Puoi eseguirlo su qualsiasi pagina Web, pubblica o che richiede l'autenticazione.

Dispone di audit per prestazioni, accessibilità, app Web progressive, SEO e altro ancora.

Pagina WebTest

Esegui un test di velocità del sito Web gratuito da tutto il mondo utilizzando browser reali a velocità di connessione dei consumatori con consigli di ottimizzazione dettagliati.

Secondo il web.dev ; Attenzione: gli strumenti di laboratorio in genere caricano le pagine in un ambiente sintetico e misurano solo gli spostamenti di layout durante il caricamento della pagina.

Di conseguenza, i valori CLS riportati dagli strumenti di laboratorio per una determinata pagina potrebbero essere inferiori a quelli che gli utenti reali sperimentano sul campo.

Strumenti rapidi per controllare lo spostamento cumulativo del layout

1. CLS in formato GIF da Defaced Tool di Chris Johnson a Identifica il problema LS.

2. Calcolatore di spostamento cumulativo del layout

Difetto nei calcoli CLS

Google ha ricevuto feedback sul fatto che la metrica CLS fosse inadeguata per misurare le pagine Web aperte da molto tempo, penalizzandole con punteggi più bassi.

Google ha esaminato tre soluzioni per aggiornare il modo in cui ha ottenuto il punteggio CLS, quindi non c'è nulla di cui preoccuparsi che i punteggi CLS peggiorino a causa di questa modifica.

Finestre di sessione per la misurazione del CLS

Google ha optato per un approccio a finestra di sessione per misurare il CLS.

La misurazione degli elementi della pagina viene misurata in finestre di sessione, che corrispondono a diverse parti di una pagina Web che un utente raggiunge mentre scorre la pagina Web verso il basso.

Il punteggio totale per ciascuna finestra di sessione è lo spostamento cumulativo del layout, lo spostamento totale dell'intera pagina.

Il 3% delle pagine Web con scorrimento infinito o con gestori dell'interfaccia utente che sono lenti a reagire all'interazione dell'utente vedrà i propri punteggi salire a una buona valutazione.

L'aggiornamento rende i punteggi CLS più accurati

È un vantaggio per gli editori con il nuovo sistema di punteggio che sta diventando più equo, in particolare per le pagine Web aperte da molto tempo o che utilizzano lo scorrimento infinito e per questo motivo sono state valutate in modo ingiusto.

Con le metriche di Core Web Vitals che stanno per diventare un fattore di ranking a maggio 2021, è un cambiamento importante da apportare all'ultimo minuto.

Conclusione

Comprendere il Cumulative Layout Shift (CLS) ti aiuterà a offrire una migliore esperienza utente nei prossimi giorni.

Poiché la metrica fa parte di Core Web Vitals per migliorare l'UX ed è programmata per diventare un segnale di ranking nel 2021, è importante comprenderne l'importanza e l'impatto sul tuo sito.