Ottimizza ritardo input

Scopri cos'è il ritardo di input e impara le tecniche per ridurlo e ottenere un'interattività più rapida.

Jeremy Wagner

Le interazioni sul web sono complesse e coinvolgono tutti i tipi di attività che si verificano nel browser per gestirle. Tuttavia, ciò che hanno in comune è che comportano un certo ritardo di input prima che i callback degli eventi inizino a essere eseguiti. In questa guida scoprirai cos'è il ritardo di input e cosa puoi fare per ridurlo al minimo in modo che le interazioni del tuo sito web vengano eseguite più velocemente.

Che cos'è il ritardo di input?

Il ritardo di input è il periodo di tempo che inizia dalla prima interazione dell'utente con una pagina, ad esempio il tocco su uno schermo, il clic con il mouse o la pressione di un tasto, fino all'inizio dell'esecuzione dei callback degli eventi per l'interazione. Ogni interazione inizia con un certo ritardo di input.

Una visualizzazione semplificata del ritardo di input. A sinistra, c'è un'illustrazione di un cursore del mouse con un'esplosione di stelle dietro, che indica l'inizio di un'interazione. A destra è presente l'illustrazione di un ingranaggio, che indica quando iniziano a essere eseguiti i gestori di eventi per un'interazione. Lo spazio tra i due è indicato come ritardo di input con una parentesi graffa.
I meccanismi alla base dell'Input Delay. Quando il sistema operativo riceve un input, questo deve essere passato al browser prima dell'inizio dell'interazione. Questa operazione richiede un certo tempo, che può essere aumentato dal lavoro esistente del thread principale.

Una parte del ritardo di 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 di input spesso non è nemmeno percepibile e ci sono altri fattori che si verificano nella pagina stessa che possono rendere i ritardi di input abbastanza lunghi da causare problemi.

Come considerare il ritardo di input

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

Di conseguenza, ti consigliamo di puntare al ritardo di input più breve possibile per soddisfare la soglia "buona" di INP. Tuttavia, tieni presente che non puoi aspettarti di eliminare completamente i ritardi di input. Se eviti 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 di input

Come detto in precedenza, un certo ritardo di input è inevitabile, ma d'altra parte, un certo ritardo di input è evitabile. Ecco alcuni aspetti da considerare se hai problemi con ritardi di input lunghi.

Evita timer ricorrenti che avviano un lavoro eccessivo nel thread principale

In JavaScript esistono due funzioni di timer di uso comune che possono contribuire al ritardo dell'input: setTimeout e setInterval. La differenza tra i due è che setTimeout pianifica l'esecuzione di un callback dopo un tempo specificato. setInterval, invece, pianifica l'esecuzione di un callback ogni n millisecondi in modo perpetuo o fino a quando il timer non viene interrotto con clearInterval.

setTimeout non è di per sé un problema, 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 del timeout.

Inoltre, setTimeout può essere eseguito in un loop o in modo ricorsivo, dove agisce più come setInterval, anche se preferibilmente non pianifica l'iterazione successiva fino al completamento di quella precedente. Anche se questo significa che il loop cederà il controllo al thread principale ogni volta che viene chiamato setTimeout, devi assicurarti che il suo callback non finisca per eseguire un lavoro eccessivo.

setInterval esegue un callback a intervalli, pertanto è molto più probabile che ostacoli le interazioni. Questo perché, a differenza di una singola istanza di una chiamata setTimeout, che è un callback una tantum che potrebbe ostacolare un'interazione dell'utente, la natura ricorrente di setInterval rende molto più probabile che ostacoli un'interazione, aumentando così il ritardo di input dell'interazione.

Uno screenshot del profiler del rendimento in Chrome DevTools che mostra il ritardo di input. Un'attività attivata da una funzione timer si verifica appena prima che un utente avvii un'interazione di clic. Tuttavia, il timer estende il ritardo di input, causando l'esecuzione dei callback degli eventi dell'interazione più tardi di quanto farebbero altrimenti.
Un timer registrato da una chiamata setInterval precedente che contribuisce al ritardo dell'input, come mostrato nel riquadro Prestazioni di Chrome DevTools. Il ritardo di input aggiunto fa sì che i callback degli eventi per l'interazione vengano eseguiti più tardi di quanto potrebbero altrimenti.

