Correggi l'errore CLS nei Core Web Vitals in GSC

Con l’introduzione dei Core Web Vitals in GSC, Google ha chiarito che considererà i Web Vitals per le pagine come fattore di ranking. Questo funzionerà insieme ad altri fattori di ranking di Google come la velocità della pagina, HTTPS, compatibilità mobile e navigazione sicura. Non sono ancora stati rilasciati molti dettagli, ma Google Search Console ha iniziato a mostrare report sui Core Web Vitals.

Consiste in tre metriche di prestazione web;

1. LCP: Largest Contentful Paint
2. FID: First Input Delay
3. CLS: Cumulative Layout Shift

Non ci sono molte informazioni disponibili al momento su come puoi risolvere questi problemi, ma ci sono alcune pratiche che possono aiutarti a risolvere il Cumulative Layout Shift (CLS) ‘ Più di’ per le tue pagine web.

Cos’è il Cumulative Layout Shift?

È una metrica di pagina che riporta la stabilità della pagina. In termini semplici, quando carichi una pagina web, inizi a leggere o a eseguire qualsiasi azione, e se improvvisamente il contenuto o gli elementi della pagina web saltano o cambiano, allora potrebbe causare problemi considerando l’esperienza visiva degli utenti.

CLS misura il totale di tutti i punteggi di spostamento del layout individuali per ogni spostamento del layout imprevisto che si verifica durante l’intera vita della pagina.

L’esempio sopra mostra che un caricamento improvviso di elementi sopra la casella di conferma dell’ordine ha causato un clic accidentale. Il CLS è la media di tutti questi spostamenti di contenuto della pagina.

Per fornire una buona esperienza utente, i siti dovrebbero sforzarsi di avere un punteggio CLS inferiore a 0.1

Cosa causa un alto CLS?

Ci possono essere diversi problemi che possono causare un CLS elevato, ma evidenzierò alcune delle ragioni principali;

• Ricarico del contenuto Lazy Load
• Immagini senza dimensioni
• Iniezione di annunci
• Embeds e iframe senza dimensioni
• Un contenuto in attesa di caricamento a causa di una risposta lenta

Ricarico del contenuto Lazy Load

Il Lazy Load è un meraviglioso plugin che carica le immagini solo quando una pagina viene scorsa e il contenuto entra nel viewport. Ma molte volte questo causa lo spostamento del contenuto su e giù, causando un ricarico, dove il contenuto sotto o attorno all’immagine viene spinto per fare spazio all’immagine appena caricata.

Iniezione di annunci

Gli annunci sono uno dei maggiori contributori agli spostamenti del layout sul web, spingendo il contenuto visibile che stai visualizzando verso il basso nella pagina. Lo fa caricando le unità pubblicitarie dopo che la pagina è stata caricata, causando un significativo Jank.

Elemento in attesa di caricamento a causa di una risposta lenta

A volte, a causa di una risposta HTTP lenta, alcuni elementi possono richiedere del tempo per caricarsi, causando uno spostamento del contenuto verso l’alto o verso il basso.

Come correggere l’errore CLS elevato nei Web Vitals?

Se le immagini richiedono tempo per caricarsi e il contenuto occupa spazio per le immagini. Allora, quando il contenuto si carica, sposta il contenuto verso il basso causando instabilità del layout.

Per le immagini che causano spostamenti di contenuto (Jank), riserva lo spazio necessario con le box di rapporto d’aspetto CSS. Questo approccio garantisce che il browser possa allocare la giusta quantità di spazio nel documento mentre i media si stanno caricando. Puoi leggere questo post per un caricamento di immagini senza Jank.

Le immagini caricate in modo lazy possono anche causare il problema, possono creare un enorme spazio prima di occupare lo spazio dell’immagine. Se stai affrontando il problema del ricarico del contenuto a causa del Lazy Loading delle immagini, puoi leggere questo articolo per le soluzioni.

Se posizioni annunci nel contenuto, assicurati che gli spostamenti siano eliminati riservando la dimensione dello slot. Usa un segnaposto se non viene restituito alcun annuncio piuttosto che collassare lo spazio riservato. Se stai usando WordPress, un buon plugin per annunci come Ad-Inserter si occuperà di mantenere lo spazio corretto per gli annunci, quindi non devi preoccuparti.

Evita contenuti dinamici, il contenuto dinamico è quello che viene inserito dopo che la pagina è stata caricata. Soprattutto il contenuto sopra la piega, ad esempio, newsletter, iscrizioni, post correlati nel DOM del contenuto. Evita di caricare questo tipo di contenuto sopra la piega, se possibile prova a usare una finestra pop-up.

Una risposta HTTP lenta dal server potrebbe anche causare instabilità del contenuto. Se stai usando un CDN e ci vogliono molti millisecondi per caricare gli elementi previsti e questo causa il salto del contenuto, allora devi creare uno spazio nel DOM o sincronizzare il caricamento con altri elementi.

Ci sono anche altre cause per un alto CLS, puoi trovare una guida dettagliata per ottimizzare il CLS sul sito ufficiale Web.Dev

Conclusione: Il post non contiene soluzioni tecniche o relative al codice, ma fornisce una panoramica di cosa causa esattamente il problema e come puoi affrontare la correzione del problema.

Se hai qualche pensiero su Correggi l’errore CLS nei Core Web Vitals in GSC, sentiti libero di lasciare un commento qui sotto. Inoltre, ti preghiamo di iscriverti al nostro canale YouTube di DigitBin per video tutorial. Saluti!