Ottimizza ritardo input

Scopri che cos'è il ritardo di input e impara le tecniche per ridurlo e velocizzare l'interattività.

Jeremy Wagner

Le interazioni sul web sono situazioni complesse, con qualsiasi tipo di attività che si verifica nel browser per favorire le interazioni. Ciò che hanno in comune, però, è che presentano un ritardo di input prima che i relativi callback eventi inizino a essere eseguiti. In questa guida scoprirai che 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 un tocco sullo schermo, un clic con il mouse o la pressione di un tasto, fino al momento in cui iniziano a essere eseguiti i richiami di eventi per l'interazione. Ogni interazione inizia con un certo ritardo di input.

Una visualizzazione semplificata del ritardo di input. A sinistra, è presente un'illustrazione in linea di un cursore del mouse con una stella dietro, che indica l'inizio di un'interazione. A destra è presente la linea di un ingranaggio, che indica quando iniziano a essere eseguiti i gestori degli eventi per un'interazione. Lo spazio intermedio è indicato come ritardo di inserimento con una parentesi graffa.
I meccanismi del ritardo di input. Quando un input viene ricevuto dal sistema operativo, deve essere passato al browser prima dell'inizio dell'interazione. Questa operazione richiede un certo tempo e può essere aumentata dal lavoro del thread principale esistente.

Una parte del ritardo di input è inevitabile: il sistema operativo impiega sempre un po' di tempo per riconoscere un evento di input e trasmetterlo al browser. Tuttavia, questa parte del ritardo di input spesso non è nemmeno rilevabile e ci sono altri fattori che si verificano nella pagina stessa che possono rendere i ritardi di input sufficientemente 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 tuo sito web abbia le migliori probabilità di soddisfare la soglia "buona" della metrica Interaction to Next Paint (INP), indipendentemente dal dispositivo dell'utente. Mantenere il ritardo dell'input è solo una parte del raggiungimento di questa soglia.

Di conseguenza, ti consigliamo di puntare al ritardo di inserimento più breve possibile per soddisfare la soglia "buona" dell'INP. Tieni presente, però, 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, alcuni ritardi di input sono evitabili. Di seguito sono riportati alcuni aspetti da considerare se hai problemi con ritardi di inserimento lunghi.

Evita timer ricorrenti che avviano un lavoro eccessivo nel thread principale

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

setTimeout non è problematico in sé, 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 loop o in modo ricorsivo, in cui agisce in modo più simile a setInterval, ma preferibilmente non pianificando l'iterazione successiva fino al completamento di quella precedente. Sebbene ciò significhi che il loop cederà il controllo al thread principale ogni volta che viene chiamato setTimeout, devi assicurarti che il relativo callback non finisca per eseguire un lavoro eccessivo.

setInterval esegue un callback a un intervallo e, di conseguenza, è 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 intralciare un'interazione da parte dell'utente, la natura ricorrente di setInterval rende molto più probabile che intuisca 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 appena prima che un utente avvii un'interazione con un clic. Tuttavia, il timer prolunga il ritardo di inserimento, causando l'esecuzione dei richiami di eventi di interazione più tardi rispetto a quanto avverrebbe in altro modo.
Un timer registrato da una chiamata setInterval precedente che contribuisce al ritardo dell'input, come illustrato nel riquadro delle prestazioni di Chrome DevTools. Il ritardo di inserimento aggiunto fa sì che i richiami di eventi per l'interazione vengano eseguiti più tardi di quanto potrebbero.

Se i timer si verificano nel codice proprietario, hai il controllo su di essi. Valuta se ne hai bisogno o fai del tuo meglio per ridurne al minimo il lavoro. Tuttavia, i timer negli script di terze parti sono un'altra storia. Spesso non hai il controllo sul funzionamento di 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 tal caso, stabilire un contatto con un fornitore di script di terze parti per determinare cosa fare per risolvere problemi di prestazioni che potrebbero causare sul tuo sito web.

Evita attività lunghe

Un modo per mitigare i lunghi ritardi degli input è evitare attività lunghe. Se il thread principale è sottoposto a un carico eccessivo che lo blocca durante le interazioni, il ritardo di input aumenterà prima che le attività lunghe abbiano il tempo di terminare.

Una visualizzazione del tempo per cui le attività prolungano il ritardo di inserimento. In alto, un'interazione si verifica poco dopo l'esecuzione di una singola attività lunga, causando un ritardo di input significativo che causa l'esecuzione dei callback di eventi molto più tardi del dovuto. In sostanza, un'interazione si verifica all'incirca nello stesso momento, ma l'attività lunga viene suddivisa in più attività più piccole mediante il rendimento, consentendo l'esecuzione molto più rapida dei callback degli eventi di interazione.
Una visualizzazione di ciò che accade alle interazioni quando le attività sono troppo lunghe e il browser non può rispondere abbastanza rapidamente alle interazioni, rispetto a quando le attività più lunghe sono suddivise in attività più piccole.

Oltre a ridurre al minimo la quantità di lavoro in un'attività, e dovresti sempre cercare di eseguire il minor lavoro possibile nel thread principale, puoi migliorare la reattività all'input dell'utente suddividendo le attività lunghe.

Fai attenzione alla sovrapposizione delle interazioni

Un aspetto particolarmente impegnativo dell'ottimizzazione dell'INP può essere la presenza di interazioni che si sovrappongono. Sovrapposizione interazione 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 di quando le attività possono sovrapporsi per produrre lunghi ritardi di input. In questa rappresentazione, un'interazione di clic si sovrappone a un'interazione di pressione del tasto per aumentare il ritardo di input per l'interazione di pressione del tasto.
Una visualizzazione di due interazioni simultanee nel profiler delle prestazioni in DevTools di Chrome. Il lavoro di rendering nell'interazione con il clic iniziale causa un ritardo di input per l'interazione successiva 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ò verificarsi quando gli utenti digitano nei campi del modulo, dove molte interazioni da tastiera possono avvenire 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 inviate a un backend, hai un paio di opzioni:

  • Valuta la possibilità di eliminare il ritardo degli input per limitare il numero di volte in cui viene eseguito un callback evento in un determinato periodo di tempo.
  • Utilizza AbortController per annullare le richieste fetch in uscita in modo che il thread principale non si congestioni con 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 costose. In particolare, le animazioni in JavaScript possono attivare molte chiamate requestAnimationFrame, che potrebbero interferire con le interazioni degli utenti. Per evitare questo problema, quando possibile utilizza animazioni CSS per evitare di accodare fotogrammi di animazione potenzialmente costosi. 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

Sebbene i ritardi nell'input possano non rappresentare la maggior parte del tempo necessario per l'esecuzione delle interazioni, è importante capire che ogni parte di un'interazione richiede una quantità di tempo che puoi ridurre. Se noti un ritardo di input elevato, hai la possibilità di ridurlo. Evitare i richiami ricorrenti del timer, suddividere le attività lunghe ed essere consapevoli della potenziale sovrapposizione delle interazioni possono aiutarti a ridurre il ritardo di inserimento, con un conseguente aumento dell'interattività per gli utenti del tuo sito web.

Immagine hero da Unsplash, di Erik Mclean.