Scopri cos'è il ritardo dell'input e impara tecniche per ridurlo e favorire un'interattività più rapida.
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 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.
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.
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.
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 richiestefetch
in uscita in modo che il thread principale non diventi congestionato per la gestione dei callbackfetch
. Nota: la proprietàsignal
di un'istanzaAbortController
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.