Interaction to Next Paint (INP): Definición, Thresholds, Fixes

¿Qué es Interaction to Next Paint (INP)?

Interaction to Next Paint (INP) es el Core Web Vital que mide la responsiveness general de una página a interacciones usuario. Para cada click, tap o pulsación tecla, INP mide el tiempo desde el evento input hasta el próximo update visual (next paint). El INP reportado de la página es esencialmente la interacción MÁS LARGA de toda la visita.

INP reemplazó First Input Delay (FID) como Core Web Vital el 12 de marzo 2024. FID solo medía la primera interacción; INP samplea interacciones a lo largo del lifecycle página.

Thresholds INP

Por qué INP reemplazó FID

Qué incluye INP

1. Input delay — main thread busy antes de que event handler corra
2. Processing time — ejecución event handler + state update
3. Presentation delay — tiempo hasta que browser pinta update visual

Cómo medir INP

API JavaScript

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.interactionId && entry.duration > 40) {
      console.log('INP candidate:', entry.duration, 'ms');
    }
  }
}).observe({ type: 'event', buffered: true, durationThreshold: 40 });

import { onINP } from 'web-vitals';
onINP((metric) => sendBeacon('/rum', metric));

Herramientas

Optimizaciones INP comunes

1. Romper long tasks

async function processInBatches(arr) {
  for (let i = 0; i < arr.length; i += 100) {
    arr.slice(i, i + 100).forEach(processItem);
    await new Promise(r => setTimeout(r, 0));
  }
}

2. Defer JavaScript no-crítico

<script src="analytics.js" defer></script>

3. Usar requestIdleCallback

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

4. Mostrar feedback durante operaciones lentas

UI optimista lo hace feel más rápido.

5. Web Workers para work CPU-heavy

Mover computación expensive off main thread.

6. Reducir costo hidratación React/Vue

Partial hydration, server components, resumability.

7. Optimizar event handlers

Debounce/throttle eventos rápidos.

8. Reducir scripts third-party

Ads + analytics + chat widgets compound.

Proxy lab: Total Blocking Time (TBT)

Pitfalls INP comunes

• Event handlers long-running.
• Hidratación durante interacción usuario.
• Layout thrashing.
• Hidratación pesada en devices lentos.
• Calls red síncronos en handlers.
• Re-rendering huge component trees.
• Tag managers third-party.

FAQ: Interaction to Next Paint

¿Qué es buen score INP?

≤ 200ms en percentil 75.

¿Cómo difiere INP de FID?

FID medía SOLO primera interacción. INP mide TODAS end-to-end.

¿Por qué mi score Lighthouse está bien pero field INP es malo?

Lighthouse no puede medir INP directamente. Usa TBT como proxy lab.

¿Cómo encuentro qué interacción es lenta?

Web Vitals Chrome extension muestra el elemento.

¿Es INP lo mismo que "página es laggy"?

Aproximadamente.

¿Cómo afecta hidratación a INP?

Hidratación es JavaScript ejecutando — bloquea main thread.

¿Qué reemplazó FID?

INP se volvió el Core Web Vital oficial el 12 marzo 2024.

Testea bundles JS INP-impacting con LoadFocus

LoadFocus corre auditorías Lighthouse desde 25+ regiones globales, midiendo TBT. Regístrate en loadfocus.com/signup.