Spostamento cumulativo del layout (CLS)

[aioseo_eeat_author_tooltip]
[aioseo_eeat_reviewer_tooltip]
CLS-05-scalato-1

Il metodo CLS viene utilizzato per misurare il grado in cui il contenuto della pagina web si sposta o si modifica durante l'intero ciclo di vita del ciclo di rendering della pagina o, in altre parole, per misurare quanto è stabile l'aspetto visivo del sito web.

Probabilmente vi sarà capitato molte volte nella vita di constatare in prima persona quanto sia frustrante cliccare su una voce di un menu e cliccare accidentalmente su un annuncio pubblicitario, che poi vi porta a un sito web di terze parti, e quanto sia frustrante quando il contenuto della pagina web cambia nel bel mezzo di un'interazione. Naturalmente, i cambiamenti di layout sono fastidiosi anche per gli utenti. Tuttavia, possono anche causare problemi più significativi per gli editori web, tra cui alti tassi di rimbalzo e violazioni delle loro policy pubblicitarie dovute a clic accidentali dovuti a cambiamenti di layout.

Inoltre, poiché Google considera il CLS uno dei tre " Core Web Vitals ", un punteggio CLS basso può influire negativamente sul punteggio complessivo dei Core Web Vitals, con conseguente insuccesso per l'utente. Nell'ambito delle recenti modifiche all'algoritmo di ricerca di Google, i siti che ottengono un punteggio sufficiente nella valutazione dei Core Web Vitals vengono classificati più favorevolmente nei risultati di ricerca.

Esiste una correlazione diretta tra il miglioramento del punteggio CLS, il miglioramento dell'esperienza utente complessiva, il potenziale miglioramento del posizionamento su Google e l'aumento del traffico organico di Google.

Come viene misurato lo spostamento cumulativo del layout?

Quando un elemento visibile nella finestra di visualizzazione sposta la sua posizione iniziale per qualsiasi motivo, tale spostamento verrà registrato. Pertanto, verrebbe considerato instabile se cambiasse la sua posizione iniziale. È importante notare che è possibile creare uno spostamento di layout solo se un elemento visibile si sposta in una posizione diversa sulla pagina a causa di un evento che si verifica in quella pagina, e non se un nuovo elemento o un elemento esistente si espande o si riduce.

Un punteggio CLS è costituito da due misure specifiche progettate per tracciare gli spostamenti del layout: le frazioni di impatto e le frazioni di distanza. Queste due misure vengono utilizzate per determinare il punteggio CLS. La frazione di impatto misura l'impatto degli elementi instabili sulla finestra tra due frame, combinando l'elemento originale e lo spostamento come rapporto che può essere confrontato con l'area visibile totale della finestra tra i due frame. Nel caso di un elemento instabile che si muove orizzontalmente o verticalmente, la frazione di distanza rappresenta la distanza percorsa dall'elemento attorno alla finestra (orizzontale o verticale).

Come puoi migliorare il tuo punteggio CLS?

Per ridurre gli elementi instabili/il comportamento di spostamento, ecco alcuni consigli:

  • Pagine web diverse potrebbero ricevere punteggi CLS diversi a seconda della struttura del sito. Ad esempio, i punteggi CLS per le pagine degli articoli potrebbero essere più alti di quelli della homepage. Pertanto, il primo passo è misurare i punteggi CLS di tutti i modelli di pagina principali del sito.
  • Immagini e video dovrebbero sempre avere attributi di larghezza e altezza. Crea immagini responsive con proporzioni definite.
  • In alternativa, è possibile utilizzare i box CSS per le proporzioni per riservare lo spazio necessario agli elementi. Durante il caricamento, questo garantisce che il browser assegni la quantità di spazio appropriata nel documento.
  • La pubblicazione degli annunci può contribuire in modo significativo al cambiamento del layout se i posizionamenti non sono ottimizzati in modo appropriato.
  • Non inserire contenuti dinamici sopra contenuti già caricati, tranne in risposta alle interazioni dell'utente, nel qual caso il layout cambierà.

Aumenta le prestazioni di WordPress con i nostri servizi di ottimizzazione del sito !

Peso della pagina

Cos'è il peso della pagina?

Il peso della pagina è la dimensione totale del file di una pagina web. Questo include tutti i

Cos'è il monitoraggio reale del browser

Che cos'è il monitoraggio del browser reale?

Per comprendere il monitoraggio del browser reale, è essenziale capire cos'è un browser. Un browser

Che cosa è il tempo di risposta del server?

Cos'è il tempo di risposta del server?

Quando gli utenti visitano un sito web, il loro browser invia una richiesta al server del sito web

Inizia con Seahawk

Registrati alla nostra app per visualizzare i nostri prezzi e ottenere sconti.