Cómo solucionar el INP: Cómo evitar que las aplicaciones de React se sientan lentas

Tu panel de control se siente lento. Tu API es rápida. Lighthouse muestra puntuaciones en verde. Sin embargo, cada clic tiene retraso.

Eso es un problema de INP.

Interaction to Next Paint (INP) mide cuánto tarda una página en responder a un usuario. Reemplazó a First Input Delay (FID) en marzo de 2024. FID solo consideraba el primer clic; el INP supervisa cada interacción.

Una puntuación de INP inferior a 200 ms se siente rápida. Más de 500 ms se siente lenta.

Para solucionar el INP, divídelo en tres fases:

  • Input Delay – el intervalo entre un clic y el momento en que comienza tu código. Aparece cuando el hilo principal está ocupado.
  • Processing Time – cuánto tiempo se ejecutan tus funciones y las actualizaciones de estado de React.
  • Presentation Delay – el intervalo entre la finalización de tu código y el momento en que el navegador pinta la pantalla.

Cómo solucionar el Input Delay

Las tareas largas bloquean el hilo principal. Si una tarea se ejecuta durante más de 50 ms, bloquea los clics. Llama a scheduler.yield() para dividir las tareas largas en fragmentos más pequeños, de modo que el navegador pueda procesar los clics entre ellos.

Cómo solucionar el Processing Time

Utiliza las APIs de transición de React para mantener la interfaz de usuario (UI) receptiva.

  • startTransition – envuelve las actualizaciones que no sean urgentes. React puede pausar una actualización pesada para gestionar un nuevo clic.
  • useDeferredValue – pospone los valores que no necesitan actualizarse instantáneamente.

Estas APIs no aceleran el código; lo hacen interrumpible, lo que reduce tu INP.

Cómo solucionar el Presentation Delay

Demasiados elementos DOM ralentizan el pintado.

  • Aplica content-visibility: auto en CSS para omitir el renderizado de los elementos que están fuera de la pantalla.
  • Evita el layout thrashing: nunca leas un estilo y luego escribas un estilo en el mismo bucle. En su lugar, agrupa las lecturas y las escrituras.
  • Virtualiza las listas largas.

Cómo medirlo

Lighthouse se ejecuta en un entorno de laboratorio y no puede hacer clic en tus botones como una persona real. Instala la librería web-vitals y captura datos reales de tus usuarios.

Fuente: https://dev.to/ahmed_mahmoud360/fixing-inp-field-notes-on-interaction-to-next-paint-in-a-react-app-32fa