Il Cumulative Layout Shift (CULS) è un Core Web Vital che valuta il grado di coerenza visiva di una pagina. Il livello di stabilità visiva è determinato dal numero di modifiche inaspettate del layout, senza che l'utente interagisca con il sito web. Ogni volta che il contenuto della pagina cambia, si considera che anche il layout sia cambiato, anche se la modifica non è dovuta a un clic su un link o a un'azione simile.
Il punteggio complessivo per il Cumulative Layout Shift viene determinato sommando tutti questi spostamenti.
Che cosa è Cumulative Layout Shift?
Il ritardo nel caricamento delle foto è il problema più frequente segnalato dagli CLS . È prassi comune che il testo si carichi prima degli elementi multimediali. Inoltre, la struttura della pagina web cambia dopo che tutti i componenti grafici sono stati completamente caricati. Questi problemi si verificano indipendentemente dallo scorrimento della pagina.
Anche se una pagina web ha un punteggio CLS elevato, potrebbe essere difficile stabilire quando il caricamento è terminato. La complessità del sito web e la quantità di contenuti multimediali aumentano la probabilità che gli utenti riscontrino modifiche al layout.
Come ridurre lo spostamento cumulativo del layout in WordPress?
Utilizzare il debugger CLS di Google Web Vitals è il metodo più efficace per determinare quali componenti sono responsabili dell'elevato punteggio CLS del tuo sito web. Ti presenta una GIF che illustra tutti gli elementi in rotazione sul tuo sito web. La maggior parte dei punteggi CLS elevati può essere attribuita a pubblicità e risorse multimediali. Dovrai ottimizzare ogni componente per aumentare il tuo punteggio CLS.
A tal fine, ecco alcuni metodi che possono essere utilizzati per migliorare il punteggio CLS del tuo sito web:
1. Aggiungere attributi di dimensione a tutti i file multimediali
Poiché il browser web dovrà valutare le dimensioni dell'immagine e l'orientamento del layout dopo il caricamento, il rischio di una modifica del layout potrebbe aumentare se si caricano risorse multimediali con attributi sconosciuti. Le foto di grandi dimensioni e i file di alta qualità hanno maggiori probabilità di riscontrare uno di questi scenari rispetto a quelli più piccoli. Ridimensiona le immagini nell'editor multimediale di WordPress.
2. Assicurarsi che i font siano caricati localmente
Durante il caricamento del font, il testo deve rimanere visibile. Pertanto, per raggiungere questo obiettivo, la prima cosa da fare è assicurarsi che i font vengano caricati localmente anziché essere recuperati da siti web che ospitano font di terze parti.
3. Evitare FOIT e FOUT
Il del flash of invisible text (FOIT) si verifica quando non viene specificato un font di riserva. Di conseguenza, gli utenti vedranno un'area vuota al posto del testo mentre il browser web tenta di caricare il font o ne individua uno alternativo.
Durante un periodo noto come "flash of unstyled text" (FOUT), il browser web utilizzerà il font predefinito finché non riuscirà a caricare il font selezionato. Per porre rimedio a questo problema, è possibile aggiungere l'attributo font-display: switch.
Puoi leggere altri articoli come questo sul Seahawk Media Blog.
