Cos’è il CLS? Spiegazione del Cumulative Layout Shift
L’aggiornamento sui Core Web Vitals ormai si è ampiamente diffuso e molti si stanno muovendo per ottimizzare i punteggi del proprio sito web.
In altri articoli proposti dal nostro blog, abbiamo già affrontato in dettaglio come ottimizzare la metrica LCP, ovvero Largest Cumulative Paint.
I Core Web Vitals però si dividono in 3 diversi punteggi, quindi oltre al valore LCP ne esistono altri 2: il CLS ed il FID.
In questo articolo vedremo in dettaglio come ottimizzare il CLS, la metrica più complessa da sistemare a parer mio.
Il CLS indica la variazione del layout involontario durante il caricamento di una pagina. Questo problema è spesso presente in molto siti WordPress in quanto in fase di sviluppo del tema non si presta molta attenzione alla gestione dei JavaScript e dei CSS per l’above the fold.
Questa metrica influenza non solo il punteggio dei Web Vitals, ma anche l’esperienza utente (UX), ad esempio se utente che sta visitando la pagina è pronto a cliccare su un elemento, ma nel frattempo il caricamento ne modifica la posizione comporterà che l’utente premerà un altro elemento della pagina, ad esempio un banner o un link che non voleva premere, oppure un altro esempio su un articolo di blog, il CLS potrebbe far perdere il punto di lettura dell’utente, il quale si troverà a dover ritrovare il punto.
Il CLS inoltre è fortemente condizionato dal tipo di connessione del dispositivo. Ricordiamo che la maggior parte degli utenti si connette da rete “lenta” quindi ancor di più è importante considerare questo aspetto.
Insomma abbiamo capito che non è piacevole avere questi sbalzi di layout sul proprio sito web.
Cause del Cumulative Layout Shift.
Le cause che portano ad uno scarso punteggio del CLS possono essere molte ed andrebbero affrontare su ogni singolo progetto. Le più comuni ad ogni modo potrebbero essere queste:
- Tag immagini, iframe, video, embeds senza definizione di altezza e larghezza (dimensioni sconosciute)
- Web font che causano FOIT / FOUT ( Come ottimizzare i Web Font)
- Contenuto JavaScript iniettato
- Azioni in attesa di una risposta di rete prima di aggiornare DOM
- Gestione dei file CSS asincroni e l’inline CSS.
Queste sono le cause più comuni e frequenti, una nota importante che tengo a segnalare è la questione degli hosting web e la risposta delle risorse che influenzano tutti i parametri dei Core Web Vitals.
Come si calcola il CLS di una pagina web
Il Cumulative Layout Shift viene misurato con questa formula:
layout shift score = impact fraction * distance fraction
La frazione di impatto (impact fraction) misura l'impatto degli elementi instabili sull'area della finestra tra due fotogrammi, vedi questa immagine:
L’elemento presente nell’immagine che occupa metà del viewport, questo significa che nel fotogramma successivo, l'elemento si sposta verso il basso del 25% dell'altezza della finestra.
Il rettangolo rosso tratteggiato indica l'unione dell'area visibile dell'elemento in entrambi i fotogrammi, che, in questo caso, è il 75% della finestra totale, quindi la sua frazione di impatto è 0.75.
La frazione di distanza (distance fraction) è la distanza massima che un qualsiasi elemento “instabile” viene spostato all’interno del frame (orizzontalmente o verticalmente).
Nell'esempio riportato, l'elemento “instabile” si è spostato del 25% dell'altezza della finestra, il che rende la frazione di distanza 0,25. Quindi, in questo esempio la frazione di impatto è 0.75 e la frazione di distanza è 0.25.
Il CLS pertanto sarà: 0.75 * 0.25 = 0.1875.
Per un’ottima esperienza utente, Google consiglia un CLS con punteggio inferiore a 0.1.
Strumenti per misurare il CLS
Il CLS può essere misurato con diversi strumenti, tra cui:
- Lighthouse (estensione chrome oppure tramite strumenti per sviluppatori);
- Core Web Vitals (estensione chrome);
- PageSpeed Insight;
- WebPageTest;
- ScreamingFrog + API PageSpeed;
- Semrush Site Audit.
Tutti gli strumenti sono validi e puoi scegliere quello che preferisci. A parer mio ognuno ha qualcosa che lo differenzia dall’altro, spesso ne utilizzo più di uno per prendere dei dati specifici.
La comodità ad esempio del Site Audit di Semrush è quello di avere il calcolo complessivo di tutte le pagine e la percentuale dello stato:
Questo vi farà risparmiare molto tempo in quanto con un unico report e scansione potrete avere a colpo d’occhio quali sono le pagine con un punteggio basso ed andarle a sistemare.
Ovviamente, oltre al CLS vengono misurati tutti i parametri Web Vitals.
Come migliorare il punteggio CLS
Concludiamo con alcuni consigli pratici per migliorare fin da subito il CLS:
- Includi sempre gli attributi “width” e “height” sulle tue immagini e video. Questo approccio garantisce al browser di allocare la corretta quantità di spazio;
- Evita di inserire contenuto sopra ad uno già esistente se non tramite un'interazione di un utente;
- Trasforma le animazioni di trasformazione alle animazioni di proprietà, anima le transizioni in modo da fornire contesto e continuità.
Per ulteriori approfondimenti puoi visionare la guida ufficiale di Google che affronta con esempi pratici l’ottimizzazione del CLS.