È capitato a tutti noi: proviamo a scegliere un’opzione su un sito Web e, appena prima di fare clic, la pagina salta via e finiamo per fare clic su qualcosa che non volevamo. ah!
Come un gioco di “down low, too slow”, questo comportamento del sito Web ci fa sentire lenti e frustrati. Fortunatamente, gli sviluppatori di siti Web sono ora incentivati a migliorare la loro esperienza sul sito con il rilascio di Core Web Vitals di Google; un insieme di metriche che aiutano i proprietari di siti a misurare e migliorare l’esperienza utente delle loro pagine web.
Lo spostamento cumulativo del layout è una di queste metriche chiave che misura la “saltellatezza” di un sito Web e il modo in cui si muove inaspettatamente quando gli elementi vengono caricati. Diamo un’occhiata più da vicino a come funziona questa metrica e come puoi assicurarti che il tuo sito web segua le migliori pratiche in modo da posizionarti più in alto nei motori di ricerca e offrire ai tuoi utenti un’esperienza migliore.
Che cos’è lo spostamento cumulativo del layout?
Cumulative Layout Shift (o CLS) è una misura di quanto una pagina web si sposta inaspettatamente durante la sua vita. Ad esempio, se un visitatore di un sito web carica una pagina e, mentre la sta leggendo, viene caricato un banner e la pagina salta verso il basso, ciò costituirebbe un punteggio CLS elevato.
Insieme a Largest Contentful Paint (la quantità di tempo necessaria per caricare il contenuto più grande) e First Input Delay (quanto tempo impiega una pagina per essere interattiva o “cliccabile”), CLS fa parte dei Core Web Vitals di Google. I web crawler di Google misurano il CLS su ogni pagina che indicizzano.
Che cosa causa lo spostamento cumulativo del layout?
Gli spostamenti di pagina si verificano quando il contenuto viene caricato a velocità diverse e causa la modifica del layout e l’alterazione di ciò che lo spettatore sta guardando. Le pubblicità che si caricano lentamente, i video di dimensioni sconosciute che appaiono improvvisamente o gli elementi DOM che vengono aggiunti dinamicamente sono tutte potenziali cause di CLS.
L’esempio seguente mostra cosa succede quando un banner pubblicitario viene caricato dopo il caricamento del resto della pagina web. Il contenuto viene spinto verso il basso e l’esperienza dell’utente viene influenzata negativamente.
Fonte
Può essere difficile sapere se i tuoi utenti stanno sperimentando CLS, perché non tutti i dispositivi o gli ambienti funzionano allo stesso modo. Se stai caricando il tuo sito web in un ambiente di sviluppo, potresti avere elementi nella cache o potrebbero essere caricati localmente. I contenuti web personalizzati basati sui cookie si comporteranno in modo diverso per ogni visitatore, soprattutto a seconda della sua posizione. Inoltre, gli utenti mobili possono vivere un’esperienza molto diversa: un piccolo cambiamento su un browser Web può essere monumentale per qualcuno che visualizza il sito su un piccolo schermo. In realtà, l’unico modo per comprendere l’esperienza dei tuoi utenti è misurare il CLS, che esamineremo di seguito.
Perché la CLS è importante?
Comprendere CLS è fondamentale per due motivi: l’esperienza dei tuoi visitatori e il posizionamento nei motori di ricerca.
I tuoi visitatori hanno grandi aspettative quando si tratta delle prestazioni del tuo sito. Nel 2020, il 93% delle persone ha dichiarato di aver lasciato un sito Web perché non si caricava correttamente.
I siti Web saltellanti che si caricano a pezzi o con comportamenti imprevisti faranno sì che i tuoi visitatori trovino un altro sito Web da navigare. E se rimangono, è probabile che un punteggio CLS alto causi problemi di usabilità come la scelta dell’opzione sbagliata, il check-out troppo presto o la mancanza di parti del tuo sito web.
Questo problema è esacerbato solo dal gran numero di utenti di Internet che navigano sui propri smartphone. Quando visualizzi il tuo sito su un piccolo schermo, eventuali salti e cambiamenti di layout sul sito Web avranno sicuramente un grande impatto sull’esperienza dell’utente mobile.
Ottimizzare il tuo sito e ridurre il tuo spostamento cumulativo del layout è essenziale per fornire ai clienti una buona esperienza.
In secondo luogo, Google classifica i siti in base alle prestazioni della pagina. Una migliore esperienza utente si traduce in un ranking di ricerca più elevato. Se la tua pagina non soddisfa gli standard stabiliti da Google nelle linee guida Core Web Vitals, il tuo sito verrà penalizzato.
Google non vuole indirizzare le persone a siti che non funzionano bene. L’allineamento con le best practice di CLS può aiutare il tuo sito web a scalare le classifiche. E poiché il 68% delle esperienze online inizia con una ricerca, assicurarsi che il tuo sito venga visualizzato nella pagina dei risultati di ricerca è importante per generare traffico in entrata.
Come si misura lo spostamento cumulativo del layout?
La buona notizia è che non devi misurare il CLS da solo perché Google rende davvero facile analizzare le prestazioni della tua pagina con lo strumento PageSpeed Insights o nel browser Chrome utilizzando Lighthouse Tools.
Per analizzare le prestazioni in PageSpeed Insights:
- Inserisci l’URL di un sito web nello strumento PageSpeed Insights di Google.
- Fare clic su “Analizza”.
- Controlla le tue prestazioni. Puoi rivedere le prestazioni sia mobili che desktop, che puoi alternare utilizzando la navigazione nell’angolo in alto a sinistra.
La pagina analizzata di seguito mostra un buon punteggio cumulativo di spostamento del layout di 0,001.
Per analizzare le prestazioni utilizzando gli strumenti di Lighthouse:
- Apri il sito web che desideri analizzare in Chrome.
- Passa a Strumenti per sviluppatori facendo clic sui tre punti nell’angolo in alto a destra della finestra del browser, scegliendo “Altri strumenti” e poi “Strumenti per sviluppatori”.
- Quando la console si apre, scegli “Lighthouse” dalle opzioni in alto.
- Fai clic su “Genera rapporto”.
La pagina seguente mostra un CLS di 0,109 o “necessita di miglioramento”.
Lighthouse fornisce una verifica dettagliata di ciò che ha contribuito a quel punteggio. Per rivedere l’audit, scorrere verso il basso e scegliere “Mostra audit rilevanti per CLS”.
Ulteriori informazioni sulla frazione di impatto e sulla distanza
Due termini che potresti vedere durante la ricerca di CLS sono “frazione di impatto” e “frazione di distanza”. Queste sono le due variabili che Google utilizza per calcolare CLS.
punteggio spostamento layout = frazione di impatto x frazione di distanza
La frazione di impatto si riferisce alla dimensione dell’elemento instabile rispetto al viewport. La frazione di distanza è la quantità di spostamento dell’elemento instabile come rapporto della finestra.
Quindi un CLS alto consisterebbe in un grande elemento che si muove a lunga distanza. Un piccolo CLS sarebbe il risultato di un piccolo elemento che si muove solo per una piccola distanza.
CLS è il più grande “burst” o gruppo di punteggi di spostamento del layout che si verificano durante una finestra di sessione. In sostanza, se si verificano molti cambiamenti in una finestra di cinque secondi, questo sarebbe considerato dirompente e si tradurrebbe in un punteggio CLS elevato.
Che cos’è un buon punteggio CLS?
Un buon punteggio cumulativo di layout è inferiore a 0,1. I report degli strumenti PageInsights o Lighthouse segnaleranno automaticamente eventuali punteggi scarsi, oltre a fornire consigli su come ottimizzare la pagina per prestazioni migliori.
Fonte
Come migliorare lo spostamento cumulativo del layout
Ci sono alcune best practice che i proprietari di siti web possono seguire per migliorare il loro punteggio CLS:
1. Utilizzare un CMS (sistema di gestione dei contenuti).
Soprattutto uno che si integra con Google Lighthouse o altri strumenti di diagnostica. Ciò assicurerà che stai progettando tenendo a mente le best practice e segnalando eventuali problemi prima di avviare il tuo sito.
2. Specificare gli attributi di dimensione per immagini e video.
Piuttosto che lasciare che impostino la propria altezza e larghezza, dettare gli attributi di dimensione per i file multimediali. Impostando questi attributi, stai dicendo al browser quanto spazio mettere da parte, anche se l’immagine non è ancora stata caricata.
3. Comprendi come gli annunci possono influenzare il tuo layout.
Tag publisher di Google offre una guida completa su come prenotare lo spazio per gli annunci.
Carica nuovi contenuti sotto il viewport. Il caricamento di contenuti al di sopra di ciò che l’utente sta visualizzando spesso causa lo spostamento di una pagina.
4. Utilizzare le transizioni e l’animazione per fornire un contesto intorno ai cambiamenti di pagina.
Ad esempio, un collegamento “Ulteriori informazioni” che fa scorrere l’utente verso il basso nella pagina non avrà alcun impatto su CLS perché è un cambiamento di layout previsto.
Una nota sul cambiamento di layout previsto o imprevisto
CLS tiene conto solo di modifiche impreviste. Se il layout cambia a causa di un’azione avviata dall’utente, non vi è alcun impatto su CLS. Questo è uno strumento utile da utilizzare quando non è necessario caricare tutto in una volta. Invece, offri agli utenti l’opportunità di scegliere quali elementi desiderano visualizzare tramite i link “leggi di più” o le fisarmoniche “espandi argomento” all’interno della tua pagina.
Offri una migliore esperienza utente con l’ottimizzazione CLS
Prestare attenzione a CLS non solo fornisce una migliore esperienza utente, ma aumenta anche il ranking dei risultati di ricerca. È una vittoria per tutti.
Per soddisfare gli standard di Google per CLS, inizia utilizzando uno strumento diagnostico per misurare le prestazioni attuali del tuo sito web. Prendi in considerazione le linee guida di base delineate sopra e tieni in primo piano i cambiamenti di layout durante la progettazione del tuo sito Web, in particolare per quanto riguarda le transizioni e le aggiunte di contenuto. Con queste poche semplici considerazioni, vedrai risultati migliori su tutta la linea.