Web Vitals: Cómo medir el INP correctamente#

El INP (Interaction to Next Paint) es la métrica de Web Vitals que mide la latencia de todas las interacciones del usuario durante su estancia en una página. Evalúa el ciclo completo desde que el usuario interactúa hasta que el navegador realmente pinta el siguiente cuadro en la pantalla, reemplazando oficialmente al FID. Si tu sitio se siente “pesado” al hacer clic, probablemente tenés un problemade INP.

¿Por qué el INP es el “Jefe Final” de la Performance?#

A diferencia del LCP (que es carga), el INP es interactividad pura. En 2026, con aplicaciones cada vez más complejas, no basta con que el sitio cargue rápido; tiene que responder rápido.

Fijate en los umbrales que Google considera aceptables:

< 200ms ↗

Good (Rápido)

200 - 500ms ↘

Needs Improvement

> 500ms ↘

Poor (Lento)

Herramientas: Campo vs. Laboratorio#

Confiar solo en Lighthouse es un error de principiante. El INP es una métrica de campo (Real User Monitoring) porque depende de cómo interactúa el usuario real con tu JavaScript.

Como ya vimos en mi post sobre optimización de imágenes AVIF, el rendimiento real se mide en el dispositivo del usuario, no en tu MacBook Pro M3.

Estrategias de Medición

Ventajas del Monitoreo Real (CrUX)

Refleja la experiencia real del usuario
Detecta problemas en interacciones específicas
Es la métrica que Google usa para el ranking

Desafíos de Implementación

Necesitás tráfico real para ver datos en CrUX
Difícil de replicar localmente sin herramientas de throttling

Guía Paso a Paso: Atribución de INP en Producción#

Para arreglar el INP, primero tenés que saber qué elemento lo está causando. Me pasó en un proyecto reciente : el INP volaba por las nubes y resultó ser un chat de soporte de terceros que bloqueaba el Main Thread cada vez que el usuario intentaba scrollear.

Configurando la Atribución del INP

Instalá la librería oficial

Usá `web-vitals` para capturar datos con soporte de atribución.

Configurá el reporte

Utilizá `onINP` para obtener el selector del elemento que causó el delay.

Enviá los datos

Mandá el `attribution.interactionTarget` a tu sistema de analíticas (Vercel, GA4 o Mixpanel).

Ejemplo de Implementación (TypeScript)#

src/scripts/performance.ts

import { onINP } from "web-vitals/attribution";

onINP(({ name, value, attribution }) => {
  // Identificamos exactamente qué bloqueó el hilo principal
  console.log(`INP: ${value}ms`);
  console.log(`Culpable: ${attribution.interactionTarget}`);
  console.log(`Fase: ${attribution.interactionType}`); // click, keydown, etc.

  // Enviá esto a tu API de monitoreo
  sendToAnalytics({
    metric: name,
    value: value,
    target: attribution.interactionTarget,
    delay: attribution.processingDuration,
  });
});

El Truco del “Performance Profiler”#

Si no podés replicar el problema localmente, hacé esto: abrí el Performance Tab en Chrome DevTools, poné el CPU Throttling en 4x slowdown o 6x slowdown e interactuá con el sitio.

Como ingeniero aquí en Paraguay, veo muchos proyectos que ignoran el INP hasta que es tarde. ¿Ya mediste el tuyo hoy? Si no sabés por dónde empezar, escribime y auditamos el rendimiento de tu sitio juntos.