Il Cumulative Layout Shift (CLS) misura gli spostamenti della pagina mentre il contenuto al suo interno viene renderizzato, oppure quando viene mostrata una nuova sezione.
Gli spostamenti del contenuto sono molto fastidiosi, facendo perdere agli utenti il punto dell’articolo che hanno iniziato a leggere, oppure facendoli cliccare sul pulsante sbagliato.
Il CLS calcola un punteggio in base a quanto della pagina si sposta in modo imprevisto e con quale frequenza.
Come viene calcolato il CLS?
Il CLS è calcolato utilizzando una formula molto semplice:
CLS = somma(frazione-impatto * frazione-distanza)
La frazione di impatto misura quanto del contenuto visibile della pagina si è spostato.
La frazione di distanza, invece, misura quanto si è spostato il contenuto.
Se, ad esempio, il 50% della pagina (quanto) si è spostato del 25% (quanto lontano) della viewport della pagina. Il punteggio CLS è pari a 0,50 * 0,25 = 0,125.
Differenze tra spostamenti di layout attesi e imprevisti
Non tutti gli spostamenti di layout sono negativi. Quando, per esempio, fai clic su un link “carica altri elementi”, ci si aspetta che compaiano più elementi sulla pagina e che il contenuto della pagina si sposti.
Ecco perché solo gli spostamenti di layout inattesi contribuiranno al CLS.
Ad esempio, se un utente fa clic su un pulsante e in risposta viene aggiunto nuovo contenuto alla pagina (come un menu a tendina), lo spostamento del layout verrà escluso dal CLS.
Ecco perché gli spostamenti di layout che si verificano entro 500 millisecondi dall’input dell’utente vengono esclusi dai calcoli.
Sessioni di spostamento del layout
Quando il CLS è stato introdotto per la prima volta, alcuni siti sono stati penalizzati ingiustamente con un punteggio CLS negativo.
Questo è avvenuto perché, per esempio, una pagina che implementava lo scrolling infinito soffriva l’impatto del contenuto appena aggiunto al punteggio CLS totale per ogni nuovo scroll.
Ecco perché ora il CLS è calcolato in sessioni. Ogni sessione ha una durata di 5 secondi. La sessione con il punteggio CLS più alto diventa il punteggio CLS finale.
Se, ad esempio, durante i primi 5 secondi il punteggio CLS è 0,095, poi nelle sessioni successive di 5 secondi il CLS è 0,15 e per l’ultima sessione il punteggio CLS è 0. Il punteggio CLS finale sarà il più alto dei tre, ovvero 0,15.
Come individuare i problemi di CLS
1. Utilizzare Lighthouse per individuare il Cumulative Layout Shift
Il metodo più semplice per individuare gli spostamenti di layout è utilizzare Lighthouse nel proprio browser Chrome.
Basta eseguire un audit Lighthouse facendo clic destro in qualsiasi punto della pagina. Seleziona quindi “Ispeziona elemento”, scegli la scheda Lighthouse nella console ed esegui l’audit.
I risultati dell’audit ti mostreranno il punteggio Cumulative Layout Shift (CLS). Scorri verso il basso in Diagnostica ed espandi le informazioni sul Cumulative Layout Shift per vedere quali aspetti causano lo spostamento del layout.
Tuttavia, la mancanza di dettagli sulla distanza esatta dello spostamento del layout rende più difficile interpretare i risultati.
2. Utilizzare il CLS Visualizer per individuare gli spostamenti di layout cumulativo
Il CLS Visualizer è un’estensione per Chrome. Con un singolo clic su un pulsante, tutti gli spostamenti di layout sulla pagina vengono visualizzati in modo visivo.
È facile da usare e ti fornirà una panoramica visiva eccellente del Cumulative Layout Shift.
3. Utilizzare la scheda Prestazioni di Chrome per individuare il CLS
Infine, di gran lunga il modo migliore per risolvere uno spostamento di layout, è tramite la scheda Prestazioni di Chrome.
Per aprire la scheda Prestazioni, naviga su qualsiasi pagina in Chrome e utilizza questa combinazione di tasti:
- Premi CTRL-Shift-I (Apri Strumenti di sviluppo)
- Premi Ctrl-Shift-E (Avvia profilazione e ricarica la pagina)
Per ispezionare i frame occorre passare il mouse sopra la timeline e cercare gli spostamenti di layout (gli spostamenti di layout sono anche colorati di rosso nella sezione Esperienza della scheda Prestazioni).
Come risolvere il CLS causato dalle immagini
Le immagini sono solitamente le prime sospettate quando si tratta di Cumulative Layout Shift.
Gli spostamenti di layout causati dalle immagini sono in tutti i casi dovuti al fatto che le dimensioni dell’immagine non sono impostate, né nell’etichetta HTML <img>, né nei fogli di stile.
La soluzione è semplice. Assicurati semplicemente che l’immagine venga renderizzata con le dimensioni corrette.
<img src=”img.jpg” alt=”this image will cause a layout shift” >
<img src=”img.jpg” width=”200″ height=”200″ alt=”this image will not cause a layout shift” >
Quando si impostano altezza e larghezza di un’immagine, di solito è una buona idea limitare la larghezza massima dell’immagine per evitare che l’immagine appaia più grande dello schermo del dispositivo mobile. Aggiungi questo al tuo foglio di stile per prevenire questo problema.
<style>img{max-width:100%;height:auto}</style>
In alternativa, potresti anche impostare larghezza e altezza dell’immagine nel tuo foglio di stile.
<style> img#my-image{ width:200px; height:200px; } </style>
<img id=”my-image” src=”img.jpg” alt= “this image will not cause a layout shift” >
Questa soluzione è altrettanto efficace nel prevenire gli spostamenti di layout come la soluzione precedente, ma non tiene conto delle immagini responsive.
Con immagini più grandi, sarà necessario utilizzare media query per garantire che l’immagine non abbia dimensioni maggiori rispetto alle dimensioni dello schermo.
Come risolvere il CLS causato dai webfont
Uno spostamento di layout cumulativo può essere causato anche dai webfont.
I webfont sono font che non sono installati sul tuo computer o telefono locale, ma vengono scaricati da Internet. Mentre il webfont non è ancora stato scaricato, la pagina di solito viene renderizzata con un font di fallback, che possono differire dal font finale.
In questo esempio, il font di fallback è leggermente più piccolo rispetto al webfont finale.
È piuttosto semplice risolvere questo comportamento. Occorre verificare che il font di fallback corrisponda più da vicino al font finale.
Un modo per farlo è utilizzare il metodo Font with a class.
Fondamentalmente, viene aggiunta una classe al nodo <html> della pagina una volta che il webfont finale è stato scaricato.
Con il CSS è quindi possibile modificare il comportamento del font in entrambi gli stati.
<link rel=”preload” href=”/some-font.woff2″ as=”font” onload=”document.documentElement.classList.add(“fl”);” >
h1{ font-family: ‘Meriweather’, serif; letter-spacing: 2px; } html.fl h1{ letter-spacing: initial; }
Come risolvere il CLS causato dalle icone
Uno degli spostamenti di layout più piccoli, ma facili da correggere, proviene dalle icone dei font, come Font Awesome o Icomoon.
Al primo rendering, il file del font delle icone potrebbe non essere ancora stato scaricato, così viene renderizzato a 0x0 pixel. Una volta che il font è stato scaricato, l’icona viene disegnata sullo schermo con le sue dimensioni finali.
La soluzione per questo spostamento di layout è semplice. Infatti, occorre utilizzare il CSS per riservare lo spazio necessario all’icona finale:
css
nav .searchicon {
width: 64px;
height: 64px;
Come risolvere i problemi di CLS causati dalle interazioni dell’utente
Quando, invece, a provocare uno spostamento di layout è il pulsante “carica altro” non bisogna preoccuparsi. Questo aspetto non verrà aggiunto alle metriche CLS, perché si tratta di uno spostamento di layout è intenzionale!
Come risolvere i problemi di CLS causati da AJAX
AJAX consente alle pagine web di essere aggiornate in modo asincrono, scambiando dati con un server web in background.
Ovviamente, l’inserimento di nuovo contenuto in qualsiasi pagina web potrebbe causare uno spostamento di layout significativo.
Ecco perché è saggio riservare lo spazio utilizzato per il nuovo contenuto. Ovviamente, non si conosce in anticipo l’altezza, tuttavia è possibile fare un’ipotesi.
Ad esempio, se il contenuto medio di AJAX occupa il 50% dello schermo, è opportuno riservare il 50%. Infatti, quando il nuovo contenuto occupa il 40% o il 60% dello schermo, il CLS (50% – 40% = frazione-distanza 10%) è comunque molto più piccolo rispetto alla frazione-distanza del 50%.
Ecco un esempio su come farlo:
<style> #ajax{height:400px}
#ajax.loaded{height:auto;}
</style>
<script>
fetch(‘/ajax-content) .then(response => response.json()) .then(result => { let el = document.getElementById(‘ajax’); el.innerHTML(result.html); el.classList.add(‘loaded’); }) <script>
Come risolvere i problemi di CLS causati dagli annunci pubblicitari
Gli annunci pubblicitari spesso si caricano più tardi sulla pagina. Ciò rende gli spostamenti di layout cumulativi causati dagli annunci particolarmente fastidiosi.
Per risolvere questo problema, occorre riservare anche lo spazio per gli annunci, in particolare per gli annunci nella viewport visibile.
css
<style>
// annuncio per dispositivi mobili
.ad{min-height:250px;background:#dedede}
// annuncio per desktop
@media only screen and (min-width: 600px) {
.ad{min-height:90px}
}
</style>
Ottimizzare i Core Web Vitals non è semplice
E così, giungiamo alla conclusione di questo articolo, ma il percorso verso una comprensione approfondita dei Core Web Vitals è appena iniziato.
Durante il percorso attraverso i nostri consigli, avrai senz’altro notato che l’ottimizzazione dei Core Web Vitals può risultare un’impresa complessa. Spesso richiede competenze tecniche considerevoli, e la complessità di queste operazioni può variare notevolmente.
Per approfondire ulteriormente e ottenere consigli specifici, ti invitiamo a esplorare le altre risorse e guide disponibili sul tema dei Core Web Vitals. L’informazione dettagliata e l’approfondimento su questi aspetti possono offrire una visione più chiara e completa.
Inoltre, per rendere questa ottimizzazione complessa più accessibile, abbiamo sviluppato Phantom Layer, uno strumento progettato per aiutare i nostri clienti ad affrontare automaticamente tutte queste sfide. Con Phantom Layer, è possibile migliorare i Core Web Vitals in soli 48 ore, eliminando la necessità di impegnative sessioni di sviluppo o costose consulenze tecniche. Siamo qui per semplificare il processo e rendere l’ottimizzazione dei Core Web Vitals più efficiente e alla portata di tutti.