Test di fluidità dello scorrimento – Misura il jank dello scroll

Questo test di fluidità dello scorrimento misura il tipo di movimento che incontri più di ogni altro: una pagina o un elenco che scorre sotto il tuo dito o la rotellina. Lo scorrimento è il punto in cui il jank compare per primo, perché avviene di continuo e i tuoi occhi sono allenati a coglierlo. Una pagina che sobbalza mentre si muove, un feed che salta quando lo scorri con un colpo di dito, un documento che vibra riga per riga: tutto si riduce alla capacità del browser di consegnare un fotogramma nuovo a ogni refresh mentre il contenuto è in movimento. Questo test fa scorrere una fascia alta di righe numerate con uno step fisso per fotogramma e conta i frame che arrivano in ritardo.

Poiché le righe riportano numeri chiari e bordi netti, i tuoi occhi possono giudicare la fluidità in modo diretto, mentre il misuratore la quantifica con un valore. Questo ti permette di confrontare browser, estensioni e computer con dati concreti invece che con una vaga impressione.

Come usare il test di scorrimento

La fascia scorre da sola non appena la pagina si carica. Per leggerla bene:

• Osserva il movimento delle righe. Uno scorrimento fluido appare come un unico scivolamento continuo; il jank appare come righe che saltano o esitano mentre passano.
• Segui con gli occhi il numero di una riga mentre sale. Se scivola in modo uniforme, il timing è buono; se scatta, un fotogramma era in ritardo.
• Leggi il misuratore. Il tempo di fotogramma previsto è il tuo normale intervallo tra i frame, il divario massimo tra fotogrammi è il ritardo più lungo registrato e i jank contano ogni frame in ritardo.
• Provalo a schermo intero e regola la velocità in base a come scorri di solito: una lettura tranquilla o un colpo rapido di dito.

Usa Azzera misuratore per iniziare un nuovo conteggio. Lasciare il test in esecuzione per trenta secondi offre un quadro più onesto rispetto a una rapida occhiata, perché i sobbalzi di sottofondo vanno e vengono.

Perché lo scorrimento sobbalza

Uno scorrimento fluido richiede al browser di produrre un nuovo fotogramma a ogni refresh — ogni 16.7 millisecondi a 60 Hz, ogni 8.3 a 120 Hz — mentre gestisce anche la pagina. Quando qualcosa ritarda quel lavoro, un fotogramma viene perso e lo scorrimento sobbalza. I responsabili abituali sono precisi e risolvibili.

Pagine e script pesanti

Immagini di grandi dimensioni, layout complessi e script impegnativi rendono costoso disegnare ogni fotogramma scorso. Le pagine che eseguono codice a ogni evento di scorrimento sono particolarmente inclini al jank. Questa è una caratteristica della pagina tanto quanto del tuo computer, ed è per questo che alcuni siti scorrono in modo fluido e altri no sullo stesso computer.

Estensioni del browser

Le estensioni per il blocco dei contenuti, gli acquisti e l'accessibilità analizzano la pagina mentre si muove. Una singola estensione mal ottimizzata può aggiungere quel tanto di lavoro per fotogramma da causare uno scatto visibile. Fare il test in una finestra privata, dove la maggior parte delle estensioni è disattivata, è un modo rapido per verificare.

Compositing e accelerazione hardware

I browser cercano di affidare lo scorrimento alla GPU così da mantenerlo fluido anche quando la pagina è impegnata. Quando l'accelerazione hardware è disattivata o una pagina riporta il lavoro sul thread principale, lo scorrimento ripiega sul percorso più lento e sobbalza. Attivare l'accelerazione hardware nelle impostazioni del browser di solito aiuta.

Risparmio energetico e carico di sottofondo

Come per qualsiasi movimento, un portatile in modalità risparmio batteria, un dispositivo surriscaldato che si autolimita o un processo in background che ruba tempo CPU faranno tutti arrivare i fotogrammi in ritardo. Il test di scorrimento riflette lo stesso stato di salute del sistema che governa ogni altro tipo di movimento.

Come si presenta un buon risultato

Uno scorrimento sano è un frame rate alto e costante, con un conteggio di jank vicino allo zero e un divario massimo tra fotogrammi prossimo al tempo di fotogramma previsto. La tabella qui sotto mostra il tempo di fotogramma obiettivo per le frequenze di aggiornamento più comuni: il valore attorno al quale il test dovrebbe oscillare durante lo scorrimento.

Una frequenza di aggiornamento più alta rende lo scorrimento nettamente più fluido, ma solo se il browser riesce a continuare a rispettare quel budget più stretto. Verifica la frequenza di aggiornamento con cui stai effettivamente lavorando con la nostra guida alla frequenza di aggiornamento e misura il tuo frame rate grezzo con il test FPS principale.

Come rendere lo scorrimento più fluido

• Attiva l'accelerazione hardware nelle impostazioni del browser così che lo scorrimento venga eseguito sulla GPU.
• Disattiva le estensioni pesanti una alla volta, oppure fai il test in una finestra privata, per individuare il responsabile.
• Chiudi i carichi in background e mantieni il dispositivo fresco e collegato alla corrente.
• Aumenta la frequenza di aggiornamento se il tuo display la supporta, poi ripeti il test per confermare che il browser tenga il passo.
• Aggiorna il browser e i driver grafici, che spesso portano miglioramenti al compositor e allo scorrimento.

