Featured image of post INP: Interaction to Next Paint - La nueva métrica de interactividadFeatured image of post INP: Interaction to Next Paint - La nueva métrica de interactividad

INP: Interaction to Next Paint - La nueva métrica de interactividad

Understand the metrics behind Core Web Vitals' Interaction to Next Paint (INP) and learn how to prevent main-thread blockage in JavaScript.

Interaction to Next Paint (INP) reemplaza First Input Delay (FID) como métrica de interactividad en Core Web Vitals. Mide la latencia de todas las interacciones, no solo la primera.

Cómo se mide INP

Registra el tiempo desde que el usuario interactúa (click, tap, teclado) hasta el siguiente frame pintado. Considera las interacciones más lentas. Objetivo: < 200ms (bueno), < 500ms (mejorable).

Causas de INP alto

JavaScript síncrono pesado, re-renderizados grandes sin optimizar, tareas largas en el hilo principal (> 50ms), listeners complejos en eventos frecuentes.

Optimización

Fragmenta tareas largas con setTimeout o scheduler.yield(). Usa content-visibility para renderizado perezoso. Descompón cálculos pesados con Web Workers.

Medición

performance.now() + PerformanceObserver para INP. La biblioteca web-vitals reporta INP. Lighthouse 10+ incluye INP en sus auditorías.