Il metodo CLS viene utilizzato per misurare il grado di spostamento del contenuto della pagina web durante l'intero ciclo di vita del rendering della pagina o, in altre parole, per misurare la stabilità dell'aspetto visivo del sito web.
Probabilmente vi sarà capitato molte volte di constatare in prima persona quanto sia frustrante poter cliccare su una voce di un menu e cliccare per sbaglio su una pubblicità, che poi vi porta su un sito web di terzi, e quanto sia frustrante quando il contenuto della pagina web si sposta nel bel mezzo di un'interazione. Naturalmente, anche i cambiamenti di layout sono un fastidio per gli utenti. Tuttavia, sono anche in grado di causare problemi più significativi per gli editori web, tra cui un'elevata frequenza di rimbalzo e la violazione delle loro politiche pubblicitarie a causa di clic accidentali dovuti a spostamenti 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 bocciatura dell'utente. In seguito alle recenti modifiche apportate all'algoritmo di ricerca di Google, i siti che ricevono un punteggio positivo nella valutazione dei Core Web Vitals vengono classificati in modo più favorevole nei risultati di ricerca.
Esiste una correlazione diretta tra il miglioramento del punteggio CLS, il miglioramento dell'esperienza complessiva dell'utente, il potenziale miglioramento del posizionamento su Google e l'aumento del traffico organico su Google.
Come si misura lo spostamento cumulativo del layout?
Quando un elemento visibile nella finestra di visualizzazione sposta la sua posizione iniziale per qualsiasi motivo, tale spostamento viene registrato. Pertanto, sarebbe considerato instabile se cambiasse la sua posizione iniziale. È importante notare che è possibile creare uno spostamento del layout solo se un elemento visibile si sposta in un punto diverso della pagina a causa di qualcosa che accade nella pagina stessa, e non se un nuovo elemento o un elemento esistente cresce o si riduce.
Un punteggio CLS consiste in due misure specifiche progettate per tracciare gli spostamenti di 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 di visualizzazione tra due fotogrammi, combinando l'elemento originale e lo spostamento in un rapporto che può essere confrontato con l'area visibile totale della finestra di visualizzazione tra i due fotogrammi. Nel caso di un elemento instabile che si sposta orizzontalmente o verticalmente, la frazione di distanza rappresenta la distanza di spostamento dell'elemento nella finestra di visualizzazione (in orizzontale o in verticale).
Come si può migliorare il proprio punteggio CLS?
Per ridurre gli elementi instabili e il comportamento mutevole, ecco alcune raccomandazioni:
- Le diverse pagine web possono ricevere punteggi CLS diversi a seconda della struttura del sito. Ad esempio, i punteggi CLS delle pagine di articoli possono essere più alti di quelli della homepage. Pertanto, il primo passo consiste nel misurare i punteggi CLS di tutti i modelli di pagina principali del sito.
- Le immagini e i video devono sempre avere gli attributi di larghezza e altezza. Creare immagini responsive con rapporti di aspetto definiti.
- In alternativa, è possibile utilizzare i riquadri CSS per riservare lo spazio necessario agli elementi. Durante il processo di caricamento, questo assicura che il browser assegni la quantità di spazio appropriata nel documento.
- L'Ad serving può contribuire in modo significativo allo spostamento del layout se i posizionamenti non sono adeguatamente ottimizzati.
- Non iniettare contenuti dinamici al di sopra di quelli già caricati, se non in risposta alle interazioni dell'utente, nel qual caso il layout cambierà.
Accelerate le prestazioni di WordPress con i nostri servizi di ottimizzazione del sito!
