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 situazioni complesse, con qualsiasi tipo di attività che si verifica nel browser per favorire le interazioni. Tutti hanno in comune, tuttavia, che subiscono un ritardo di input prima che inizi l'esecuzione dei callback eventi. In questa guida scoprirai cos'è il ritardo nell'input e cosa puoi fare per ridurlo al minimo in modo che le interazioni con il tuo sito web siano più veloci.

Che cos'è il ritardo di input?

Il ritardo dell'inserimento è il periodo di tempo che intercorre tra la prima interazione dell'utente 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 dell'evento che richiama l'interazione. Ogni interazione inizia con un certo ritardo di input.

Una visualizzazione semplificata del ritardo di input. Sulla sinistra, è visibile il disegno di un cursore del mouse con un'esplosione di stelle dietro, che indica l'inizio di un'interazione. Sulla destra, il disegno di un ingranaggio, che indica il momento in cui iniziano a essere eseguiti i gestori di eventi di un'interazione. Lo spazio intermedio è indicato come ritardo di input con una parentesi graffa.
. I meccanismi alla base del ritardo dell'input. Quando un input viene ricevuto dal sistema operativo, deve essere trasmesso al browser prima che inizi l'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 passarlo al browser. Tuttavia, quella parte del ritardo di input è spesso non percettibile, e ci sono altre cose che si verificano nella pagina stessa che possono rendere i ritardi di input abbastanza lunghi da causare problemi.

Come valutare il ritardo dell'input

In generale, è consigliabile che ogni parte di un'interazione sia la più breve possibile, in modo che il sito web abbia maggiori probabilità di soddisfare il valore "Buono" della metrica Interaction to Next Paint (INP). minima, indipendentemente dal dispositivo dell'utente. Mantenere il ritardo dell'input è solo una parte del raggiungimento di questa soglia.

Di conseguenza, vorrai puntare al ritardo di input più breve possibile per soddisfare il valore "buono" di INP soglia. Tieni presente, tuttavia, che non puoi aspettarti di eliminare del tutto i ritardi di input. Se stai evitando un lavoro eccessivo del thread principale durante il tentativo degli utenti 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 difficoltà con lunghi ritardi di input.

Evita timer ricorrenti che avviano un lavoro eccessivo del thread principale

Esistono due funzioni timer di uso comune in JavaScript 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 orario specificato. setInterval, invece, pianifica un callback da eseguire ogni n millisecondi a tempo indeterminato o fino all'arresto del timer con clearInterval.

setTimeout non è un problema di per sé: anzi, può essere utile per evitare attività lunghe. Tuttavia, dipende 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 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. Anche se questo significa che il loop restituirà il thread principale ogni volta che viene chiamato setTimeout, devi assicurarti che il suo callback non svolga un lavoro eccessivo.

setInterval esegue un callback in base a un intervallo e ha quindi maggiori probabilità di ostacolare 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 poco prima che un utente avvii un'interazione con un clic. Tuttavia, il timer estende il ritardo di input, causando l'esecuzione dei callback di eventi dell'interazione più tardi del previsto.
. Un timer registrato da una chiamata setInterval precedente che contribuisce al ritardo di input, come illustrato nel riquadro delle prestazioni di Chrome DevTools. Il ritardo di input aggiuntivo fa sì che il callback dell'evento per l'interazione venga eseguito più tardi di quanto potrebbe.

Se i timer si verificano con codice proprietario, puoi controllarli. 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 completamente diversi. 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.

Evitare attività lunghe

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

Una visualizzazione di quanto le attività prolungano 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 causa l'esecuzione dei callback di eventi molto più tardi del dovuto. In basso, un'interazione avviene più o meno contemporaneamente, ma l'attività lunga viene suddivisa in diverse interazioni più piccole per cedere, consentendo l'esecuzione dei callback di eventi dell'interazione molto prima.
. Una visualizzazione di ciò che accade alle interazioni quando le attività sono troppo lunghe e il browser non è in grado di 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 svolto in un'attività (e dovresti sempre cercare di svolgere il minor lavoro possibile sul thread principale), puoi migliorare la reattività all'input degli utenti suddividendo attività lunghe.

Fai attenzione alla sovrapposizione delle interazioni

Un aspetto particolarmente impegnativo dell'ottimizzazione di INP può essere rappresentato dalla 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 con un clic si sovrappone a un'interazione con keydown per aumentare il ritardo di input dell'interazione con il keydown.
. Una visualizzazione di due interazioni simultanee nel profiler delle prestazioni in DevTools di Chrome. Il lavoro di rendering nell'interazione iniziale del clic causa un ritardo di input per la successiva interazione da 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 debouncing 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 diventi congestionato durante 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 aumento del ritardo nell'input dovuto a interazioni sovrapposte può essere rappresentata da animazioni costose. In particolare, le animazioni in JavaScript potrebbero attivare molte chiamate a requestAnimationFrame, che potrebbero ostacolare 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 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 comprendere che ogni parte di un'interazione richiede una quantità di tempo che puoi ridurre. Se stai notando un ritardo di input lungo, hai la possibilità di ridurlo. Evitare callback ricorrenti del timer, suddividere le attività lunghe e conoscere la potenziale sovrapposizione di interazioni può aiutarti a ridurre il ritardo di input, velocizzando l'interattività per gli utenti del tuo sito web.

Immagine hero da Unsplash, di Erik Mclean.