Se i timer si verificano nel codice proprietario, hai il controllo su di essi. Valuta se sono necessari o fai del tuo meglio per ridurre il più possibile il lavoro al loro interno. Tuttavia, i timer negli script di terze parti sono un'altra storia. 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 la collaborazione con gli stakeholder per determinare se un determinato script di terze parti è necessario e, in caso affermativo, stabilire un contatto con un fornitore di script di terze parti per determinare cosa è possibile fare per risolvere i problemi di prestazioni che potrebbero causare sul tuo sito web.

Evita attività lunghe

Un modo per ridurre i ritardi di input lunghi è evitare attività lunghe. Se il lavoro del thread principale è eccessivo e blocca il thread principale durante le interazioni, il ritardo dell'input aumenterà prima che le attività lunghe abbiano avuto la possibilità di terminare.

Una visualizzazione di quanto le attività lunghe estendono il ritardo di input. In alto, un'interazione si verifica poco dopo l'esecuzione di una singola attività lunga, causando un ritardo di input significativo che fa sì che i callback degli eventi vengano eseguiti molto più tardi del previsto. In basso, un'interazione si verifica all'incirca nello stesso momento, ma l'attività lunga viene suddivisa in diverse attività più piccole tramite l'interruzione, consentendo l'esecuzione dei callback degli eventi dell'interazione molto prima.
Una visualizzazione di ciò che accade alle interazioni quando le attività sono troppo lunghe e il browser non riesce a rispondere 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 svolto in un'attività, e dovresti sempre cercare di svolgere il minor lavoro possibile sul thread principale, puoi migliorare la reattività all'input dell'utente suddividendo le attività lunghe.

Fai attenzione alla sovrapposizione delle interazioni

Una parte particolarmente difficile dell'ottimizzazione di INP può essere la presenza di interazioni che si sovrappongono. La sovrapposizione delle interazioni si verifica quando, dopo aver interagito con un elemento, esegui un'altra interazione con la pagina prima che l'interazione iniziale abbia avuto la possibilità di eseguire il rendering del frame successivo.

Una rappresentazione di quando 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 del rendimento in 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 fonti di sovrapposizione delle interazioni possono essere semplici, ad esempio gli utenti che effettuano molte interazioni in un breve periodo di tempo. Questo può accadere quando gli utenti digitano nei campi di un modulo, dove possono verificarsi molte interazioni con la tastiera in un periodo di tempo molto breve. Se il lavoro su un evento chiave è particolarmente oneroso, come nel caso comune dei campi di completamento automatico in cui vengono effettuate richieste di rete a un backend, hai un paio di opzioni:

  • Valuta la possibilità di eliminare il rimbalzo degli 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 si congestioni durante la gestione dei callback fetch. Nota: la proprietà signal di un'istanza AbortController può essere utilizzata anche per interrompere gli eventi.

Un'altra fonte di aumento del ritardo di input dovuto a interazioni sovrapposte può essere rappresentata da animazioni dispendiose. In particolare, le animazioni in JavaScript possono attivare molte chiamate requestAnimationFrame, che potrebbero ostacolare le interazioni degli utenti. Per ovviare a questo problema, utilizza le animazioni CSS ogni volta che è possibile per evitare di mettere in coda frame di animazione potenzialmente costosi. Tuttavia, se lo fai, assicurati di evitare le animazioni non composite in modo che le animazioni vengano eseguite principalmente sui thread della GPU e del compositore, non sul thread principale.

Conclusione

Anche se i ritardi di input potrebbero non rappresentare la maggior parte del tempo necessario per l'esecuzione delle interazioni, è importante capire che ogni parte di un'interazione richiede un periodo di tempo che puoi ridurre. Se osservi un ritardo di input lungo, hai l'opportunità di ridurlo. Evitare i callback dei timer ricorrenti, suddividere le attività lunghe ed essere consapevoli della potenziale sovrapposizione delle interazioni può aiutarti a ridurre il ritardo di input, con conseguente interattività più rapida per gli utenti del tuo sito web.