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 complicate, con tutti i tipi di attività che si verificano nel browser per guidarle. Ciò che hanno in comune, però, è che subiscono un ritardo di input prima che inizino a essere eseguite le relative callback degli eventi. 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 siano più veloci.

Che cos'è il ritardo input?

Il ritardo di input è il periodo di tempo che inizia quando l'utente interagisce per la prima volta con una pagina, ad esempio toccando uno schermo, facendo clic con un mouse o premendo un tasto, fino a quando iniziano a essere eseguite le 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 disegno al tratto di un cursore del mouse con una stella dietro, che indica l'inizio di un'interazione. A destra è presente il disegno al tratto di una ruota dentata, che indica quando iniziano a essere eseguiti i gestori di eventi per un'interazione. Lo spazio intermedio è indicato come ritardo di input con una parentesi graffa.
Il meccanismo alla base del ritardo input. Quando un input viene ricevuto dal sistema operativo, deve essere passato al browser prima dell'inizio dell'interazione. Questa operazione richiede un determinato periodo di tempo, che può essere aumentato 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 percepibile e ci sono altre cose che accadono nella pagina stessa che possono rendere i ritardi di input abbastanza lunghi da causare problemi.

Come considerare il ritardo di input

In generale, devi fare in modo che ogni parte 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 di input è solo una parte del raggiungimento di questa soglia.

Di conseguenza, dovrai 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 riscontri lunghi ritardi di input.

Evita timer ricorrenti che attivano un lavoro eccessivo nel thread principale

In JavaScript esistono due funzioni timer di uso comune che possono contribuire al ritardo di input: setTimeout e setInterval. La differenza tra i due è che setTimeout pianifica l'esecuzione di un callback dopo un periodo di tempo specificato. setInterval, d'altra parte, pianifica una richiamata da eseguire ogni n millisecondi per sempre o finché il timer non viene interrotto con clearInterval.

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

Inoltre, setTimeout può essere eseguito in un ciclo o in modo ricorsivo, dove si comporta più come setInterval, anche se è preferibile non programmare l'iterazione successiva finché quella precedente non è completata. Anche se ciò significa che il ciclo cederà il controllo al thread principale ogni volta che viene chiamato setTimeout, devi assicurarti che il callback non finisca per svolgere un lavoro eccessivo.

setInterval esegue un callback a intervalli regolari ed è quindi 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 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 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 di clic. Tuttavia, il timer estende il ritardo di input, facendo sì che i callback degli eventi dell'interazione vengano eseguiti più tardi del normale.
Un timer registrato da una precedente chiamata setInterval che contribuisce al ritardo di input, come illustrato nel pannello Prestazioni di Chrome DevTools. Il ritardo di input aggiunto fa sì che i callback degli eventi per l'interazione vengano eseguiti in un secondo momento rispetto a quanto sarebbe possibile.

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 ridurre al minimo il lavoro. 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 si può 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 hai un lavoro eccessivo del thread principale che lo blocca durante le interazioni, questo si aggiunge al ritardo dell'input 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 significativo nell'input che fa sì che i callback degli eventi vengano eseguiti molto più tardi del dovuto. In basso, un'interazione si verifica all'incirca nello stesso momento, ma l'attività lunga viene suddivisa in diverse attività più piccole tramite la cessione, 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 da svolgere 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.

Fare attenzione alla sovrapposizione delle interazioni

Una parte particolarmente impegnativa dell'ottimizzazione dell'INP può essere la presenza di interazioni che si sovrappongono. La sovrapposizione delle interazioni si verifica quando, dopo aver interagito con un elemento, interagisci di nuovo 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 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 Chrome DevTools. Il lavoro di rendering nell'interazione iniziale con il clic causa un ritardo di input per l'interazione successiva con la tastiera.

Le fonti di sovrapposizione delle interazioni possono essere semplici come gli utenti che effettuano molte interazioni in un breve periodo di tempo. Ciò può verificarsi quando gli utenti digitano nei campi del modulo, dove possono verificarsi molte interazioni con la tastiera in un periodo di tempo molto breve. Se il lavoro su un evento chiave è particolarmente costoso, ad esempio nel caso comune dei campi di completamento automatico in cui vengono effettuate richieste di rete a un backend, hai a disposizione due opzioni:

  • Valuta la possibilità di eseguire il debouncing degli input per limitare il numero di volte in cui viene eseguito un callback di evento in un determinato periodo di tempo.
  • Utilizza AbortController per annullare le richieste fetch in uscita in modo che il thread principale non venga sovraccaricato dalla 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 possono essere le animazioni costose. In particolare, le animazioni in JavaScript possono attivare molte chiamate requestAnimationFrame, che possono ostacolare le interazioni degli utenti. Per ovviare a questo problema, utilizza le animazioni CSS quando possibile per evitare di mettere in coda i 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 compositor e non sul thread principale.

Conclusione

Sebbene 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 una quantità di tempo che puoi ridurre. Se osservi un ritardo di input prolungato, puoi ridurlo. Evitare i callback del timer ricorrenti, suddividere le attività lunghe ed essere consapevoli del potenziale sovrapposizione delle interazioni può aiutarti a ridurre il ritardo di input, con conseguente interattività più rapida per gli utenti del tuo sito web.

Immagine promozionale di Unsplash, di Erik Mclean.