Perché la pagina del tuo sito si sposta mentre si carica

Se la pagina si sposta mentre si carica, la domanda è che cosa puoi controllare sulla pagina: un'immagine senza dimensioni, un font, un banner che arriva dopo il primo disegno. Il 3 novembre 2026 ho letto la guida per ridurre gli spostamenti, la pagina della metrica, e tre pagine già online: le misure, il gesto e il ritardo dell'immagine principale. Non dicono la stessa cosa. Non ho misurato un sito.

Le tre pagine già online

La pagina sulle misure risponde a che cosa misurare prima di cambiare server. Tiene le soglie, la finestra di sessione e il segno dei 500 millisecondi della pagina del 12 aprile 2023. Dice anche che la guida per migliorare gli spostamenti non era stata aperta. Non la riscrivo. Che cosa misurare sul tuo sito prima di cambiare server.

La pagina sul gesto misura quanto passa da un clic, un tap o un tasto al disegno successivo. Nel testo non ho trovato gli spostamenti, i font né un banner. Non la riscrivo. INP: cos'è e come migliorare la reattività del sito.

La pagina sul ritardo dice che l'attributo aspetta che il layout confermi che l'immagine è nell'area visibile, e che sull'immagine che decide il contenuto più grande la guida letta il 2 novembre 2026 dice di non usarlo. Qui layout è quel controllo sull'area visibile. Non è l'elenco delle cause di uno spostamento. Non la riscrivo. loading=lazy: quando non va sull'immagine principale.

La guida del 7 febbraio 2025

La guida Optimize Cumulative Layout Shift è di Addy Osmani e Barry Pollard. In pagina: pubblicata il 5 maggio 2020, ultimo aggiornamento il 7 febbraio 2025. Last-modified della risposta: 7 febbraio 2025 alle 08:00:00 GMT. La risposta letta il 3 novembre 2026 porta la data 05:19:19 GMT. Il giorno dell'aggiornamento in pagina e il giorno del last-modified coincidono. L'ora c'è solo nell'intestazione. Non la metto dentro la riga in pagina. Il 5 maggio 2020 non è il 7 febbraio 2025. Non li unisco. Indirizzo: https://web.dev/articles/optimize-cls.

Dice che la metrica misura l'instabilità del contenuto unendo quanto contenuto visibile si è spostato nell'area visibile e quanto si sono mossi gli elementi. A differenza delle altre Core Web Vitals, che sono tempi in secondi o millisecondi, questo punteggio non ha unità: dipende da quanto contenuto si sposta e da quanto lontano. Non è un orologio. Non lo unisco ai millisecondi della pagina sul gesto.

Per una buona esperienza, scrive, i siti dovrebbero cercare un punteggio di 0,1 o meno per almeno il 75 per cento delle visite di pagina. Un'altra frase, subito dopo, dice che i valori buoni sono 0,1 o meno e che i valori scarsi sono maggiori di 0,25. La pagina del 12 aprile 2023, già citata nelle misure, separa il 0,1 o meno dal 75° percentile dei caricamenti, diviso fra mobile e desktop, e ha la coppia buono e scarso in una frase sua. Il 75 per cento delle visite, in una sola frase col 0,1, non è il 75° percentile separato per dispositivo. Non li unisco. Non rifaccio il confronto con Search Central e con Web Vitals: sta già sulla pagina delle misure.

La guida elenca le cause più comuni di un punteggio scarso in quattro voci. Immagini senza dimensioni. Annunci, incorporamenti e riquadri senza dimensioni. Contenuto inserito in modo dinamico, come annunci, incorporamenti e riquadri senza dimensioni. Font per il web. La seconda voce e la terza nominano gli stessi tre oggetti. La terza aggiunge che il contenuto è inserito in modo dinamico. Restano due voci. Non le unisco.

