¿Qué es el INP y por qué es relevante?

INP es una métrica que Google introdujo dentro de Core Web Vitals para evaluar la latencia de las interacciones de un usuario con una página web. Mide el tiempo desde que un usuario realiza una acción (clic, toque o pulsación de tecla) hasta que la página responde con una actualización visual. Un INP bajo indica una experiencia fluida, mientras que un valor alto puede hacer que el sitio se sienta lento.

¿Cómo se mide?

El valor de INP se obtiene analizando todas las interacciones en una sesión y seleccionando la peor (o cercana a la peor) como referencia. Esto significa que no basta con optimizar casos puntuales; la página debe ser consistente en su respuesta.

Estrategias para mejorar el INP

Reducir el INP implica mejorar la velocidad de respuesta de los eventos de usuario. Algunas estrategias clave incluyen:

1. Reducir el tiempo de ejecución de los event listeners

Cuando un evento ejecuta una tarea pesada, el hilo principal del navegador queda bloqueado hasta que esta tarea finaliza. Esto significa que la interfaz no puede responder a otras interacciones hasta que el proceso se complete.

Por ejemplo, si dentro de un click realizamos una operación costosa como un bucle grande, el navegador no podrá actualizar la pantalla hasta que finalice:

button.addEventListener('click', () => {
  processHeavyTask(); // Esto bloquea el hilo principal
});

function processHeavyTask() {
  for (let i = 0; i < 1000000000; i++) {}
  console.log('Tarea pesada completada');
}

Para evitar bloquear el hilo principal, podemos usar setTimeout para dividir la ejecución y permitir que el navegador siga respondiendo:

button.addEventListener('click', () => {
  setTimeout(() => {
    processHeavyTask();
  }, 0);
});

Esto libera el hilo principal de inmediato y permite que la página continúe respondiendo mientras la tarea se ejecuta en la siguiente iteración del ciclo de eventos.

2. Usar requestIdleCallback para tareas no críticas

Cuando una acción no es urgente, otra alternativa es usar requestIdleCallback para ejecutarla cuando el navegador tenga tiempo disponible.

requestIdleCallback(() => {
  loadAnalyticsData();
});

function loadAnalyticsData() {
  console.log('Cargando datos de analítica...');
}

Esto permite que las interacciones prioritarias se procesen primero.

3. Optimizar el uso del DOM

Modificar el DOM siempre es una tarea costosa, y modificarlo frecuentemente puede bloquear la renderización. En lugar de múltiples cambios, es mejor agrupar modificaciones. Por ejemplo:

const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const item = document.createElement('div');
  item.textContent = `Elemento ${i}`;
  fragment.appendChild(item);
}
document.body.appendChild(fragment);

Aquí, en lugar de hacer 100 modificaciones separadas, se usa un DocumentFragment, lo que mejora el rendimiento.

4. Utilizar Web Workers para tareas pesadas

Para tareas aun más pesadas, considera ejecutarla en un hilo separado para evitar bloquear la interfaz de usuario.

worker.js

self.onmessage = function (e) {
  const result = processHeavyCalculation(e.data);
  self.postMessage(result);
};

main.js

const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = function (e) {
  console.log('Resultado:', e.data);
};

Con Web Workers, el procesamiento se realiza en segundo plano, dejando libre el hilo principal.

Conclusión

Mejorar el INP es clave para ofrecer una experiencia de usuario fluida. Reducir el tiempo de ejecución de eventos, evitar bloqueos del DOM y delegar tareas a Web Workers o requestIdleCallback son estrategias efectivas. La optimización no se trata solo de rendimiento técnico; se trata de hacer que la web sea más rápida y receptiva para los usuarios.