Cumulative Layout Shift (CLS): che cos'è e come ottimizzare il tuo sito web per questo

Immagina questo: stai caricando un sito Web e sembra pronto per l'uso. Fai clic su un'immagine in primo piano del blog per leggere l'articolo e improvvisamente l'intera pagina si sposta perché è appena stato caricato qualcos'altro. E fai clic su qualcosa di completamente diverso e carichi una pagina che non hai mai voluto. Se hai riscontrato questo problema tu stesso, sai come Cumulative Layout Shift (CLS) può avere un impatto negativo sull'esperienza utente (UX) di un sito.

Cumulative Layout Shift è il termine che indica quanto il layout di una pagina si sposta durante il caricamento e in questo articolo approfondiremo un po' cosa significa. Ti mostreremo come misurare CLS e ti spiegheremo cos'è un buon punteggio. Quindi discuteremo come ottimizzare il punteggio CLS del tuo sito web. Andiamo a lavorare!

Iscriviti al nostro canale Youtube

Che cos'è il Cumulative Layout Shift (CLS)?

Non c'è modo migliore per illustrare cosa rappresenta un punteggio CLS alto (che significa qualsiasi cosa superiore a 0,10 da PageSpeed ​​Insights di Google) che con un esempio visivo. Ecco un sito Web con un layout che continua a cambiare man mano che la pagina viene caricata. Nota che non stiamo scorrendo affatto durante l'acquisizione. Il nostro viewport rimane lo stesso, ma la pagina cambia drasticamente da sola:

Come utente che visita questo sito Web, potresti non essere sicuro di quando è stato effettivamente completato il caricamento. Puoi provare a fare clic su una notizia, solo per cambiare drasticamente il layout. Di conseguenza finisci sulla pagina sbagliata e devi perdere tempo a tornare indietro. A seconda della pagina, questo potrebbe accadere più volte. Se lo fa, c'è una buona probabilità che te ne andrai.

E così faranno i tuoi utenti.

Più un sito web è complesso, più è probabile che abbia un punteggio CLS elevato. Con layout semplici come l'iconica home page di Google, non c'è CLS perché includono così pochi elementi:

Questo non vuol dire che tutti i siti web complessi abbiano punteggi CLS elevati. Considera Amazon, per esempio. Nessuno direbbe che il gigante dell'e-commerce utilizza un web design semplice. Eppure c'è poco o nessun cambiamento di layout da vedere durante la navigazione nel suo catalogo.

I cambiamenti di layout si verificano perché i browser tendono a caricare gli elementi della pagina in modo asincrono. Ancora più importante, potrebbero esserci elementi multimediali sulla tua pagina con dimensioni inizialmente sconosciute. Questa combinazione significa che il browser non sa quanto spazio occuperanno i singoli elementi fino al termine del caricamento. Da qui il drastico cambiamento di layout.

CLS è interessante in quanto può essere misurato oggettivamente utilizzando vari strumenti, ma è anche incentrato sull'utente in quanto il dispositivo di ciascun utente può influenzare il modo in cui il layout del tuo sito può cambiare. Anche se non puoi controllare questo aspetto, puoi certamente prendere precauzioni in modo che abbia il minor impatto possibile.

CLS è uno dei tre Core Web Vitals che Google misura per aiutarlo a determinare se il tuo sito web offre una forte esperienza utente (UX). Gli altri elementi vitali del Web principali sono il First Input Delay (FID) e il Largest Contentful Paint (LCP), che valgono sicuramente qualsiasi sforzo per l'ottimizzazione.

Come misurare CLS

Capire se il tuo sito web mostra cambiamenti di layout marcati è relativamente semplice. Innanzitutto, ti consigliamo di provare ad accedere al tuo sito Web da una varietà di dispositivi e chiedere ad altri di fare lo stesso. Mentre lo fai, puoi osservare se il layout rimane coerente durante il caricamento delle pagine.

Quello che probabilmente scoprirai è che l'esperienza CLS può variare molto. Dipende non solo da quanto è ottimizzato il tuo sito web, ma anche da quale dispositivo stai utilizzando. Con questo in mente, lo strumento migliore per misurare il CLS del tuo sito web è PageSpeed ​​Insights. Questo si collega direttamente ai Core Web Vitals di Google in modo che tu possa vedere direttamente come il tuo punteggio CLS influenza il modo in cui Google vede il tuo sito.

Questo servizio ti consente di inserire un URL e di ricevere un punteggio di rendimento complessivo basato sugli ultimi 28 giorni di dati raccolti da Google. Tale punteggio prende in considerazione diverse metriche, tra cui CLS, FCP e LCP.

