INP Input Delay: causas, diagnóstico y soluciones

Problemas de Interaction to Next Paint (INP) causados por el input delay

Esta página forma parte de nuestra serie sobre Interaction to Next Paint (INP). INP mide el tiempo total desde una interacción del usuario hasta la siguiente actualización visual. El input delay es la primera de las tres fases que componen el INP, seguida del processing time y el presentation delay. Si eres nuevo en INP, lee primero nuestra guía sobre cómo identificar y solucionar problemas de INP.

En este artículo nos centramos en el input delay: qué lo causa, cómo afecta al Interaction to Next Paint y cómo minimizar los input delays para mejorar tus puntuaciones de INP.

CONSEJO INP: la mayoría de las veces el input delay ocurre durante las primeras etapas de carga de la página web. Es cuando el navegador está más ocupado analizando y ejecutando scripts.

¿Qué es el input delay?

El input delay se refiere al tiempo que tarda el navegador en comenzar a procesar un callback de evento después de que un usuario interactúa con una página web (por ejemplo, al hacer clic en un botón o presionar una tecla). Aunque siempre existe algo de input delay (incluso los navegadores necesitan tiempo para programar los callbacks), un input delay excesivo ocurre cuando el navegador está ocupado realizando otras tareas programadas y no puede programar inmediatamente los callbacks solicitados por la interacción.

Durante el input delay, el usuario ya ha realizado su acción (clic, toque o pulsación de tecla) pero el navegador aún no ha comenzado a ejecutar el manejador de eventos asociado. El usuario no ve ninguna respuesta. Esto es diferente del processing time, donde el manejador de eventos se está ejecutando activamente, y del presentation delay, donde el navegador está renderizando la actualización visual. El input delay es tiempo de espera puro causado por un hilo principal congestionado.

Input delay y el INP

El Interaction to Next Paint (INP) se puede dividir en 3 subpartes: "Input Delay", "Processing Time" y "Presentation Delay".

Podrás notar que existen similitudes de nomenclatura entre el Input Delay y la antigua Core Web Vital "First Input Delay" (FID). Interaction to Next Paint reemplazó a FID como Core Web Vital en marzo de 2024. First Input Delay medía solo el tiempo entre la primera interacción y el callback del evento. Aunque FID ha sido retirado, el input delay sigue desempeñando un papel importante en la mejora de la capacidad de respuesta web porque el input delay está en la base de cada medición de Interaction to Next Paint.

La importancia del input delay

Dado que muchos desarrolladores piensan en mejorar el INP en términos de optimizar las funciones de callback (optimizar el processing time), el input delay a menudo se pasa por alto. Es cierto que el input delay no es generalmente la parte más grande del INP, pero si optimizamos el input delay, a menudo optimizaremos todas las interacciones de INP a la vez. Reducir el input delay mejora cada interacción en la página, no solo la peor.

En CoreDash recopilamos millones de datos de Core Web Vitals cada hora. Según esos datos, el input delay representa aproximadamente el 18% del Interaction to Next Paint. Aunque eso no es tanto como el presentation delay o el processing time, sigue siendo una porción significativa. Más importante aún, el input delay es a menudo la fase más fácil de reducir porque la causa raíz casi siempre es "demasiado JavaScript ejecutándose en el momento equivocado."

Causas del input delay

El input delay ocurre cuando el hilo principal está ocupado ejecutando otras tareas. Estas tareas pueden originarse en:

1. Tareas tempranas. Los scripts normales, diferidos y asíncronos que se encolan tempranamente crearán tareas tempranas. Estas son la fuente más común de input delay porque se ejecutan durante la ventana crítica de inicio cuando los usuarios tienen más probabilidades de interactuar con la página.
2. Tareas programadas. Algunas tareas no se ejecutan al inicio de la carga de la página, sino que pueden programarse para después de que la página se haya cargado. Estas tareas también pueden interferir con el INP y causar un input delay. Por ejemplo, scripts que se ejecutan después del evento window.onload o scripts que se retrasan mediante los llamados plugins de optimización. Aprende más sobre cuándo usar async vs defer para JavaScript.
3. Tareas repetitivas. Tareas recurrentes mediante setInterval() que tardan relativamente mucho en ejecutarse y coinciden con el INP.
4. Callbacks superpuestos. Los callbacks superpuestos son una causa común de input delay. Múltiples callbacks programados muy cerca entre sí pueden crear una cola, retrasando el procesamiento de la siguiente interacción. Por ejemplo, un manejador de mouseover que se dispara justo antes de un manejador de click puede retrasar el procesamiento del clic por la duración de la tarea del mouseover.

Minimizar el input delay