Più avanti distingue il laboratorio dal campo. Gli strumenti di laboratorio, scrive, di solito fanno un caricamento di base e possono non mostrare tutto il punteggio. Il rapporto sull'esperienza di Chrome misura l'intera vita della pagina, non solo il caricamento iniziale. Gli spostamenti durante il caricamento sono comuni. Quelli dopo il caricamento possono venire da un gesto della persona, e in quel caso restano fuori dal punteggio. Altri, inattesi, ci entrano: l'esempio è scorrere e trovare contenuto ritardato senza spazio riservato. Un altro caso dopo il caricamento è il contenuto che si sposta quando il puntatore ci sta sopra. PageSpeed Insights mostra il valore percepito dalle persone e quello di laboratorio sul caricamento. Se i due divergono, la guida dice che è probabile uno spostamento dopo il caricamento. Se invece sono allineati, di solito il problema è nel caricamento, e Lighthouse segnala le immagini senza larghezza e altezza. Lighthouse indica gli elementi che si sono mossi, e spesso sono quelli spinti, non la causa: se si inserisce un elemento nuovo, sotto compaiono quelli spostati, e la causa è l'inserimento. Non ho eseguito Lighthouse. Non ho aperto PageSpeed su un sito.

Una nota della stessa guida: gli spostamenti dentro i riquadri incorporati non si misurano dalle API del web, ma la persona li vede, e il rapporto di Chrome li include. La pagina delle misure ha già una frase sua, dalla lettura del 12 aprile 2023, sul rapporto e sui riquadri. Non la ricopio. Questa nota è della guida del 7 febbraio 2025.

Immagini e video senza dimensioni

La guida dice di mettere sempre larghezza e altezza sulle immagini e sui video. In alternativa, riservare lo spazio con la proprietà CSS del rapporto fra i lati, o un modo simile. Così il browser può riservare lo spazio mentre l'immagine si carica.

Racconta che all'inizio si mettevano larghezza e altezza proprio per riservare lo spazio prima dello scaricamento. L'esempio della pagina è un'immagine 640 per 360. Quei numeri non hanno unità negli attributi, e la pagina dice che il browser riservava un'area 640 per 360. L'immagine si adattava a quello spazio anche se le dimensioni vere erano diverse. Sono l'esempio della guida. Non sono la misura di un sito.

Poi, con le pagine che si adattano allo schermo, molti hanno tolto larghezza e altezza e hanno usato il CSS: larghezza al 100 per cento, altezza automatica. Se la dimensione non è scritta, lo spazio non si può riservare finché il browser non comincia a scaricare l'immagine e non ne legge le dimensioni. Mentre le immagini arrivano, il testo scende per fargli posto.

Il rapporto fra i lati è larghezza diviso altezza. La guida lo scrive spesso come due numeri separati da due punti, per esempio 16:9 o 4:3. Se si conosce un lato, l'altro si ricava. Nell'esempio 16:9, un'altezza di 360 dà una larghezza di 640, e una larghezza di 640 dà un'altezza di 360. È l'aritmetica della pagina. Non l'ho misurata su una foto.

I browser moderni, scrive, impostano il rapporto predefinito a partire dagli attributi di larghezza e altezza. Si mettono quegli attributi e il CSS di prima. Il rapporto si calcola prima che l'immagine sia scaricata. Quando alla larghezza si dà un valore, per esempio il 100 per cento, l'altezza si ricava dal rapporto. La parte automatica di quel valore fa sì che, dopo lo scaricamento, le dimensioni vere dell'immagine sostituiscano il rapporto predefinito. Se le dimensioni vere sono diverse, uno spostamento resta, ma è minore della dimensione predefinita 0 per 0 di un'immagine senza dimensioni. Il confronto col 0 per 0 è la frase della guida. Non è una misura mia.

Su come i browser mostrano quel valore calcolato, la guida non ha una sola frase. Chrome lo mostra nel pannello degli stili. Safari si comporta in modo simile, con gli attributi HTML come fonte. Firefox non lo mostra nell'ispettore, ma lo usa per il layout. Tre browser. Non li unisco.

