Cómo optimizar el retraso de entrada

Descubre qué es el retraso de entrada y aprende técnicas para reducirlo y lograr una interactividad más rápida.

Jeremy Wagner

Las interacciones en la web son cosas complicadas, y todo tipo de actividad que ocurre en el navegador para impulsarlas. Sin embargo, lo que todas tienen en común es que incurren en cierto retraso de entrada antes de que comiencen a ejecutarse sus devoluciones de llamada de eventos. En esta guía, aprenderás qué es el retraso de entrada y lo que puedes hacer para minimizarlo a fin de que las interacciones de tu sitio web se ejecuten más rápido.

¿Qué es un retraso de entrada?

El retraso de entrada es el período desde que el usuario interactúa por primera vez con una página (como presionar una pantalla, hacer clic con un mouse o presionar una tecla) hasta que comienzan a ejecutarse las devoluciones de llamada de eventos de la interacción. Cada interacción comienza con una cierta cantidad de retraso de entrada.

Es una visualización simplificada del retraso de entrada. A la izquierda, hay un arte lineal de un cursor de mouse con un brote de estrellas detrás, que indica el inicio de una interacción. A la derecha, hay un arte lineal de un engranaje, que indica cuándo comienzan a ejecutarse los controladores de eventos de una interacción. El espacio intermedio se indica como el retraso de entrada con una llave.
La mecánica del retraso de entrada. Cuando el sistema operativo recibe una entrada, esta debe pasarse al navegador antes de que comience la interacción. El proceso demora cierto tiempo y se puede aumentar con el trabajo del subproceso principal existente.

Parte de la demora de entrada es inevitable: siempre tarda cierto tiempo para que el sistema operativo reconozca un evento de entrada y lo transfiera al navegador. Sin embargo, esa parte de la demora de entrada a menudo ni siquiera es perceptible, y hay otras cosas que suceden en la propia página que pueden provocar demoras en las entradas lo suficientemente largas como para causar problemas.

Cómo analizar la demora de entrada

En términos generales, se recomienda que cada parte de una interacción sea lo más breve posible para que el sitio web tenga más probabilidades de cumplir con la métrica “Bueno” de la métrica Interacción a la siguiente pintura (INP). umbral, independientemente del dispositivo del usuario. Mantener bajo control la demora en las entradas es solo una parte para alcanzar ese umbral.

Por lo tanto, debes intentar que el retraso de entrada sea el más breve posible para cumplir con el requisito umbral. Sin embargo, debes tener en cuenta que no puedes esperar eliminar por completo los retrasos de entrada. Siempre y cuando evites un trabajo excesivo del subproceso principal mientras los usuarios intentan interactuar con la página, la demora en las entradas debería ser lo suficientemente baja para evitar problemas.

Cómo minimizar el retraso de entrada

Como se mencionó antes, es inevitable que se produzca algún retraso en la entrada, pero, por otro lado, sí se puede evitar cierto retraso de entrada. A continuación, se incluyen algunos aspectos que debes tener en cuenta si tienes problemas con demoras prolongadas en las entradas.

Evita los temporizadores recurrentes que inicien tareas excesivas en el subproceso principal.

Hay dos funciones de temporizador de uso general en JavaScript que pueden contribuir a la demora de entrada: setTimeout y setInterval. La diferencia entre ambos es que setTimeout programa una devolución de llamada para que se ejecute después de un tiempo especificado. setInterval, por otro lado, programa una devolución de llamada para que se ejecute cada n milisegundos de forma permanente o hasta que el temporizador se detenga con clearInterval.

setTimeout no es problemático en sí mismo; de hecho, puede ser útil para evitar tareas largas. Sin embargo, depende de cuándo ocurre el tiempo de espera y de si el usuario intenta interactuar con la página cuando se ejecuta la devolución de llamada de tiempo de espera.

Además, setTimeout se puede ejecutar en un bucle o de manera recurrente, donde actúa más como setInterval, aunque preferentemente no programa la siguiente iteración hasta que se complete la anterior. Si bien esto significa que el bucle cede al subproceso principal cada vez que se llama a setTimeout, debes asegurarte de que su devolución de llamada no realice un trabajo excesivo.

setInterval ejecuta una devolución de llamada en un intervalo y, por lo tanto, es mucho más probable que obstaculice las interacciones. Esto se debe a que, a diferencia de una única instancia de una llamada a setTimeout, que es una devolución de llamada única que puede interferir con una interacción del usuario, la naturaleza recurrente de setInterval hace que sea mucho más probable que se obstaculice una interacción, lo que aumenta el retraso de entrada de la interacción.

Captura de pantalla del generador de perfiles de rendimiento en las Herramientas para desarrolladores de Chrome que muestra la demora en las entradas. Una tarea activada por una función de temporizador ocurre justo antes de que un usuario inicie una interacción de clic. Sin embargo, el temporizador extiende la demora de entrada, lo que hace que las devoluciones de llamada del evento de la interacción se ejecuten más tarde de lo que se haría de otro modo.
Un temporizador registrado por una llamada setInterval anterior que contribuye al retraso de entrada, como se muestra en el panel de rendimiento de las Herramientas para desarrolladores de Chrome. El retraso de entrada agregado hace que las devoluciones de llamada de eventos para la interacción se ejecuten más tarde de lo que podrían hacerlo.

