Spostamenti del layout
Silktide osserva la tua pagina mentre si carica e misura quanto il layout cambia posizione, identificando le parti specifiche della pagina che si spostano. Una pagina stabile appare una volta e rimane al suo posto; una pagina instabile cambia posizione man mano che arrivano immagini, caratteri e contenuti incorporati.
La misurazione è il Cumulative Layout Shift (CLS), uno dei di Google. Somma ogni spostamento imprevisto durante il caricamento: un valore pari o inferiore a 0,1 è considerato buono, mentre un valore pari o superiore a 0,25 è considerato scarso.
Perché è importante
Gli spostamenti del layout causano errori reali. Un visitatore cerca di toccare un link, il contenuto cambia posizione all'ultimo momento e il visitatore finisce per toccare qualcos'altro, a volte un annuncio, a volte "Acquista" invece di "Annulla". Il testo che il visitatore sta leggendo gli scivola via da sotto gli occhi. Questo fa sembrare il sito difettoso e inaffidabile, in un modo che i visitatori notano immediatamente anche se non sanno descriverlo.
Google usa inoltre i Core Web Vitals, incluso questo indicatore, come segnale per il posizionamento nei risultati di ricerca, quindi una pagina instabile può compromettere la visibilità oltre alla fiducia degli utenti.
Come risolvere il problema
Silktide mostra quali elementi si sono spostati; per risolvere il problema, è necessario riservare loro spazio prima che vengano caricati.
- Assegna a ogni immagine e video una larghezza e un'altezza esplicite (oppure un rapporto d'aspetto CSS), in modo che il browser riservi lo spazio corretto prima dell'arrivo del file: consulta Dimensioni esplicite delle immagini.
- Riserva spazio per annunci, contenuti incorporati e altri contenuti caricati in ritardo utilizzando un contenitore di dimensioni fisse, anche se a volte rimane parzialmente vuoto.
- Non inserire mai nuovi contenuti sopra ciò che il visitatore sta già leggendo, a meno che non sia una risposta a un'azione eseguita dal visitatore stesso.
- Carica i caratteri personalizzati in modo da evitare un ridisposizionamento visibile del testo: consulta Testo visibile durante il caricamento.
Come Silktide esegue il controllo
- Carica la pagina in un browser reale, utilizzando il tipo di dispositivo, la velocità di connessione e la posizione di test configurati per i test di velocità.
- Registra ogni spostamento imprevisto del layout durante il caricamento della pagina e li somma nel punteggio Cumulative Layout Shift della pagina.
- Indica ogni elemento che si è spostato, con il relativo e il suo contributo individuale al totale.
- Valuta la pagina in base al punteggio totale, secondo la scala pubblica prevista per questa misurazione: un valore pari o inferiore a 0,1 è buono, mentre un valore pari o superiore a 0,25 è scarso.
Risoluzione dei problemi
Non vedo la pagina spostarsi
Gli spostamenti avvengono spesso nei primi istanti del caricamento, prima che tu inizi a leggere, oppure solo sulle connessioni più lente, quando i file arrivano gradualmente nel tempo. Inoltre, il browser potrebbe avere già memorizzato nella cache le immagini e i caratteri della pagina, quindi non è necessario che arrivino in ritardo. Tuttavia, gli elementi elencati dal controllo indicano con precisione cosa si è spostato, anche se solo per poco tempo.
Il mio punteggio è diverso da quello di altri strumenti
Il CLS dipende dal dispositivo, dalla velocità di connessione e dalla durata della misurazione. Silktide misura un caricamento della pagina controllato con le impostazioni configurate per il test di velocità; gli strumenti basati sui dati dei visitatori reali (o che continuano a misurare mentre gli utenti scorrono e interagiscono) possono legittimamente riportare valori diversi per la stessa pagina.
Scopri di più
- Velocità delle pagine e Core Web Vitals - quadro di riferimento per stabilire le priorità relative al CLS e agli altri indicatori
- Cumulative Layout Shift (web.dev)
- Ottimizzare il Cumulative Layout Shift (web.dev)
- Dimensioni esplicite delle immagini
- Testo visibile durante il caricamento
- Web Vitals