INP: qué es y cómo mejorar esta métrica de Core Web Vitals

El INP (Interaction to Next Paint) mide la rapidez con la que tu web responde a los clics y toques del usuario. Junto con el LCP (carga) y el CLS (estabilidad visual), forma el trío de Core Web Vitals que Google usa para evaluar tu web.

El límite es 200 milisegundos. Si lo superas, tu posicionamiento lo nota. Si vienes de cero, empieza por qué son los Core Web Vitals. En mi experiencia, el INP es la métrica que más cuesta bajar porque depende del comportamiento del usuario y de scripts de terceros.

Diferencia entre INP y FID (y por qué ahora es más difícil)

En cristiano: antes bastaba con que la primera impresión fuera buena. Ahora, si tienes un solo botón que responde mal, Google te lo va a hacer pagar.

Qué es un buen INP

Google evalúa el INP al percentil 75 de todas las interacciones de la página. Esto significa que el 75 % de las interacciones deben ser rápidas.

Por qué falla el INP (los 3 problemas principales)

1. JavaScript bloquea el hilo principal

El navegador usa un solo hilo para todo: procesar JavaScript y mostrar los cambios visuales. Cuando un script ocupa ese hilo durante más de 50 ms, el navegador no puede responder a los clics del usuario.

Los culpables más comunes:

• Scripts de analytics (Google Analytics, Hotjar)
• Chatbots y widgets de terceros
• Píxeles de publicidad
• Event handlers pesados que hacen cálculos complejos al hacer clic

2. Tareas largas en el clic

Cuando haces clic en un botón, el navegador ejecuta un «handler». Si ese handler hace una llamada a una API, procesa datos o actualiza un componente pesado de React/Vue, INP mide todo ese tiempo.

3. Layout thrashing

Cuando una interacción provoca que la página recalcule la posición de muchos elementos (redimensiones, cambios de estilo), el tiempo entre el clic y la actualización visual se dispara. Las animaciones con width, height o margin en lugar de transform u opacity son las principales culpables.

Cómo auditar tu INP

No adivines. Mide con datos reales.

Cómo mejorar el INP

1. Elimina o aplaza scripts de terceros

Los scripts que no controlas (analytics, chat, publicidad) son la principal causa de INP pobre. No puedes optimizar su código, pero sí puedes controlar cuándo se cargan.

Qué hacer:

• Añade defer o async a los scripts no críticos.
• Carga los widgets de chat solo cuando el usuario haga clic en un placeholder (lazy loading).

Ejemplo:

<script src="https://chat-provider.com/widget.js" defer></script>

2. Divide tareas largas en trozos más pequeños

Si tu propio JavaScript hace operaciones pesadas, divídelas en partes más pequeñas y deja que el navegador respire entre cada una.

Ejemplo:

// Mal: bloquea el hilo 800ms
for (let i = 0; i < 10000; i++) { procesar(i); }

// Bien: cede el control cada 50 elementos
async function procesarLista(items) {
  for (let i = 0; i < items.length; i += 50) {
    const chunk = items.slice(i, i + 50);
    procesarChunk(chunk);
    await new Promise(r => setTimeout(r, 0));
  }
}

3. Optimiza event listeners

Si tienes muchos elementos con listeners individuales (cada tarjeta de producto, cada ítem de menú), usa delegación de eventos:

// Mal: 100 listeners
document.querySelectorAll('.card').forEach(card => {
  card.addEventListener('click', handleClick);
});

// Bien: 1 listener en el padre
document.querySelector('.grid').addEventListener('click', (e) => {
  if (e.target.closest('.card')) handleClick(e);
});

4. En WordPress con Elementor

Elementor tiende a acumular JavaScript pesado. Soluciones concretas:

• Carga scripts de terceros solo en las páginas que los necesitan.
• Desactiva widgets que no uses (carouseles, animaciones, partículas).
• Usa un plugin de caché que minifique y combine JS (WP Rocket, W3 Total Cache).

Si quieres profundizar, mira por qué tu WordPress necesita mantenimiento.

5. En WooCommerce

El INP en WooCommerce suele fallar en tres interacciones:

El INP no es un número, es un síntoma

Optimizar el INP no es un capricho. Es una señal de que tu web tiene el código limpio, que los scripts de terceros no secuestran el navegador y que tus usuarios no se quedan esperando.

Si mejoras el INP, también mejora la experiencia de usuario, la tasa de conversión y el posicionamiento. No es magia. Es hacer las cosas bien. Mi consejo tras auditar más de 40 proyectos: no te obsesiones con el número exacto, céntrate en eliminar los cuellos de botella que bloquean el hilo principal.

Empieza por lo que más duele: los scripts de terceros y las tareas largas del hilo principal. Luego ve limpiando lo que sobra. Paso a paso.

Y si quieres completar la estrategia, mira también cómo mejorar el LCP, cómo mejorar el CLS y la guía completa de Core Web Vitals: qué son y cómo mejorarlos.

Escrito por

Alex Figueiras

Consultor SEO freelance en Valencia · WordPress + Elementor + Rank Math

Ayudo a negocios locales y pymes a posicionar en Google con auditorías técnicas, SEO on-page y contenido que convierte. Más de 40 proyectos auditados y casos medidos en sectores como reformas, formación y ecommerce.

• Sobre mí
• LinkedIn
• Contacto