Ottimizza ritardo input

Scopri cos'è il ritardo dell'input e impara tecniche per ridurlo e favorire un'interattività più rapida.

Jeremy Wagner
Jeremy Wagner
GitHub Homepage

Le interazioni sul Web sono cose complicate, perché nel browser si verificano ogni tipo di attività che le spinge a spingerle. Tuttavia, ciò che hanno in comune è che subiscono un ritardo di input prima che inizi l'esecuzione dei callback eventi. In questa guida scoprirai che cos'è il ritardo dell'input e cosa puoi fare per ridurlo in modo che le interazioni sul tuo sito web siano più veloci.

Che cos'è input Delay?

Il ritardo input è il periodo di tempo che intercorre dal momento in cui l'utente interagisce per la prima volta con una pagina, ad esempio toccando uno schermo, facendo clic con il mouse o premendo un tasto, fino al momento in cui inizia l'esecuzione dei callback dell'evento per l'interazione. Ogni interazione inizia con un certo ritardo dell'input.

Una visualizzazione semplificata di Input Delay. A sinistra è presente un puntatore di mouse lineare con una serie di stelle sullo sfondo, che indica l'inizio di un'interazione. A destra si vede il disegno al tratto di una ruota dentata, che indica quando iniziano l'esecuzione dei gestori di eventi per un'interazione. Lo spazio intermedio è indicato come ritardo di input con una parentesi graffa.
I meccanismi alla base di Input Delay. Quando un input viene ricevuto dal sistema operativo, deve essere trasmesso al browser prima che abbia inizio l'interazione. Questa operazione richiede un certo periodo di tempo e può essere aumentata dal lavoro del thread principale esistente.

Una parte del ritardo dell'input è inevitabile: il sistema operativo impiega sempre un po' di tempo per riconoscere un evento di input e passarlo al browser. Tuttavia, questa parte del ritardo dell'input spesso non è neanche evidente e ci sono altri aspetti che si verificano nella pagina stessa che possono causare ritardi nell'input abbastanza lunghi da causare problemi.

Come considerare input Delay

In generale, è consigliabile che ogni fase di un'interazione sia il più breve possibile, in modo che il tuo sito web abbia le migliori possibilità di soddisfare la soglia "buona" della metrica Interaction to Next Paint (INP), indipendentemente dal dispositivo dell'utente. Mantenere sotto controllo il ritardo dell'input è solo una parte del raggiungimento di questa soglia.

Si potrebbe avere la tentazione di osservare le soglie di First Input Delay (FID) per determinare un margine per i ritardi di input, ma la soglia "buona" per FID è 100 millisecondi o meno. Se raggiungi questa soglia, assegneresti metà del budget affinché INP possa essere utilizzato solo per il ritardo di input. Questa operazione è sconsigliabile se si considera che un'interazione richiede anche del tempo per l'esecuzione dei callback eventi e per il browser di colorare il frame successivo.

Per raggiungere la soglia "buona" di INP, dovrai puntare al minor ritardo di input possibile, ma non aspettarti di eliminarla completamente, dato che è impossibile. Se evita un lavoro eccessivo del thread principale mentre gli utenti tentano di interagire con la tua pagina, il ritardo di input dovrebbe essere sufficientemente basso da evitare problemi.

Come ridurre al minimo il ritardo dell'input

Come detto in precedenza, un certo ritardo dell'input è inevitabile, ma è evitabile. Di seguito sono riportati alcuni aspetti da considerare se hai difficoltà con lunghi ritardi di input.

Evita timer ricorrenti che causano l'eccessivo lavoro del thread principale

Esistono due funzioni timer di uso comune in JavaScript che possono contribuire all'incremento dell'input: setTimeout e setInterval. La differenza tra i due è che setTimeout pianifica l'esecuzione di un callback dopo un orario specificato. setInterval, d'altra parte, pianifica un callback da eseguire ogni n millisecondi di perpetuità o fino all'interruzione del timer con clearInterval.

setTimeout di per sé non è problematico, anzi può essere utile per evitare attività lunghe. Tuttavia, dipende da quando si verifica il timeout e se l'utente tenta di interagire con la pagina quando viene eseguito il callback di timeout.

Inoltre, setTimeout può essere eseguito in un loop o in modo ricorsivo, dove agisce in modo più simile a setInterval, ma preferibilmente non pianificando l'iterazione successiva fino al completamento di quella precedente. Questo significa che il loop andrà al thread principale ogni volta che viene chiamato setTimeout, ma dovresti assicurarti che il callback non finisca per fare un lavoro eccessivo.

setInterval esegue un callback in base a un intervallo, pertanto è molto più probabile che interferisca con le interazioni. Questo perché, a differenza di una singola istanza di una chiamata setTimeout, che è un callback una tantum che potrebbe interferire con l'interazione di un utente, la natura ricorrente di setInterval aumenta le probabilità che intralci un'interazione, aumentando così il ritardo di input dell'interazione.

