Descubre qué es el retraso de entrada y aprende técnicas para reducirlo y lograr una interactividad más rápida.
Las interacciones en la Web son complicadas, ya que se produce todo tipo de actividad en el navegador para impulsarlas. Sin embargo, lo que todos tienen en común es que incurren en una demora de entrada antes de que comiencen a ejecutarse sus devoluciones de llamada de eventos. En esta guía, aprenderás qué es la demora de entrada y qué puedes hacer para minimizarla y que las interacciones de tu sitio web se ejecuten más rápido.
¿Qué es el retraso de entrada?
El retraso de entrada es el período que comienza desde el momento en que el usuario interactúa por primera vez con una página (por ejemplo, presiona una pantalla, hace clic con el mouse o presiona una tecla) hasta que comienzan a ejecutarse las devoluciones de llamada de eventos para la interacción. Cada interacción comienza con una cierta cantidad de retraso de entrada.
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 se nota, y hay otros eventos que ocurren en la página que pueden hacer que las demoras de entrada sean lo suficientemente largas como para causar problemas.
Cómo pensar en el retraso de entrada
En términos generales, debes mantener cada parte de una interacción lo más breve posible para que tu sitio web tenga la mejor oportunidad de cumplir con el umbral "bueno" de la métrica Interaction to Next Paint (INP), independientemente del dispositivo del usuario. Mantener el retraso de entrada bajo control es solo una parte de cumplir con ese umbral.
Por lo tanto, es recomendable que tu objetivo sea la demora de entrada más corta posible para alcanzar el umbral de “bueno” de INP. Sin embargo, debes tener en cuenta que no puedes esperar eliminar por completo los retrasos de entrada. Siempre que evites el trabajo excesivo del subproceso principal mientras los usuarios intentan interactuar con tu página, la demora de entrada debe ser lo suficientemente baja como para evitar problemas.
Cómo minimizar el retraso de entrada
Como se mencionó anteriormente, algunos retrasos en las entradas son inevitables, pero, por el contrario, sí se pueden evitar algunos. Estas son algunas cuestiones que debes tener en cuenta si tienes problemas con demoras prolongadas en las entradas.
Evita los temporizadores recurrentes que inician un trabajo excesivo del subproceso principal
Existen 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 indefinida o hasta que se detenga el temporizador 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 se produce 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 forma recursiva, en la que actúa más como setInterval
, aunque lo más recomendable es no programar la siguiente iteración hasta que se complete la anterior. Si bien esto significa que el bucle cederá al subproceso principal cada vez que se llame a setTimeout
, debes asegurarte de que su devolución de llamada no termine haciendo 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 sola instancia de una llamada a setTimeout
, que es una devolución de llamada única que puede interferir en una interacción del usuario, la naturaleza recurrente de setInterval
hace que sea mucho más probable que interfiera en una interacción, lo que aumenta el retraso de entrada de la interacción.
Si los temporizadores se producen en el código propio, tienes control sobre ellos. Evalúa si los necesitas o haz lo posible por 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 los problemas de rendimiento en el código de terceros suele implicar trabajar con las partes interesadas para determinar si una secuencia de comandos de terceros es necesaria 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 las demoras de entrada prolongadas 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.
Además de minimizar la cantidad de trabajo que realizas en una tarea (y siempre debes esforzarte por hacer la menor cantidad de trabajo posible en el subproceso principal), puedes mejorar la capacidad de respuesta a las entradas del usuario dividiendo las tareas largas.
Ten en cuenta la superposición 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 tenga la oportunidad de renderizar el siguiente fotograma.
Las fuentes de superposición de interacciones pueden ser tan simples como que los usuarios realicen muchas interacciones en un período breve. Esto puede ocurrir cuando los usuarios escriben en campos de formulario, en los que pueden ocurrir muchas interacciones con el teclado en un período muy corto. Si el trabajo en un evento de tecla es especialmente costoso, como en el caso común de los campos de autocompletado en los que se realizan solicitudes de red a un backend, tienes dos opciones:
- Considera anular las entradas para limitar la cantidad de veces que se ejecuta la devolución de llamada de un evento en un período determinado.
- Usa
AbortController
para cancelar las solicitudes salientes defetch
, de modo que el subproceso principal no se congestione cuando controle las devoluciones de llamada defetch
. Nota: La propiedadsignal
de una instancia deAbortController
también se puede usar para abortar 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 requestAnimationFrame
, lo que puede interferir en las interacciones del usuario. Para evitar esto, usa animaciones de CSS siempre que sea posible para evitar poner en cola fotogramas de animación potencialmente costosos. Sin embargo, si lo haces, asegúrate de evitar las animaciones no compuestas para que las animaciones se ejecuten principalmente en los subprocesos de la GPU y del compositor, y no en el subproceso principal.
Conclusión
Si bien es posible que las demoras de entrada no representen la mayor parte del tiempo que tardan en ejecutarse tus interacciones, es importante comprender que cada parte de una interacción ocupa una cantidad de tiempo que puedes reducir. Si observas un retraso de entrada largo, tienes la oportunidad de reducirlo. 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 de entrada, lo que genera una interactividad más rápida para los usuarios de tu sitio web.
Hero image de Unsplash, de Erik Mclean.