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

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)

5. En WooCommerce

El INP en WooCommerce suele fallar en tres interacciones :