Frontend
INP: rendimiento después de que la página cargó
Una guía para encontrar tareas largas y responder rápido durante toda la vida de una página.
Interaction to Next Paint mide la latencia de las interacciones durante la visita y representa qué tan rápido aparece el siguiente cuadro visual. Un buen objetivo es 200 milisegundos o menos en el percentil 75, separado por móvil y escritorio.
Una interacción se divide en espera de entrada, ejecución de manejadores y retraso de presentación. Medir solo el tiempo de una función puede ocultar trabajo previo en la cola o un render costoso que bloquea el siguiente cuadro.
Visual editorial
Anatomía de una interacción de 180 ms
01
Input delay
Trabajo previo en el hilo principal
02
Processing
Handlers y actualización de estado
03
Presentation
Render, layout y siguiente paint
Las mejoras suelen venir de dividir tareas largas, reducir JavaScript cliente, evitar recalcular layout, renderizar menos nodos y ofrecer respuesta visual inmediata antes de una operación asíncrona. Cada optimización debe comprobarse en dispositivos representativos.
Los datos de laboratorio ayudan a reproducir, pero el INP de campo muestra combinaciones reales de hardware, extensiones, red y uso. La mejor práctica es instrumentar rutas críticas y conservar contexto suficiente para ubicar qué interacción produjo el valor.
Diagnosticar la fase correcta
Un input delay alto apunta a tareas que ya ocupaban el hilo principal. Processing alto señala handlers o cálculos costosos. Presentation alto suele relacionarse con render, estilos o demasiados nodos. Separar fases impide optimizar una función pequeña mientras el verdadero bloqueo ocurre antes o después.
Conectar datos de campo con contexto
El percentil 75 debe segmentarse por ruta y tipo de dispositivo. Para investigar conviene registrar el tipo de interacción, elemento, versión y duración, cuidando privacidad y cardinalidad. Las sesiones lentas importan más que una demo rápida en el equipo del desarrollador.
Liberar el hilo principal
Dividir tareas permite que el navegador atienda entradas entre bloques. Reducir JavaScript cliente, virtualizar listas grandes, evitar renders amplios y mover trabajo no urgente después de la respuesta visual suele producir más impacto que microoptimizar una operación aislada. Cada cambio se valida en hardware representativo.
Definir presupuestos de interacción
Los flujos críticos necesitan objetivos por interacción y alertas por regresión. Una tabla filtrable, un buscador y un checkout tienen perfiles distintos. Integrar medición en releases ayuda a relacionar cambios de bundle, componentes o datos con el deterioro antes de que el promedio mensual lo oculte.
La carga no termina en el primer paint
INP obliga a cuidar toda la vida de la página. Un sitio puede cargar rápido y sentirse lento después; el objetivo es mantener disponible el hilo principal y producir una respuesta visual comprensible durante cada interacción importante.