1. Divide las tareas largas tempranas en múltiples tareas más pequeñas. Durante las tareas largas el navegador no puede responder a la entrada del usuario, mientras que después de cada tarea corta el navegador puede responder a la entrada del usuario. Divide las tareas largas con scheduler.yield() o envolviendo cada función en un timeout de 0 con setTimeout(callback, 0).
2. Gestiona los elementos interactivos. Considera no presentar elementos interactivos (como una barra de búsqueda) antes de que el código JavaScript que los controla esté completamente cargado. Esto evitará clics tempranos en elementos que no están listos para recibir clics. Para optimizar la UX de este patrón podrías priorizar la carga del JavaScript necesario o temporalmente ocultar/deshabilitar el elemento hasta que sea funcional.
3. Ejecución de scripts en tiempo de inactividad. Programa los scripts no críticos para que se ejecuten durante los períodos de inactividad del navegador con requestIdleCallback(). Esta función se ejecuta cuando el navegador está inactivo y no necesita procesar entrada del usuario.
4. Usa web workers para ejecutar JavaScript fuera del hilo principal del navegador. Los web workers permiten que los scripts se ejecuten fuera del hilo principal. Esto evitará que el hilo principal se bloquee y cause problemas de input delay en el INP.
5. Verifica si hay entrada pendiente durante las tareas repetitivas. Antes de ejecutar un conjunto de tareas programadas, verifica si hay entrada pendiente antes de iniciar las tareas. Si hay alguna entrada pendiente, cede el control al hilo principal primero.
6. Elimina el código innecesario. Audita regularmente tus scripts y elimina cualquier código innecesario o incluso scripts completos, porque cada línea de código puede potencialmente causar un input delay que afecte al Interaction to Next Paint. Consulta nuestra guía sobre 14 métodos para diferir JavaScript para técnicas prácticas.

Dividir tareas con scheduler.yield()

La API scheduler.yield() es la forma recomendada de dividir tareas largas. A diferencia de setTimeout(callback, 0), que coloca la continuación al final de la cola de tareas, scheduler.yield() preserva la prioridad de la tarea. Esto significa que el navegador reanudará tu código lo antes posible después de manejar cualquier entrada pendiente del usuario. Aquí tienes una función auxiliar reutilizable:

async function yieldToMain() {
  if ('scheduler' in window && 'yield' in window.scheduler) {
    return await window.scheduler.yield();
  }
  // Fallback for browsers without scheduler.yield()
  return new Promise((resolve) => {
    setTimeout(resolve, 0);
  });
}

// Example: break up a long initialization sequence
async function initializeApp() {
  loadCriticalFeatures();
  await yieldToMain();  // Let the browser handle any pending input

  loadSecondaryFeatures();
  await yieldToMain();

  loadAnalytics();
  await yieldToMain();

  loadNonEssentialWidgets();
}

Priorizar tareas con scheduler.postTask()

Mientras que scheduler.yield() divide las tareas, scheduler.postTask() te da un control detallado sobre la prioridad de las tareas. La API acepta tres niveles de prioridad: "user-blocking" para tareas críticas que requieren la máxima prioridad, "user-visible" para tareas de prioridad media, y "background" para tareas de la prioridad más baja que deberían ejecutarse durante el tiempo de inactividad.

Usando postTask() puedes asegurarte de que el trabajo no esencial no bloquee las interacciones del usuario. Aquí tienes un ejemplo práctico que programa trabajo de analítica con prioridad de fondo mientras mantiene las actualizaciones de la interfaz con la máxima prioridad:

// High priority: UI feedback runs first
scheduler.postTask(() => {
  showLoadingSpinner();
}, { priority: 'user-blocking' });

// Medium priority: fetch data
scheduler.postTask(async () => {
  const data = await fetchSearchResults(query);
  renderResults(data);
}, { priority: 'user-visible' });

// Low priority: analytics can wait
scheduler.postTask(() => {
  trackSearchEvent(query);
  sendToAnalytics('search', { query });
}, { priority: 'background' });

Consulta la tabla de compatibilidad del navegador para scheduler.postTask() antes de usarlo en producción. Para navegadores que no soportan la API, usa requestIdleCallback() como fallback para tareas en segundo plano y queueMicrotask() para tareas de alta prioridad.

Implicaciones prácticas

Abordemos la pregunta más importante: "¿Qué significa todo esto para mi sitio?" A continuación se presentan recomendaciones específicas para sitios WordPress y React/Next.js.

WordPress

WordPress, debido a su arquitectura basada en plugins, a menudo viene con un tema y una gran cantidad de plugins. Tanto los plugins como los temas suelen depender de JavaScript para su funcionalidad. Dado que estos plugins y temas son mantenidos por desarrolladores de terceros, no tienes control sobre su contenido. Esto significa que no puedes cambiar los archivos y optimizar el "código malo." Incluso si los scripts se comportan bien hoy, no hay garantía de que lo hagan después de la próxima actualización.