Si hay temporizadores en el código propio, entonces tienes el control sobre ellos. Evalúa si los necesitas o haz todo lo posible para reducir el trabajo en ellos tanto como sea posible. Sin embargo, los temporizadores en los guiones de terceros son una historia diferente. A menudo, no tienes control sobre lo que hace una secuencia de comandos de terceros, y solucionar problemas de rendimiento en un código de terceros suele implicar trabajar con las partes interesadas para determinar si es necesaria una secuencia de comandos de terceros determinada y, de ser así, establecer contacto con un proveedor de secuencias de comandos de terceros para determinar qué se puede hacer para solucionar los problemas de rendimiento que pueden causar en tu sitio web.

Evita las tareas largas

Una forma de mitigar los retrasos prolongados en las entradas es evitar las tareas largas. Cuando tengas un trabajo excesivo del subproceso principal que lo bloquee durante las interacciones, se agregará la demora de entrada antes de que las tareas largas hayan tenido la oportunidad de finalizar.

Es una visualización de cuánto tiempo extienden las tareas el retraso de entrada. En la parte superior, una interacción ocurre poco después de que se ejecuta una sola tarea larga, lo que provoca un retraso importante de la entrada que hace que las devoluciones de llamada de eventos se ejecuten mucho más tarde de lo que deberían. En la parte inferior, una interacción ocurre más o menos al mismo tiempo, pero la tarea larga se divide en varias más pequeñas mediante el rendimiento, lo que permite que las devoluciones de llamada de eventos de la interacción se ejecuten mucho antes.
Visualización de lo que sucede con las interacciones cuando las tareas son demasiado largas y el navegador no puede responder con la rapidez suficiente a las interacciones, en comparación con cuando las tareas más largas se dividen en tareas más pequeñas.

Además de minimizar la cantidad de trabajo que realizas en una tarea (y siempre debes esforzarte por hacer el menor trabajo posible en el subproceso principal), puedes mejorar la capacidad de respuesta a las entradas del usuario dividiendo las tareas largas.

Ten en cuenta las superposiciones de interacciones

Una parte particularmente desafiante de la optimización del INP puede ser si tienes interacciones que se superponen. La superposición de interacciones significa que, después de interactuar con un elemento, realizas otra interacción con la página antes de que la interacción inicial haya tenido la oportunidad de renderizar el siguiente fotograma.

Una descripción de cuándo se pueden superponer las tareas para producir largos retrasos de entrada. En esta representación, una interacción de clic se superpone con una interacción de keydown para aumentar la demora de entrada de la interacción de keydown.
Visualización de dos interacciones simultáneas en el generador de perfiles de rendimiento de las Herramientas para desarrolladores de Chrome. El trabajo de renderización en la interacción de clic inicial genera un retraso de entrada para la siguiente interacción del teclado.

Las fuentes de interacción pueden ser tan simples como los usuarios que realizan muchas interacciones en un corto período de tiempo. Esto puede ocurrir cuando los usuarios escriben en campos de formulario, en los que muchas interacciones con el teclado pueden ocurrir en un período muy corto. Si el trabajo en un evento clave es especialmente costoso, como en el caso común de los campos de autocompletado en los que las solicitudes de red se realizan a un backend, tienes un par de opciones:

  • Considera anular las entradas para limitar la cantidad de veces que se ejecuta la devolución de llamada de un evento durante un período determinado.
  • Usa AbortController para cancelar las solicitudes fetch salientes, de modo que el subproceso principal no se congestione con el control de las devoluciones de llamada fetch. Nota: La propiedad signal de una instancia de AbortController también se puede usar para anular eventos.

Otra fuente de mayor retraso de entrada debido a las interacciones superpuestas pueden ser las animaciones costosas. En particular, las animaciones en JavaScript pueden activar muchas llamadas a requestAnimationFrame, lo que puede impedir las interacciones del usuario. Para solucionar esto, usa animaciones de CSS siempre que sea posible para evitar poner en cola marcos de animación potencialmente costosos. Si lo haces, asegúrate de evitar las animaciones no compuestas para que las animaciones se ejecuten principalmente en la GPU y en los subprocesos del compositor y no en el subproceso principal.

Conclusión

Si bien es posible que los retrasos en las entradas no representen la mayor parte del tiempo que demoran en ejecutarse tus interacciones, es importante comprender que cada parte de una interacción requiere una cantidad de tiempo que puedes reducir. Si observas una larga demora de entrada, tienes la posibilidad de reducirla. Evitar las devoluciones de llamada recurrentes del temporizador, dividir las tareas largas y estar al tanto de la posible superposición de interacciones puede ayudarte a reducir la demora en las entradas, lo que lleva a una interactividad más rápida para los usuarios de tu sitio web.

Hero image de Unsplash, de Erik Mclean.