Per le immagini responsive, la guida dice che ogni immagine fra cui il browser sceglie dovrebbe avere lo stesso rapporto, così larghezza e altezza si possono scrivere. Se il ritaglio cambia secondo la larghezza dello schermo, Chrome, Firefox e Safari accettano larghezza e altezza anche su ogni sorgente dentro l'elemento che le raggruppa. L'esempio della pagina usa ritagli diversi, con numeri suoi. Non li assegno a un sito.

Annunci, incorporamenti, banner

La guida dice che non sono solo le immagini. Annunci, incorporamenti, riquadri e altro contenuto inserito in modo dinamico possono far scendere ciò che sta dopo, e il punteggio sale. Gli annunci, scrive, sono fra i contributi più grandi agli spostamenti sul web. Reti e editori spesso accettano dimensioni dinamiche. La stessa pagina dice che quelle dimensioni aumentano le prestazioni e il ricavo, per tassi di clic più alti e più annunci in asta, e che possono spingere in basso il contenuto che si sta guardando. Le due frasi restano insieme, come le ha scritte. Non tengo solo il disagio.

I pezzi incorporati, per esempio video, mappe e messaggi dei social, spesso non sanno quanto saranno grandi prima di caricarsi. Le piattaforme non riservano sempre lo spazio, e lo spostamento arriva quando il pezzo si carica. Se lo inserisce un terzo, si può non conoscere la dimensione esatta, e non si controllano gli spostamenti dentro quel pezzo.

Per il contenuto che arriva tardi, la guida dice di riservare lo spazio già nel primo layout. Un modo è un'altezza minima. Per contenuto che si adatta, come gli annunci, la proprietà del rapporto fra i lati, in modo simile a quello che i browser fanno da soli per le immagini con le dimensioni. Si può dover tener conto di differenze piccole fra i formati, con regole per la larghezza dello schermo. Se l'altezza non è fissa, si può non riuscire a riservare lo spazio esatto. Se arriva un annuncio più piccolo, si può dare al contenitore una misura più grande, oppure scegliere la misura più probabile in base ai dati storici. Il costo, scrive la guida, è più spazio vuoto nella pagina. In alternativa si parte dalla misura più piccola che si userà, e si accetta uno spostamento per il contenuto più grande. L'altezza minima fa crescere il contenitore e riduce l'effetto rispetto alla dimensione predefinita 0 di un elemento vuoto. Il confronto è fra l'altezza minima e quello 0. Non è un altro orologio.

Togliere lo spazio riservato, per esempio se l'annuncio non arriva, causa tanto spostamento quanto inserire contenuto. La guida dice di lasciare un segnaposto. Il contenuto inserito più vicino al bordo alto dell'area visibile di solito sposta di più di quello inserito più in basso. Inserire in qualunque punto dell'area visibile sposta comunque qualcosa. Se non si può riservare lo spazio, la guida consiglia di metterlo più in basso nella pagina.

Banner e moduli che compaiono in alto o in basso, mentre la pagina sta arrivando, spostano il resto. Se servono, si riserva prima lo spazio, con un segnaposto o uno schema vuoto, oppure si sovrappongono al contenuto così non stanno nel flusso. La guida rimanda a un altro scritto sugli avvisi dei cookie. Non l'ho aperto.

Quando il contenuto dinamico fa parte dell'uso, per esempio altri prodotti in una lista o un flusso che si aggiorna, la guida elenca tre modi. Sostituire il vecchio col nuovo dentro un contenitore di misura fissa, o un carosello, e togliere il vecchio dopo la transizione, disattivando link e controlli finché la transizione non è finita. Far partire il caricamento dalla persona, con un pulsante, e preparare il contenuto prima del gesto così compare subito. Caricare fuori dall'area visibile e sovrapporre un avviso che il contenuto c'è. Sono tre modi della guida. Non li unisco in un solo consiglio.

I 500 millisecondi, in questa guida