Se lo scorrimento qui è scattoso ma un gioco gira in modo fluido, la causa è di solito il browser o la pagina piuttosto che l'hardware. Se il movimento è irregolare ovunque, misuralo in modo isolato con il test dello stuttering, che usa lo stesso misuratore di tempo di fotogramma senza il contenuto in scorrimento.

Domande frequenti

Qui lo scorrimento è fluido ma su alcuni siti web è scattoso. Perché?

Perché la fluidità dipende sia dalla pagina sia dal tuo computer. Script pesanti, immagini di grandi dimensioni e gestori di eventi di scorrimento rendono alcuni siti costosi da far scorrere. Un risultato pulito qui significa che il tuo browser e il tuo hardware sono all'altezza; il collo di bottiglia è il sito impegnativo.

Una frequenza di aggiornamento più alta rende lo scorrimento più fluido?

Sì, a patto che il browser riesca a consegnare un fotogramma a ogni refresh. Uno schermo a 120 Hz scorre in modo più fluido di uno a 60 Hz, ma solo finché la pagina continua a rispettare il budget di fotogramma più breve. Se non ci riesce, vedrai semplicemente il jank prima.

Perché la stessa pagina scorre in modo diverso in due browser?

I browser differiscono nel modo in cui gestiscono il compositing e affidano lo scorrimento alla GPU, e nel modo in cui le estensioni si agganciano alla pagina. È comune che un browser faccia scorrere una pagina in modo fluido mentre un altro sobbalza su hardware identico.

È la stessa cosa di un test dello stuttering?

Condividono il misuratore di tempo di fotogramma, ma questo test spinge contenuti di scorrimento reali attraverso il compositor del browser, che è il caso quotidiano a cui la maggior parte delle persone tiene. Il test dello stuttering isola il timing grezzo dei fotogrammi senza il livello di scorrimento.

Questo test verifica il mio monitor o il mio browser?

Principalmente il tuo browser e il computer su cui gira. Le righe si muovono attraverso il percorso di rendering e compositing del browser, quindi un risultato scadente indica di solito il browser, un'estensione o il carico di sistema piuttosto che il pannello. Il tuo display fissa comunque il limite massimo — uno schermo a 60 Hz non potrà mai scorrere in modo fluido come uno a 120 Hz — ma, dando per scontato che la frequenza di aggiornamento sia adeguata, questo test giudica quanto bene il software tenga il passo.

Impostazioni di scorrimento fluido e scorrimento ad alta frequenza

La maggior parte dei browser e dei sistemi operativi offre un'opzione di scorrimento fluido che anima ogni step di scroll invece di saltare. Rende il movimento più delicato, ma non crea fotogrammi che il browser non è in grado di disegnare: se la pagina è pesante, lo scorrimento fluido si limita ad animare il jank. Il vantaggio reale arriva da una frequenza di aggiornamento elevata abbinata a una pagina abbastanza leggera da tenere il passo. Su uno schermo a 120 Hz, far scorrere una pagina semplice è visibilmente più fluido che a 60 Hz, perché il doppio dei fotogrammi descrive lo stesso movimento. Questo test ti permette di confermare che il tuo browser stia davvero consegnando quei fotogrammi invece di scartarne la metà.

Scorrimento su mobile, trackpad e rotellina

Il modo in cui scorri cambia ciò che percepisci. Una rotellina del mouse si muove a scatti discreti, quindi la fluidità dipende da quanto bene il browser anima la transizione tra di essi. Un trackpad o uno schermo touch scorre in modo continuo e viene affidato al compositor, che di solito è il percorso più fluido — ma anche quello in cui è più evidente quando un fotogramma viene scartato, perché il tuo dito crea un'aspettativa che lo schermo deve soddisfare. Telefoni e tablet sono particolarmente sensibili in questo, dato che lo scorrimento è il modo principale con cui ti muovi attraverso ogni cosa. Se una pagina sobbalza sotto il tuo dito ma non con la rotellina, il compositor è costretto ad attendere il thread principale.

Da cosa dipende uno scorrimento senza jank

Uno scorrimento fluido è una catena, e l'anello più debole determina il risultato: la pagina deve essere abbastanza leggera da poter essere disegnata in tempo, il browser deve affidare lo scorrimento alla GPU, il sistema non deve essere impegnato o in autolimitazione e il display deve avere il margine di frequenza per mostrare i fotogrammi. Questo test mette alla prova l'intera catena in una volta sola. Quando il valore è buono, ogni anello sta reggendo; quando è scadente, le sezioni qui sopra restringono il campo su quale anello guardare per primo. Poiché lo scorrimento è così comune, piccoli miglioramenti danno frutti ovunque: un aggiornamento del browser, un'estensione disattivata o il passaggio all'accelerazione hardware possono trasformare un risultato scattoso in uno pulito, e sentirai la differenza su ogni sito che visiterai in seguito.

Test correlati su display e movimento

Lo scorrimento è una fetta quotidiana delle prestazioni di movimento. Continua con questi strumenti complementari:

• Test del frame rate (test FPS) — misura il tuo frame rate e la tua frequenza di aggiornamento in tempo reale.
• Test del motion blur — scopri quanto il tuo schermo sfoca i dettagli in movimento.
• Test del salto di fotogrammi — verifica se il pannello disegna ogni fotogramma.
• Test del tearing dello schermo — verifica se i fotogrammi sono allineati al refresh.
• Test dello stuttering — misura la coerenza del tempo di fotogramma via software.