Uno screenshot del profiler delle prestazioni in Chrome DevTools che mostra il ritardo di input. Un'attività attivata da una funzione timer si verifica subito prima che un utente avvii un'interazione con un clic. Tuttavia, il timer estende il ritardo dell'input, causando l'esecuzione dei callback eventi dell'interazione più tardi di quanto previsto.
Un timer registrato da una chiamata setInterval precedente che contribuisce al ritardo dell'input, come illustrato nel riquadro delle prestazioni di Chrome DevTools. L'aggiunta di ritardo dell'input determina l'esecuzione dei callback evento per l'interazione più tardi di quanto non sarebbe possibile fare in caso contrario.

Se i timer vengono eseguiti in codice proprietario, sei tu ad avere il controllo su di essi. Valuta se ne hai bisogno o fai del tuo meglio per ridurne il più possibile il lavoro. Tuttavia, i timer negli script di terze parti sono diversi. Spesso non hai il controllo su ciò che fa uno script di terze parti e la risoluzione dei problemi di prestazioni nel codice di terze parti spesso comporta una collaborazione con gli stakeholder per determinare se è necessario uno script di terze parti e, in questo caso, contatta un fornitore di script di terze parti per determinare cosa puoi fare per risolvere i problemi di prestazioni che potrebbero causare sul tuo sito web.

Evitare attività lunghe

Un modo per ridurre i lunghi ritardi di input è evitare attività lunghe. Quando il lavoro del thread principale è eccessivo che blocca il thread principale durante le interazioni, questo si aggiunge al ritardo dell'input prima che le attività lunghe abbiano avuto la possibilità di essere completate.

Una visualizzazione di quanto tempo le attività estendono il ritardo di input. Nella parte superiore, un'interazione si verifica poco dopo l'esecuzione di una singola attività lunga, causando un ritardo significativo dell'input e facendo sì che i callback eventi vengano eseguiti molto più tardi del previsto. In fondo, un'interazione si verifica all'incirca nello stesso momento, ma l'attività lunga viene suddivisa in diverse attività più piccole dando origine, consentendo l'esecuzione dei callback evento dell'interazione molto prima.
Visualizzazione di cosa succede alle interazioni quando le attività sono troppo lunghe e il browser non risponde abbastanza rapidamente alle interazioni, rispetto a quando le attività più lunghe vengono suddivise in attività più piccole.

Oltre a ridurre al minimo la quantità di lavoro da svolgere in un'attività (e dovresti sempre cercare di svolgere il meno possibile il lavoro nel thread principale), puoi migliorare la reattività all'input utente suddividendo attività lunghe.

Fai attenzione alla sovrapposizione delle interazioni

Una parte particolarmente impegnativa dell'ottimizzazione dell'INP può essere la presenza di interazioni che si sovrappongono. Sovrapposizione di interazioni significa che, dopo aver interagito con un elemento, effettui un'altra interazione con la pagina prima che l'interazione iniziale abbia avuto la possibilità di visualizzare il frame successivo.

Una rappresentazione del momento in cui le attività possono sovrapporsi per produrre lunghi ritardi di input. In questa rappresentazione, un'interazione di clic si sovrappone a un'interazione keydown per aumentare il ritardo di input per l'interazione keydown.
Una visualizzazione di due interazioni simultanee nel profiler delle prestazioni nei DevTools di Chrome. Il lavoro di rendering nell'interazione con il clic iniziale causa un ritardo di input per la successiva interazione con la tastiera.

Le origini della sovrapposizione delle interazioni possono essere semplici come gli utenti che effettuano molte interazioni in un breve periodo di tempo. Questo può accadere quando gli utenti digitano nei campi del modulo e possono verificarsi molte interazioni da tastiera in un periodo di tempo molto breve. Se il lavoro su un evento chiave è particolarmente costoso, come nel caso comune dei campi di completamento automatico in cui le richieste di rete vengono effettuate in un backend, hai due opzioni:

  • Valuta la possibilità di debouncing gli input per limitare il numero di volte in cui un callback di evento viene eseguito in un determinato periodo di tempo.
  • Utilizza AbortController per annullare le richieste fetch in uscita in modo che il thread principale non diventi congestionato per la gestione dei callback fetch. Nota: la proprietà signal di un'istanza AbortController può essere utilizzata anche per interrompere gli eventi.

Un'altra causa di un maggiore ritardo dell'input dovuto a interazioni sovrapposte può essere un'animazione costosa. In particolare, le animazioni in JavaScript possono attivare molte chiamate requestAnimationFrame, che potrebbero interferire con le interazioni degli utenti. Per ovviare a questo problema, utilizza, quando possibile, le animazioni CSS per evitare di inserire in coda frame di animazione potenzialmente costosi, ma in questo caso assicurati di evitare le animazioni non composte, in modo che le animazioni vengano eseguite principalmente sui thread della GPU e del compositore e non sul thread principale.

Conclusione

È possibile che i ritardi nell'inserimento non rappresentino la maggior parte del tempo necessario per l'esecuzione delle interazioni, ma è importante capire che ogni parte di un'interazione richiede un tempo che puoi ridurre. Se stai osservando un lungo ritardo di input, hai la possibilità di ridurlo. Evitare callback ricorrenti del timer, spezzare attività lunghe ed essere consapevoli di una potenziale sovrapposizione di interazioni può aiutarti a ridurre il ritardo di input, determinando un'interattività più rapida per gli utenti del tuo sito web.

Immagine hero di Unsplash, di Erik Mclean.