Dentro il secondo modo, la guida ricorda che gli spostamenti entro 500 millisecondi dall'input della persona non entrano nel punteggio. Una nota a parte dice che, se il contenuto può impiegare più di 500 millisecondi, per esempio perché deve arrivare dalla rete, riservare lo spazio atteso dentro quella finestra di 500 millisecondi fa sì che gli spostamenti successivi non entrino nel punteggio. Sono due frasi. Una dice che cosa non entra. L'altra dice di anticipare lo spazio se l'attesa supera quei 500. Non le unisco.

La pagina del 12 aprile 2023, già sulla pagina delle misure, dice un'altra cosa: gli spostamenti entro 500 millisecondi dall'input hanno un segno e si possono escludere, e il segno vale solo per eventi discreti, non per scorrimento, trascinamento e pizzico. Si possono escludere non è la stessa frase di non entrano. Non le unisco. Non riscrivo la pagina delle misure.

I font

Prima che il font del sito sia scaricato, la guida descrive due modi. Il font di riserva viene sostituito dal font del sito: un lampo di testo non stilizzato. Oppure il testo resta invisibile, ma è comunque disposto col font di riserva, finché il font del sito c'è e il testo diventa visibile. Tutti e due possono spostare il layout. Anche il testo invisibile è disposto col font di riserva, quindi quando arriva il font del sito il blocco e il contenuto intorno si spostano come per il font visibile.

La guida elenca strumenti, e non sono la stessa frase. font-display con il valore optional può evitare un nuovo layout, perché il font del sito si usa solo se è già disponibile al primo layout. Un font di riserva adatto: l'esempio è una famiglia con un nome e, dopo, il generico senza grazie. Senza quel generico, su Chrome il predefinito è Times, un font con le grazie, e la guida lo chiama un accoppiamento peggiore del senza grazie predefinito. È l'esempio della guida su Chrome. Non ho controllato un browser oggi. Le proprietà per avvicinare le misure del font di riserva a quelle del font del sito sono quattro, e la guida rimanda a un altro scritto. Non l'ho aperto. L'API di caricamento dei font può ridurre il tempo per averli. Caricare prima i font critici, con un preload, dà più possibilità che arrivino al primo disegno, e in quel caso non c'è spostamento. La guida rimanda anche a un scritto sulle pratiche per i font. Non l'ho aperto. Il preload e il valore optional restano due frasi. Non li unisco.

Le animazioni, due pagine

Nella guida del 7 febbraio 2025, alcuni valori CSS chiedono al browser un nuovo layout, un nuovo disegno e la composizione. Gli esempi sono l'ombra del riquadro e il modo di calcolare il riquadro. Cambiare le proprietà alto e sinistra sposta il layout anche se l'elemento sta su un livello suo. La guida dice di non animare con quelle proprietà. Altre si cambiano senza un nuovo layout: le trasformazioni che traslano, scalano, ruotano o inclinano. Una traslazione composta non può toccare gli altri elementi, e quindi non entra nel punteggio. Anche le animazioni non composte non causano un nuovo layout. La guida rimanda a un'altra pagina su quali proprietà spostano il layout. Non l'ho aperta.

La pagina del 12 aprile 2023 ha una sezione sua. Per animare senza spostare il layout, al posto di altezza e larghezza usa la scala, e al posto di alto, destra, basso e sinistra usa la traslazione. Chiede anche di rispettare l'impostazione di chi preferisce meno movimento. Non è l'elenco ombra e calcolo del riquadro. Non è la frase sulla traslazione composta che non entra nel punteggio. Non le unisco.

Il ritorno indietro, in questa guida

La guida dice che un modo efficace per tenere basso il punteggio è rendere le pagine ammesse alla cache del ritorno. Quella cache tiene le pagine in memoria per un periodo breve dopo che si è andati via, e al ritorno le ripristina come erano. La pagina già carica è subito disponibile, senza gli spostamenti che di solito si vedono al caricamento per le cause dette prima. Il primo caricamento può ancora spostarsi. Quando la persona torna indietro, non rivede gli stessi spostamenti. La guida dice comunque di cercare di evitarli anche al primo caricamento. Quando la funzione è arrivata su Chrome, scrive, si sono visti miglioramenti visibili del punteggio. Non dà un numero. Non ne invento uno. Aggiunge che la cache è usata di default da tutti i browser, e che alcuni siti non sono ammessi. Rimanda a una guida. Non l'ho aperta.

