Google ha aggiunto il CLS (Cumulative Layout Shift) tra i valori vitali di un sito. Più il tuo sito presenta elementi che “saltano” o si ridimensionano rapidamente e più il valore del CLS del tuo sito WordPress sarà alto. Esiste un modo per risolvere?
Certo! Per diminuire CLS WordPress, basta semplicemente intervenire su WordPress e modificare qualche parametro. Dopodiché vedrai che il valore CLS del tuo sito diminuirà nettamente.
Nelle righe a seguire ti mostreremo come fare. Prima, però, concentriamoci sul capire cos’è il CLS.
Cos’è il CLS e perché è così importante
CLS sta per Cumulative Layout Shift, in italiano possiamo tradurlo come “variazione del layout cumulativa”. Si tratta di un valore che si riferisce alle variazioni del layout impreviste, che causano un’esperienza utente negativa.
Per capirlo meglio, affidiamoci ad un esempio.
Hai presente quando apri un sito e vuoi cliccare su un link, un tasto o evidenziare una parola ma BOOM, finisci per cliccare da un’altra parte perché c’è stato un ridimensionamento degli elementi proprio mentre stavi interagendo con la pagina? Ecco, questo è quello che succede sui siti con un valore inaccettabile di CLS.
Un punteggio CLS compreso tra 0 e 0,1 è considerato accettabile, da 0,1 a 0,25 richiede attenzioni e se supera lo 0,25 è da correggere nell’immediato. Puoi misurare il valore del tuo sito tramite il PageSpeed Insights di Google, alla voce CLS.
I siti che non provvedono a diminuire il proprio CLS, vengono “bocciati” dallo strumento di Google, in quanto non rispettano questo valore considerato uno dei segnali di qualità di un sito web.
Cosa causa un CLS così alto (“povero”, nel grafico su PageSpeed Insights)? Sostanzialmente tutto quello che può “saltare” o uscire dal layout del tuo sito:
- Immagini senza dimensioni
- Annunci senza dimensione
- Integrazioni e iframe non responsive
- Tabelle non responsive
- Animazioni
- Font Web che causano FOIT/FOUT
- Azioni in attesa di una risposta di rete prima dell’aggiornamento del DOM
Nelle righe a seguire andremo a correggere tutti questi problemi, con l’intento di abbassare il CLS del tuo sito WordPress. Pronto per iniziare?
Come diminuire CLS sito WordPress
Hai appena sottoposto il tuo sito WordPress al PageSpeed Insights di Google e non hai superato il test del CLS (Cumulative Layout Shift)? Ecco come puoi risolvere in modo semplice e veloce per diminuire CLS su WordPress.
Immagini senza dimensioni
Per ogni immagine presente sul tuo sito WordPress dovrai indicarne le dimensioni.
Includi sempre i valori delle dimensioni width e height nelle immagini. In alternativa, puoi prenotare lo spazio richiesto con CSS aspect-ratio o con un’altra soluzione simile. Questo metodo garantisce che il browser possa allocare la quantità corretta di spazio nel documento durante il caricamento dell’immagine.
Annunci senza dimensioni
Gli annunci sono una delle principali cause del cambiamento di layout di un sito web. Puoi diminuire il CLS del tuo sito WordPress mettendo in pratica due accorgimenti:
- Riserva staticamente spazio per l’area annuncio.
- Evita di integrare annunci vicino all’area superiore dello schermo.
Incorporamenti e iframe non responsive
Molti blogger non si accontentano di includere immagini nei propri articoli, ma aggiungono anche video e specchietti con contenuti integrati per rendere i propri articoli più interessanti.
Tutti questi elementi andrebbero usati con attenzione: ogni elemento deve avere misure ben precise, adatte sia alla visualizzazione da computer che da smartphone e tablet.
Ad esempio, i video YouTube sono tra i responsabili di un valore CLS alto. Perché? Perché il codice HTML che fornisce YouTube per integrare un video nel proprio sito web non è del genere responsive. Questo significa che da smartphone i video escono dal layout della pagina.
Puoi facilmente porre rimedio seguendo questa nostra guida dove illustriamo come rendere responsive i video YouTube su WordPress in due differenti modi.
Lo stesso discorso vale anche per altri incorporamenti e iframe. Assicurati di specificare dimensioni che si adattino ai dispositivi desktop e mobili.
Tabelle non responsive
Continuando a parlare di elementi non “responsive”, passiamo ad analizzare le tabelle. Quante volte hai creato una tabella su WordPress e hai scoperto che da smartphone si visualizza in maniera pessima?
Un ottimo modo per ridurre il valore del CLS è creare tabelle che si adattano alla dimensione del dispositivo da cui vengono visualizzate.
Per raggiungere questo obbiettivo, apri il wp-admin > Aspetto > CSS Aggiuntivo e incolla quanto segue:
@media only screen and (max-width: 782px) {
table { margin-bottom: 0; overflow: hidden; overflow-x: scroll; display: block; white-space: nowrap; }
}
Al termine, premi su Pubblica. Ecco fatto. Ora le tue tabelle sono responsive: da smartphone presentano una barra di scorrimento.
Per maggiori informazioni sulle tabelle responsive WordPress, leggi la nostra guida come rendere responsive le tabelle su WordPress.