Per questo test, abbiamo scelto un sito Web senza CLS riconoscibile. PageSpeed ​​Insights ha confermato i nostri sospetti, poiché ha restituito risultati straordinariamente positivi con un ottimo punteggio CLS.

Nota che PageSpeed ​​Insights offre una ripartizione percentuale per ogni punteggio. In questo caso, il 91% degli utenti ha riscontrato uno spostamento del layout pari a zero durante il caricamento del sito Web di prova. Tuttavia, i restanti visitatori hanno sperimentato un certo livello di cambiamento di layout.

C'è da aspettarselo quando si tratta di CLS e del resto dei Core Web Vitals. L'esperienza dell'utente varierà drasticamente a seconda del dispositivo da cui sta visitando, della sua connessione Internet e di molti altri fattori. Non c'è praticamente alcun modo per tenere conto del fatto che nessun utente abbia mai sperimentato CLS, ma puoi sicuramente prendere precauzioni per ottimizzarlo in modo che la percentuale sia la più bassa possibile.

Oltre ai dati sul campo, PageSpeed ​​Insights offre anche quelli che chiama dati Lab . Questi sono punteggi delle prestazioni basati su un singolo test, invece di dati raccolti in un lungo periodo di tempo (che è considerato Dati di campo ).

Nel nostro test abbiamo ricevuto un punteggio CLS pari a zero, il che significa che non c'è stato alcun cambiamento di layout. Per questa prova particolare. Ora confrontiamolo con un altro sito Web che non ha ottenuto un punteggio CLS così elevato.

Per soddisfare gli standard di Google, il tuo punteggio CLS deve essere inferiore a 0,10. Tutto ciò che è superiore a ciò significa che ci sono cambiamenti significativi e evidenti nel layout, il che porta a un'esperienza utente scadente.

Come identificare le cause dei cambiamenti di layout

Se desideri identificare quali elementi stanno causando cambiamenti di layout sul tuo sito web, puoi farlo utilizzando Chrome Dev Tools. Se apri gli strumenti (CTRL-SHIFT-I) e vai alla scheda Prestazioni , sarai in grado di registrare i test delle prestazioni mentre navighi sul Web.

Dopo aver interrotto la registrazione, Chrome Dev Tools restituirà una sequenza temporale che mostra i tempi di caricamento, le singole richieste e i Core Web Vitals. Da questa timeline è possibile selezionare singoli eventi di Layout Shift che sono elencati in Esperienza . In questo modo, puoi vedere a quali elementi corrispondono.

Una volta che sai quali elementi stanno causando i cambiamenti di layout, puoi prendere provvedimenti per risolvere il problema. Ne parleremo nella prossima sezione.

Se desideri monitorare i Core Web Vitals del tuo sito web, ti consigliamo di configurare un account Google Search Console. Sarai in grado di monitorare le metriche delle prestazioni e i Core Web Vitals da Search Console, il che è un vantaggio quando si tratta di Search Engine Optimization (SEO). Riteniamo che sia nel tuo interesse monitorare regolarmente la Search Console, a prescindere, ma non fa mai male avere una metrica specifica che stai monitorando.

Come ottimizzare il tuo punteggio CLS

In generale, ci sono due grandi colpevoli quando si tratta di punteggi CLS elevati: file multimediali e annunci. Ad esempio, se carichi un file immagine con una risoluzione enorme ma non ne specifichi l'altezza e la larghezza, è possibile che il layout della pagina venga danneggiato.

In termini di prestazioni del sito web, è meglio utilizzare immagini che abbiano già le dimensioni precise che visualizzerai. In questo modo, il browser non deve spendere potenza di elaborazione (e tempo) per ridimensionarli in modo appropriato. Tuttavia, non è sempre possibile. Quando non lo è, dovresti impostare gli attributi di larghezza e altezza per ogni immagine che visualizzi. In questo modo, il browser dell'utente saprà esattamente dove si inserisce l'immagine e non dovrà spostare il layout all'ultimo secondo possibile.

Ecco come appaiono questi attributi in HTML:

<img src="http://imageurl.com" width="120" height="90" alt="Image Alt Text">

Se utilizzi WordPress, alcuni plug-in di ottimizzazione delle immagini possono ridimensionare automaticamente i file mentre li carichi, il che si occupa di impostare gli attributi di larghezza e altezza necessari.

Quando si tratta di immagini reattive, puoi fare affidamento sui CSS invece di dichiarare manualmente larghezza e altezza. I CSS ti consentono di utilizzare l'attributo max-width per indicare ai browser quale percentuale dell'area di visualizzazione dovrebbe occupare l'immagine:

img {
max-width: 90vw;
height: auto;
}