La pagina già online sul ritorno indietro è un altro argomento. Non la riscrivo. Perché tornando indietro il tuo sito mostra la pagina com'era.

La pagina del 12 aprile 2023, riletta oggi

La pagina della metrica ha in pagina la riga Last updated 2023-04-12 UTC. Last-modified della risposta: 12 aprile 2023 alle 07:00:00 GMT. La risposta letta il 3 novembre 2026 porta la data 05:19:20 GMT. Il giorno in pagina e il giorno del last-modified coincidono. L'ora c'è solo nell'intestazione. Non la metto nella riga in pagina. Gli autori sono Milica Mihajlija e Philip Walton. Indirizzo: https://web.dev/articles/cls.

La pagina delle misure, aggiornata il 3 novembre 2026, dice di avere letto un last-modified del 12 aprile 2023 e di non avere trovato, nel testo estratto, una frase di pubblicazione o di ultimo aggiornamento. Oggi la riga c'è. Non so perché l'estratto di allora non la mostrasse. Non invento una ragione. Non riscrivo quella pagina.

Sulle cause, questa pagina ha una frase sua. Il movimento inatteso di solito arriva quando le risorse si caricano in modo asincrono o quando si aggiungono elementi sopra il contenuto già presente. La causa può essere immagini o video di dimensioni sconosciute, un font che risulta più grande o più piccolo del font di riserva, o un annuncio o un widget di terzi che cambia misura. Non è l'elenco di quattro voci della guida del 7 febbraio 2025. Non li unisco.

Definisce lo spostamento come il cambio della posizione di partenza di un elemento già visibile nell'area visibile, fra due fotogrammi. Aggiungere un elemento, o cambiare la misura di un elemento, non conta da solo, finché quel cambio non fa muovere la posizione di partenza di altri elementi visibili. Un banner che compare conta, in questa definizione, se sposta qualcos'altro. Non è la frase della guida che elenca i banner fra le cause. Non le unisco.

Esempio ipotetico

bottega.example è un nome di scuola. Non l'ho aperto. Non so se una sua immagine è senza larghezza e altezza, se un font arriva dopo, o se un banner entra dall'alto mentre la pagina si carica. prova.bottega.example è l'altro nome. Non l'ho aperto. Non so se un contenuto inserito dopo sposta il testo sotto.

Non assegno a questi nomi un punteggio di 0,1, un 0,25, un 75 per cento di visite, un 75° percentile, 640 per 360, 500 millisecondi, né un miglioramento misurato su Chrome. I numeri restano quelli delle pagine lette.

Che cosa questa pagina lascia stare

Non ho misurato un sito. Non ho aperto Lighthouse né PageSpeed su una pagina vera. Il nome della metrica sta nel testo, dopo la domanda. La copertina è nuova, perché la pagina è nuova. Non ho riscritto la pagina sulle misure, quella sul gesto, quella sull'immagine principale, quella sul ritorno indietro, quella sulla connessione lunga, quella sul lavoro lungo, quella sulla copia di prova, quella sulla chiave, quella sulla compressione e quella sulla cartella.

Fonti lette il 3 novembre 2026. Guida Optimize Cumulative Layout Shift, pubblicata il 5 maggio 2020, ultimo aggiornamento in pagina il 7 febbraio 2025, last-modified 7 febbraio 2025 alle 08:00:00 GMT, risposta delle 05:19:19 GMT, https://web.dev/articles/optimize-cls. Pagina Cumulative Layout Shift, ultimo aggiornamento in pagina 2023-04-12 UTC, last-modified 12 aprile 2023 alle 07:00:00 GMT, risposta delle 05:19:20 GMT, https://web.dev/articles/cls. Pagine già online, non riscritte: le misure, il gesto, il ritardo dell'immagine principale, il ritorno indietro.