Para minimizar el input delay y optimizar el Interaction to Next Paint (INP) en WordPress, sigue los siguientes pasos:

• Evita usar plugins siempre que sea posible. Aunque los plugins son una forma fácil de añadir funcionalidad, a menudo agregan scripts a la página. Esos scripts causarán un input delay que impacta en el INP. Para cada plugin, pregúntate: ¿puedo lograr la misma funcionalidad con código personalizado o una solución del lado del servidor?
• Elige temas ligeros. Muchos temas de WordPress "ofrecen todo." Aunque eso parece una gran idea, significa que probablemente están llenos de funcionalidades que no se usan pero que sí consumen tiempo valioso de CPU.
• Evita los constructores de páginas. Los constructores de páginas como Elementor o WPBakery te dan una interfaz visual y fácil de usar para construir diseños. Desafortunadamente, a menudo dependen de scripts pesados para presentar ese diseño a los visitantes.
• Carga los scripts solo cuando sean necesarios. WordPress tiene la tendencia de cargar todos los scripts en todas las páginas. Para corregir esto, crea un tema hijo y desregistra los scripts innecesarios por tipo de página:

function my_deregister_scripts() {
  if ( ! is_page( 'contact' ) ) {
    // Deregister contact form script on non-contact pages
    wp_dequeue_script( 'contact-form-script' );
  }
}
add_action( 'wp_enqueue_scripts', 'my_deregister_scripts' );

• Audita tu Tag Manager. Los contenedores de Google Tag Manager a menudo acumulan etiquetas con el tiempo. Cada etiqueta que se dispara durante la carga de la página añade una tarea al hilo principal. Elimina las etiquetas no utilizadas, establece activadores apropiados (por ejemplo, dispara las etiquetas de marketing solo en las páginas de conversión) y usa los informes de tiempo integrados del Tag Manager para identificar las etiquetas lentas.
• Retrasa los scripts de terceros no esenciales. Los widgets de chat, herramientas de feedback y los embeds de redes sociales no necesitan cargarse inmediatamente. Usa requestIdleCallback() o un activador basado en el scroll para cargarlos solo cuando el usuario probablemente los necesite. Para estrategias detalladas, lee nuestra guía sobre 14 métodos para diferir JavaScript.

React / Next.js

Los sitios React y Next.js funcionan principalmente con JavaScript. Ejecutar scripts de inicio, hidratar componentes y procesar el DOM virtual requieren tiempo y pueden causar input delay para el Interaction to Next Paint (INP). La buena noticia es que tanto React como Next.js proporcionan herramientas para gestionar esto eficazmente.

• Usa componentes de servidor (React Server Components en Next.js App Router). Los componentes de servidor se renderizan en el servidor y no envían JavaScript al cliente, lo que reduce directamente la cantidad de código que compite por el tiempo del hilo principal.
• Carga los scripts de terceros con la estrategia correcta. En Next.js, usa el componente next/script con strategy="afterInteractive" para scripts necesarios después de la hidratación, o strategy="lazyOnload" para scripts que pueden cargarse durante el tiempo de inactividad del navegador. Consulta nuestra guía de async vs defer JavaScript para los principios subyacentes.
• Implementa un patrón idle-until-urgent. Este patrón prioriza las interacciones del usuario sobre las tareas en segundo plano usando requestIdleCallback() para la inicialización no crítica mientras mantiene un fallback síncrono que se activa cuando el componente es realmente necesario.
• Carga diferida de componentes. Carga de forma diferida los componentes que no se necesitan inmediatamente usando React.lazy() o dynamic() de Next.js con { ssr: false } para componentes exclusivos del cliente.
• Usa Suspense para componentes interactivos. Envuelve los componentes interactivos en límites de <Suspense> para que el resto de la página pueda renderizarse y ser interactiva mientras los componentes pesados se cargan en segundo plano. Esto evita que un solo componente lento bloquee el procesamiento de entrada en toda la página.
• Usa transiciones de React para actualizaciones no urgentes. Envuelve las actualizaciones de estado no críticas en startTransition() para que React pueda interrumpirlas si el usuario realiza una nueva interacción. Esto mantiene la interfaz receptiva incluso cuando se están realizando grandes re-renderizados.

Explora las otras fases del INP

El input delay es solo una parte del Interaction to Next Paint. Para optimizar completamente tus puntuaciones de INP, también deberías abordar las otras dos fases:

• Processing Time: Optimiza la ejecución del manejador de eventos que representa aproximadamente el 40% del tiempo total de INP.
• Presentation Delay: Reduce el trabajo de renderizado y pintado que representa aproximadamente el 42% del tiempo total de INP.

Para un flujo de diagnóstico completo, consulta nuestra guía sobre cómo encontrar y solucionar problemas de INP, y vuelve a la página principal de INP para la vista general completa.