In questo esempio, diciamo al browser di ridimensionare l'immagine in modo che occupi il 90% dell'area visibile dell'utente. Allo stesso tempo, impostiamo l'attributo height su auto , in modo che il browser calcoli l'altezza ideale in base alla nuova larghezza dell'immagine e alle sue proporzioni.

Gli stessi principi fondamentali si applicano agli annunci e alle immagini. In genere, lavorerai con iframe e talvolta le reti pubblicitarie utilizzeranno elementi di dimensioni dinamiche. Questo può devastare il layout delle tue pagine.

Invece di lasciare che le reti pubblicitarie decidano quanto devono essere grandi gli annunci sul tuo sito web, puoi riservare loro delle aree. Ciò significa dichiarare gli attributi di larghezza e altezza per le aree degli annunci e impostare i ripieghi nel caso in cui non vengano caricati, in modo che lo spazio vuoto non causi uno spostamento del layout.

Puoi utilizzare lo stesso tipo di CSS e stile in linea per qualsiasi contenitore di annunci che desideri, mantenendolo bloccato in posizione indipendentemente dagli annunci offerti.

Domande frequenti sul cambio di layout cumulativo (CLS)

CLS può essere un po' più complicato da comprendere rispetto alle metriche LCP e FCP. Con questo in mente, esaminiamo alcune domande comuni che gli utenti hanno su CLS, per assicurarci di non perdere alcuna informazione chiave.

In che modo CLS influisce sulle prestazioni del mio sito Web?

In teoria, puoi avere un sito Web molto veloce che ottiene comunque un punteggio CLS relativamente scarso. Come con altri Core Web Vital, i punteggi CLS potrebbero non essere direttamente correlati alle prestazioni complessive del sito. Il tuo sito potrebbe essere velocissimo, ma mentre si carica si apre come una fisarmonica. Anche allora, i grandi cambiamenti di layout hanno sicuramente un impatto negativo sulla UX del sito. Google lo considera incredibilmente importante. Ecco perché Google pesa così pesantemente questo punto dati.

CLS è meno importante dei punteggi FCP o LCP?

Molti utenti prestano più attenzione ai punteggi FCP e LCP rispetto a CLS. Questo perché queste due metriche sono più facili da correlare alle prestazioni del sito web. Anche se FCP è specificamente una metrica incentrata sull'utente, CLS è più difficile da valutare in modo coerente su un gran numero di utenti.

Tutte e tre le metriche costituiscono i Google Core Web Vitals. Ciò significa che se ne ignori uno, corri il rischio di posizionarti più in basso nei risultati di ricerca pertinenti. Assicurarsi che il tuo sito sia ottimizzato per un CLS basso in genere non ha altro che un impatto positivo sulle prestazioni del sito come LCP e FCP. Se il più grande contenuto di vernice viene spinto giù dallo schermo non appena l'utente lo vede, quanto è utile quel tempo di caricamento veloce?

Che cos'è un buon punteggio CLS?

Dai numeri, Google considera qualsiasi cosa inferiore a 0,10 un buon punteggio CLS. Tuttavia, se si adottano le misure appropriate, ottenere un punteggio CLS pari a 0 non è fuori questione ed è relativamente normale tra i siti Web ben ottimizzati. Tieni presente, tuttavia, che anche i siti che ottengono regolarmente un punteggio 0 possono avere una leggera percentuale di utenti che subiscono cambiamenti. Questo è fuori dal tuo controllo e tutto ciò che puoi fare è tenere conto del fatto che la maggior parte dei tuoi utenti ha 0 CLS.

Conclusione

Ci sono molti fattori che contribuiscono a offrire una forte UX sul tuo sito web. Idealmente dovrebbe caricarsi velocemente. Dovrebbe essere facile interagire con. Non dovrebbe spostare la posizione del layout quando vengono visualizzati gli elementi. Cambiamenti drastici del layout portano a frustrazione e clic sbagliati. Questi portano a una frequenza di rimbalzo più elevata. Il che non va bene per nessun sito web.

CLS è uno dei Core Web Vitals che Google utilizza per misurare la UX complessiva del tuo sito. E gli utenti sono l'intera ragione per cui hai un sito web in primo luogo. La loro esperienza è la priorità 1. Un punteggio CLS basso (inferiore a 0,10) significa che il tuo sito web dovrebbe caricarsi in modo fluido e ogni aspetto del suo layout apparirà nel posto giusto fin dall'inizio.

Hai domande su CLS o su come ridurre le tue? Parliamo di loro nella sezione commenti qui sotto!

Immagine in primo piano tramite il fratello maggiore / shutterstock.com